Top 10 commonly made a11y mistakes :
While we aspire to beautify our websites to make it appealing, the accessibility of the same content is often ignored by a lot of developers. I recently gave a talk on the same during Hack Quarantine to highlight the most common mistakes which breaks accessibility. Let us quickly browse through the same.
1. Semantic HTML
Always stick to the semantics and make them your best friends. This is important for the structuring of the Accessibility Tree which is extracted from the Document Object Model(DOM). Also, structure each page using appropriate semantics like
2. Contrast Ratio
The AA standards for the WCAG says that the Contrast Ratio should be :
- 3:1 for Large Text(18px & bold or 24px)
- 4.5:1 for Small Text
3. Hiden vs None
Understand the difference between the display:none, visibility:hidden as well as visually-hidden strategies. This is extremely important for screen reader users to provide them with appropriate information.
4. Alt Text
Never miss out on the alternative text for the images to provide the required information for visually disabled users. Make sure to make it concise, intuitive and descriptive rather than short and vague.
Understand the difference and avoid substituting placeholders for labels since they are inaccessible. Always resort to labels or resort to
visually-hidden to provide assistive information to the users.
6. Buttons VS links
7. Outline Focus
NEVER remove it. This is very important for keyboard navigation. If there are some conflicts regarding the designs, look for an alternative CSS styling to compensate for the same, say for example, by changing the outline styling.
8. Empty links
Never leave link tags(i.e. without a text) empty because again it causes issues for screen readers. Other than that, avoid using ambiguous link text so that the user does not lose context.
9. Use Skip links
Avoid tab-trapping the user in the navigation, especially with a lot of options, to avoid visiting all of them for every page by using Skip Navigation Links. This gives a better user experience by giving an option to skip to the main content.
10. Don't change the tab order
Don't play around with tab index and position properties a lot since it might break the natural tab sequencing of elements. The markup should be such that it is clean and sequential to that the same general ordering is maintained for the visuals.To know more about each of these pointers:
Link for the slides
Link for the video