The A11Y Project

How-tos

How–to: Create accessible data tables.

What you need to create an accessible data table.
How-to: Use Placeholder Attributes

How-to use placeholders on input elements.
How–to: Using Caption Services with HTML5 Video

How to implement captions on HTML5 video (and audio) elements.
How–to: Use Skip Navigation links

Use skip nav links to ease keyboard user fatigue and frustration.
How–to: Use TITLE attributes

Short answer: Avoid using title attributes except in a few special circumstances.
How–to: Use role='application'

NEVER use role=application on a widely containing element such as <body> if your page consists mostly of traditional widgets or page elements.
How-to: Future proof your accessibility efforts.

Ways to make your accessibility effort as future proof as possible.
How-to: Hide Content

How-to hide content but still make it accessible to screen readers.

MYTH: Screen readers don’t use JavaScript

97.6% of all screen readers have JavaScript enabled.
MYTH: Accessibility is 'blind people'

Brief explanation of the four categories of accessibility

Quick Test: Check Comprehension Level

Using these tools you can check the reading level of your written content.
Quick Test: Check contrast with your mobile device

Using an ordinary mobile device you can check your site's readability.
Quick Test: Navigate using just your keyboard

A quick 5 second accessibility test that you can run on your sites right now.

Quick Tip: A11y and a brief numeronyms primer

The numeronym "a11y" is shorthand for "accessibility"
Quick Tip: Never remove CSS outlines

Removing CSS outlines without proper fallbacks can make it impossible to navigate your site with a keyboard.
Quick Tip: Don't auto-play video, music and more

Why you shouldn't auto-play anything that could distract the user from their main task.
Quick Tip: Never use maximum-scale=1.0

Why you never ever should use maximum-scale=1.0 in your viewport meta tag.
Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping

Use ARIA Landmark Roles to help assistive devices navigate the markup.
Quick Tip: Using alt Text Properly

A few tips on how and when to use the alt attribute. Make sure your text is helpful and most importantly meaningful.

Getting Started with NVDA

A quick overview of navigating a webpage using the NVDA screen reader
Getting Started with OS X VoiceOver

How-to guide to the basics of navigating a webpage using Apple’s VoiceOver screen reader, included in OS X.

What is Color Contrast?

What is color contrast and why do we need it for web accessibility?
Getting started with ARIA

Introduction to ARIA, describing Roles, States, and Properties and when to use ARIA in HTML
A Primer To Vestibular Disorders

Key facts, definitions, demographics and causes of vestibular disorders.
A Primer To Visual Impairment

Key facts, definitions, demographics, causes, challenges and future of visual impairment.