Checklist: 56 guiding questions about web accessibility

Did you know that at least every fourth American is a person with a disability? Or, that globally, there are at least a billion people with disabilities? And that the estimates show that one in every 200 developers is blind?

Accessibility of information was one of the foundational values of the Internet. Let's make sure everyone can participate.

This blog post was written in reference to a lecture I ran for Flatiron School — see it here:

• repo
• slide deck
• video

Table of contents:

• Check your if your app 🧐
  • is perceivable
  • is operable
  • is understandable
  • is robust
  • Check your videos, pictures and gifs
  • Check your code
  • Other considerations
• Read more 📚
• Useful tools 🔧

Check your web app!

Here is a checklist of what to do when designing for accessibility. Check if your app is...

Perceivable

Information and user interface components must be presentable to users in ways they can perceive (it can't be invisible to all of their senses), for instance:

• Did you check whether the colors on your website are the right contrast?
• Did you make sure links are easily visible?
• Are you using an accessible font or enable users to switch fonts?
• Is it possible to increase the size of the text? Does your app still look the same?
• Did you include :focus attribute in your CSS for links?
• Did you remove invisible focusable elements? (If you click through the page, can you clearly follow the focused element?)

Operable

User interface components and navigation must be operable (the interface cannot require interaction that a user cannot perform), for instance:

• Did you try to activate buttons and links on the mobile version of your app? Was it easy?
• If you are using the hover attribute, are you ensuring that people who don’t operate a mouse can use it as well?
• Did you make sure to enable keyboard navigation?
• Is a “skip to main content” link present before the navigation when tabbing?
• Is your button element only for actual buttons (and not for styling)?
• Did you enable autocomplete in your forms?
• Do all your fields have descriptive labels?

Understandable

Information and the operation of user interface must be understandable (the content or operation cannot be beyond their understanding), for instance:

• Did you scan your text through Hemingway Project? If not, read on:
• Did you write in plain English?
• Did you have more short sentences than long ones?
• Do you avoid passive voice and favor active voice?
• Do you avoid jargon and culture-specific references?
• Do you avoid figurative language, idioms or specific terminology?
• Is your text left-aligned for left-to-right languages?
• Did you ensure linear content flow?

Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies (as technologies and user agents evolve, the content should remain accessible), for instance:

• Did you validate your HTML?
• Are you using semantic HTML to clearly mark headers, articles, footers, etc.?
• Did you run your website through an html validator?
• Did you make sure to use a maximum of one h1 per page/view?
• Did you use the lang attribute on the html page?
• Did you make sure to have a different <title> on each page/view?
• Did you make sure you did not skip header levels? (e.g. h1, h3, h4)
• When using lists, are you using ol, ul or dl (and not just new line and -)?
• Are your links and buttons descriptive (e.g. “assistive technology” and not “click here”)?
• Did you make sure your app does not include any text in all caps?
• Have you checked how your page looks with text increased to 200%?
• Did you remove horizontal scrolling on mobile devices?
• Can your mobile app be rotated in any direction?
• Did you enable viewport zoom?
• Did you remove session timeouts?
• Do you give your users an advance warning if a link will open in a new window?
• Did you test your page with a screen reader?

videos, pictures and gifs:

• Do your pictures have alt text?
• Can all videos and animations be paused?
• Do you have transcripts for audio?
• Is it easy to switch off gif animation on your website?
• Did you disable autoplay?
• Do videos on your page have subtitles?
• Did you ensure that images have a descriptive alt tag?
• Did you ensure that decorative elements have an empty alt tag?

Codebase

• Does your app include a readme? Does the readme include headers?
• Does your code include comments that make it easy to understand what blocks do from the get-go?
• Do your variables have names that make it clear what they do?
• Did you sacrifice code readability for fewer lines?
• Is your app open source? Did you include instructions on contributions?
• Is your documentation inclusive?

Misc

• Who cannot afford your app? How can you increase their access?
• Are you using gender-neutral words?
• Is the language you are using ableist or discriminatory in any way?
• Does your page require high-speed internet or a lot of data transfer?
• Did you test your app on a non-Apple computer?

Read more:

• Web Content Accessibility Guidelines (WCAG) 2.0
• WCAG 2.0 checklist
• Color contrast explanation
• About :focus
• Google's guide to inclusive documentation

Useful tools

• Contrast checker
• Contrast generator
• Deque: accessible CSS library

Photo by Anna Shvets from Pexels