How to avoid the top 15 Accessibility Mistakes

When designing an accessible website, there are some common mistakes or misconceptions you may run into. This post describes how to avoid those mistakes so you can start off your accessibility development correctly.

It's always easier to design and develop with accessibility in mind, rather than to add it in at the end. This is because it's more of a question of UI.

If you design a beautiful, yet inaccessible site and develop it, you've wasted a lot of time on something that has to be re-developed.

The key is to design a beautiful, and accessible site from the get go, so you don't have to re-code everything with a new design.

1. All images, whether decorative or informative, should have an alt text. Refer here for how to implement the alt property: Alt Property
2. Allow a user to use the keyboard to do the same things a mouse user can do. If you can click on something, you should be able to use enter and space to do the same thing.
3. Don’t trap users in a keyboard navigation loop. Make sure the user can get to all the components by tabbing and other shortcut keys. Test this thoroughly to make sure you can get to all components.
4. If dynamic content shows up on a webpage tell the user it just appeared.
   Eg. When you choose your country in a form, and a list of cities is loaded based on the country chosen. The user should be notified that this new dropdown menu has appeared on this page.
5. When a user navigates using the keyboard, tell the user what they have landed on. Is it a settings button? An input field for your name?
6. When you tell the user what they have landed on, don’t just tell them it’s a button, tell them what the button does. If you have 20 buttons on a page the user is just going to hear “button button button button ...” which doesn’t give the user any context at all!
7. Don’t use tables to structure your page (old way of web dev), because the user will think they’re in something like an excel spreadsheet.
8. When navigating data tables, the user should know what column heading and row heading they’re at, and the value of that cell.
9. Use headings to indicate what this part of the page is about. Are they at the nav bar? Are they at an article to be read? Are they at a menu where they’re supposed to choose an option?
10. Don’t use only color to convey info. For example, telling the user:
    

    "As you can see from the highlighted part of the code, this is the proper way to use a <button> tag"

    
    Which refers to this code somewhere on the page:
    
    
    
    
    
    Accessibility users may not be able to see yellow.
    You can restate the part of the code in aria you want to refer to:
    

    "This is the proper way to use a <button> tag:
    <button type="button">Click Me!</button>"

    
    
11. Use captions for video audio. Also, use captions to describe images.
12. When an accessible user tabs to a component and chooses an option, for example: “Mute Audio”, don’t reset the tab order to the beginning of the page, restart the tabbing where they left off. (At the “Mute Audio” button)
13. Allow to the user to skip over a navigation element easily, especially if it exists on all the pages of your multi-page website. Also, allow the user to skip to different sections of the page.
14. Give the page a title. The URL will be read, but this is often not as clear as a simple title indicating to the user what page they’re on.
15. Do not create another page for accessible users and ask them to use it instead, because this segregates them from other users which is inhumane.

Credit to Todd Liebsch for describing most of these common mistakes!

Please leave questions and comments below :)