Top 10 Mistakes in Accessibility
Colors for states & message
UX which uses color to represent any state change or message is the biggest mistake. Having a UX that is based on colors means you are ignoring the folks with vision problems and screen reader users.
Eg: highlighting the form's error or success, or ticket booking site - where the occupied and free seats use color as an indicator.
No Semantic Code and Structure
The number 1 rule of accessibility is to have semantic tags. Having no semantic code and structure is the biggest mistake developers do.
It is important to learn the HTML tags and their use cases. Using a button instead of an anchor link or vice-versa is going to hurt accessibility. using p as a heading. These are the few common mistakes developers do.
This will impact the screen readers' users and keyboard support.
Missing Labels of the inputs
Forms play a vital role in the website. Forms are used for collecting leads, ordering orders, payment, etc. Non-accessible forms directly impact business revenue. One of the top mistakes developers do is not labeling the input fields. Inputs without labels - screen readers won't be able to understand which field it is, and cognitive people will have a hard time understanding what the input field is for.
If due to the design we have no label then use aria-labeled by screen readers and assistive technologies.
Focus trap
Not having a focus indicator for sure is the worst but more worst is having no clear focus path. There are a lot of examples where the focus is just got lost in the nested-level navigation or drop-down. Avoid having a focus trap.
Have a very clear focus path and make sure that the focus is aligned with the visual path.
No alert on state changes
There are so many examples where whenever any update or change happened on the page there is no alert or announcements done for the assistive technologies. Use aria-live to announce whenever any change happens on the page eg: item got added, AJAX data got relocated.
Images without proper alt tags
Having no alt and having misleading alt tags both are toxic for your website. Have contextual and informative alt tags that describe the images for the assistive technologies.
Timed-bound user inputs
Many websites have time-bounded input fields. The user needs to fill within some time limit. For folks with a cognitive problem, this would be an accessible issue. They won't be able to focus. Running a clock will distract them. As well as folks with slow reading abilities would have a hard time too.
Provide the option to pause or increase the timer.
Multimedia Assets
If you are using videos or audio in your product make sure you are providing:
Captions
Transcript
Controls for pause, play, volume, speed
Missing Keyboard support
Not supporting keyboard support is one of the mistake devs do. It is not just for disable people but for the folks who are prefers keyboard over mouse.
Icons and Emojis
It is very common now days to use Icons and emojis in the UX. For screen readers these icon and emojis won't make any sense. But if you are trying to say anything by emojis or text do provide the text for the screen readers.