As a web developer, or anyone involved in building digital products for the web, there are some common mistakes that you should avoid. Because it’s the right thing to do, and you don’t want to be the reason your company gets sued.
In this article, I’ll outline 10 common accessibility mistakes to avoid when building websites.
Trapping the Keyboard focus in an element such as a dropdown is one of the most irritating mistakes a web developer can make. A visually impaired user who is tabbing through the page and gets stuck in a dropdown will have a frustrating experience on your website.
Ensure you define a clear focus path for navigating the DOM that corresponds with the accessibility tree.
Simply because you like how a particular color combination looks and feels doesn’t mean that it is the right combo to use. Try using contrast plugins to test your color combos to be sure they have a 4.5:1 ratio at the very least. This helps people with poor color vision to differentiate between the components of your website.
Bad alternative text descriptions
Every picture must have an alt attribute. In addition, be concise and clear in your descriptions of images on your website. In addition to helping people with disabilities and low bandwidth, it is also good SEO practice.
Lack of semantic HTML/ARIA structure
HTML 5 introduced several semantic tags. These tags such as; section, main, nav, footer, and aside, are helpful to provide context to both the web developer and the user agent.
In addition, where HTML 5 semantic tags fall short, you can use ARIA labels to help provide more context to your HTML elements.
The sole use of a text-based image
It’s not advisable to only use text images to provide meaning to a component or section of a web page. Try to add a description to the picture. It provides context for those who use screen readers to hear the content of your web page
For people who have low vision or some cognitive disorders such as ADHD, it’s advisable to make your web content zoomable. This helps people with low-vision better see your content and helps people with ADHD to focus on specific sections of the web page
Confusing link text
Ensure that the text for all your links makes sense. It should always be contextually related to the link. In addition, do not use a long string of words as a link. Preferably not more than five words. This is good for screen readers and SEO.
Not Labeling icons
It‘s common to see developers not providing labels for icons. For instance, in a photo gallery, the arrow buttons signifying “next” and “previous” may not be labeled. Always label such icons and smileys. It gives context and meaning to your site making it easier for people to intuitively navigate through the web page.
Empty form labels
Empty form labels are very troublesome for people accessing your web page using assistive devices. Form labels inform screen readers about the requirements of form fields. Make sure the form labels and inputs are clear for all the forms on your web page. It’s not enough to put placeholder text. Always label your forms.
Lack of skip links
It can be cumbersome for users of assistive devices and keyboards to navigate through all your aside content and dropdown menus before eventually getting to the main content of your web page. This is where skip links come in handy. Skip links allow users to skip from the main menu straight to the main page content, bypassing all the other not-so-relevant content.
And there you have it – 10 common accessibility mistakes to avoid.
Remember, the practice of building accessible digital products is something that has come to stay. The earlier you imbibe the culture, the better it’ll be for your consumers.
Keep practicing, and accessibility will become a normal part of your work process.