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 readers users.
Eg: highlighting the form's error or success, or ticket booking site - where the occupied and free seats use color as indictor.
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 mistake developers do is no label of the input fields. Inputs without label - screen readers won't be able to understand which field it is, cognitive people will have hard time to understand the what the input field is for?
If due to design we have no label then use aria-labeledby for screen readers and assistive technologies
Focus trap
Not having focus indictor 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 the 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. User needs to fill within some time limit. For the folks with a cognitive problem, this would be an accessible issue. They won't 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 audios 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 mistakes devs do. It is not just for disabled people but for the folks who prefer keyboard over the mouse.
Do check my past post on the issues when keyboard support is missing.
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.
Thank you!!
This post is originally published at a11ytips . Do check https://www.a11ytips.dev/ to read more about A11Y
Top comments (2)
Thank you.
I agree with you regarding the images. I will work on the images.