Standards and Tools
- Web Content Accessibility Guidelines (WCAG) 2.0: international standard for accessibility on the Web.
- WAVE is an easy-to-use tool for displaying accessibility problems on your website.
- Functional Accessibility Evaluator generates detailed reports on the accessibility of your website.
Skip Navigation Links
- “Skip to content” is a poor choice because some screen readers will read “content” with the emphasis on the second syllable.
- John’s website shows the skip navigation links when you tab around the page.
Text and Font Size
- The more vertical rhythm and letter spacing a page has, the easier it is to read.
- Size, color, leading, kerning, and measure (the number of characters per line) all factor in to the accessibility and readability of your content.
- The range for color brightness difference is 125. The range for color difference is 500.
- Snook’s Colour Contrast Checker
- A lot of developers don’t use
:activepseudo-classes. These pseudo-classes are incredibly useful for non-mouse interactions.
- StackOverflow discussion about the difference between
:focuspseudo-classes (via Russell Heimlich).
- “Click here” and “Read more” aren’t useful link text. Screen readers can read through all links on a page out of context, meaning that these links become meaningless.
- On army.mil’s website, they use “Read more” links, but include additional text that is hidden to sighted users but available to screen readers.
- HTML5 and the Document Outline Algorithm
- There’s still some debate amongst developers over how to most-accessibily mark up your document with regards to heading levels.
headersattribute on elements matches a cell (
<td>) with its relevant header (
- Don’t be cute with your labels. Avoid marketing speak or industry jargon when labeling your form fields.
- Where should
<label>s go? LukeW wrote a great article about positioning form labels.
- Consider internationalization when positioning your form field labels. The German language is looooooooong compared to English.
- Colons are largely unnecessary on form field labels. Screen readers read them and users don’t need to hear them.
<legend>to describe a set of radio buttons or checkboxes.
- Should form fields be marked up in an ordered or unordered list? Either is a good choice since most forms are a list of questions anyway.
- Add a fragment identifier in the
actionattribute of a
<form>element to jump a user (and a screen reader) down to the search results. This way the user won’t have to use the skip navigation links.
aria-required="true"on a required
<label for="first-name"><em aria-hidde="true">(Required)</em> First Name</label> <input type="text" id="first-name" aria-required="true">
ARIA Landmark Roles
- Semicolon used to be the key to use to navigate through landmark roles. May have changed recently, though.
- Paciello Group’s post Using WAI-ARIA Landmarks covers in depth all of the ARIA landmark roles.
Screen Readers and Voice Recognition
- Screen Readers: NVDA, VoiceOver, JAWS, Window-Eyes
- Voice Recognition: Dragon Naturally Speaking
- These tools are fairly expensive (hundreds of dollars) but are indespensible for their users.
John’s amazingly detailed and link-filled slides are available at jfciii.com/presentations/wasp/accessibility.html.