Skip to content

Instantly share code, notes, and snippets.

@kfrank

kfrank/accessibility-checklist.md

Created June 7, 2016 19:14
Show Gist options
  • Save kfrank/d0103276c00e0ea1981d9e3e09574b00 to your computer and use it in GitHub Desktop.
Save kfrank/d0103276c00e0ea1981d9e3e09574b00 to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility Checklist
Raw
accessibility-checklist.md

Accessibility checklist (All of the things in this checklist may not apply to every project)

Aria roles:

  • <header role="banner"> A region of the page that is site focused. Typically your global page header.
  • <nav role="navigation"> Contains navigational links.
  • <main role="main"> Focal content of document. Use only once.
  • <article role="article"> Represents an independent item of content. Use only once on outermost element of this type.
  • <aside role="complementary"> Supporting section related to the main content even when separated.
  • <footer role="contentinfo"> Contains information about the document (meta info, copyright, company info, etc).
  • <form role="search"> Add a search role to your primary search (how to implement).

Language attribution:

  • <html lang="en"> Specify a language with the lang attribute on the element.

Document Outline:

  • Use semantic headings and structure

Links:

  • Ensure links have :focus state.
  • Ensure links are recognizable (underlined).

Images:

  • Use appropriate alt text. Read article on using ALT text

Javascript:

  • Unobtrusive Javascript
  • Use unobtrusive Javascript (never use inline scripting).

No-JS Alternatives:

  • Provide alternatives for users who do not have Javascript enabled and for environments where Javascript is unavailable.

Forms:

  • Logical layout - Tab order of the form follows a logical pattern.
  • Associated label for all form controls (e.g. input, select etc.) - (e.g. <label for="name">Name:</label><input id="name" type="text">)
  • Make sure placeholder attributes are NOT being used in place of label tags. WHATWG. An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)
  • Group related form elements with fieldset and describe the group with legend. Important for and

Media (Audio and Video) Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.

  • Provide text transcripts
  • Synchronized subtitles for videos

Color and Contrast:

  • Test color contrast – Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone.

Test for different types of color blindness: Test against different types of color blindness with a tool like http://colorfilter.wickline.org/. If you are on a Mac, another option is Michel Fortin's, Sim Daltonism color blindness simulator. http://michelf.ca/projects/sim-daltonism/

  • Deuteranopia
  • Protanopia
  • Tritanopia

Testing Navigating your site using a range of tools, such as just the keyboard or a screen reader, will help you understand how a blind, low-vision, or limited-mobility user will experience it.

  • Test using a screen reader
  • Test using keyboard only
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment