Member-only story
Your web accessibility checklist
How to make your app accessible, one step at a time.
Web accessibility is important. Making your app accessible is morally the right thing to do, it helps you win more business, and it may even be legally or contractually required. However, not many software engineers or web designers know how to make their apps accessible.
The W3C has published its Web Content Accessibility Guidelines, and these recommendations have been publicly available for a long time. However, this document is long and complex, and it’s difficult to get through and to understand.
The Solution
Checklists are easy. They give you actionable things to do.
So, without further ado, I’ve compiled a web accessibility checklist for complying with the standards found in WCAG 2.1 AA. This checklist can be used by software engineers, web designers, QA engineers, and anyone else that has an interest in making their web applications more accessible.
See something missing? Let me know in the comments below.
Web Accessibility Checklist
Note: I’ve grouped the checklist items into related sections in as logical a way as I could. There may be some overlap between sections.
Buttons
✅ Buttons are used for triggering actions, not for navigating.
✅ All buttons have clear labels explaining their purpose.
✅ Icon-only buttons have an aria-label attribute that provides additional information for screen reader users.
✅ Buttons have contextual labels that provide information for screen reader users about which item this action is being performed on. (For example, if you have a list of 10 items in a to-do list, and each one has a Delete button, you need to provide a contextual label in the form of an aria-label on each button so that the screen reader will see something like “Delete item: walk the dog”.)
✅ div and span elements with click handlers are not used in place of button elements.
Links
✅ Links are used for navigating, not for triggering actions.
