Presented by John F. Croston III. John organizes Accessibility Camp DC.

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.

Color Contrast

  • The range for color brightness difference is 125. The range for color difference is 500.
  • Snook’s Colour Contrast Checker

Links

  • A lot of developers don’t use :focus and :active pseudo-classes. These pseudo-classes are incredibly useful for non-mouse interactions.
  • StackOverflow discussion about the difference between :active and :focus pseudo-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.

Source code from army.mil

Headings

Tables

  • The headers attribute on elements matches a cell (<td>) with its relevant header (<th>).

Forms

  • Use <fieldset>, <legend>, and <label>s!
  • 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.
  • Use <fieldset> and <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.

Search

  • Add a fragment identifier in the action attribute 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 <input> element.
<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

  • Roles: application, banner, complementary, contentinfo, main, navigation, search
  • 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

John’s amazingly detailed and link-filled slides are available at jfciii.com/presentations/wasp/accessibility.html.