A11y Checklist

a11y-checklist

"Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible." - Cynthia Waddell

Four major disabilities addressed by a11y:

* Cognitive
   * Write at a low reading level
   * Make interactivity obvious, clear buttons, etc
* Vision
   * Blind
   * Colorblind
* Mobility
* Hearing
   * Transcriptions for audio
   * Close captioning for video


# Semantic Headings

Use heading tags to create a visual and logical hierarchy within the content, like an outline.

1. H1: Page Title
   1. H2: Main Point
      1. H3: Supporting point
      2. H3: Supporting point
         1. H4: Sub-supporting point
            1. H5: Sub-sub-supporting point
               1. H6: sub-sub-sub-supporting point
   2. H2: Main Point
   3. H2: Main Point

# Images

## alt attributes

Screen readers only "see" the alt attributes on images, so describe every image in the alt tags. This also helps SEO.

## Images as links

If you're using an image as a link, use a span in the link with some kind of text and apply a class of "screen-reader-text". In _s, this class already has styling to hide from those of us who can see, but makes it accessible for those who can't.

# Text

## Links

### Anchor Text

Avoid useless link text like "click here", "read more", and "buy now". Write something more descriptive of what will happen if one clicks that link. Examples:
* ‘Click here for the latest company news’ becomes ‘Latest company news’
* ‘Buy now’ becomes ‘Buy 4 socket extension cable now’
* ‘More info’ becomes ‘More info on our product range’

If you MUST have useless text like "read more", insert a span inside the link before the "read more" text and style it to appear outside the link. Sighted people won't see the additional text, but screen readers will.

```
<a href="#"><span>Washington stimulates economic growth </span>Read More</a>

a span {
  height: 1px;
  width: 1px;
  position: absolute;
  overflow: hidden;
  top: -10px;
}
```

### Link Title

Don't bother with the title attribute for links.

## Colors
* Make sure text constrasts enough against the background for colorblond users.
   * [Contrast Tool](http://leaverou.github.io/contrast-ratio/)
* Don't use color for navigation - "Click the red button to..."


# ARIA Roles


# Label Relationships


# SVGs


# Forms
* Label all form elements
* Avoid time-outs


# Tables
* Code headers and footers correctly


# Make sites POUR:
* Perceivable in multiple ways
* Operable using various input methods
* Understandable by your readers
* Robust across operating systems and platforms

## Make Content Perceivable
* Remove titles from your links (this adds clutter for screen readers since the title is typically the same as the anchored text)
* Add meaningful “alt” text to images ( “img1249438743″ – not meaningful; “smiling kid holding a red balloon” – meaningful)
* Make sure all your form elements are labeled (tip: you can hide this with CSS – just needs to be visible in the HTML output)
* Use good color contrast for text foreground/background (here’s a color contrast checker – shoot for Level AA)

## Make the Interface Operable
* Make page navigation/links possible using only the keyboard (try starting with your cursor in the URL bar and then tabbing your way through – see if your tabs flow in order if you jump around the page)
* Prevent seizures! No page content flashes more than 3 times per second (really everyone should do this without even trying, unless you’re designing websites circa 1999)
* Make the purpose of each link obvious from the link text alone

## Make it Understandable
* Clearly identify form errors (via text) and offer an easy way for users to fix and resubmit (if you’re using something like Ninja Forms or Gravity Forms, you’ll most likely be okay by default on this one)
* If you’ve got the same navigation links across multiple pages, don’t go switching up the order (that’s disorienting to anyone)

## Make it Robust!
* Make sure your code doesn’t throw any significant validation errors (use the W3C validator)




[Dept of Ed 508](http://www2.ed.gov/fund/contract/apply/clibrary/software.html):

1. A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
4. Documents shall be organized so they are readable without requiring an associated style sheet.
5. Redundant text links shall be provided for each active region of a server-side image map.
6. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
7. Row and column headers shall be identified for data tables.
8. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
9. Frames shall be titled with text that facilitates frame identification and navigation.
10. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
12. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
13. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the requirements for Software applications and operating systems listed above.
14. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
15. A method shall be provided that permits users to skip repetitive navigation links.
16. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.