Web accessibility indicates websites, tools, and technologies are designed and developed in a way that people with disabilities can use them. The most recent guidelines for web accessibility are specified in Web Content Accessibility Guidelines (WCAG) 2.0[1]. US federal government had set a conformance deadline to WCAG as January 1, 2018. Accessible content is now no longer optional; it is a must-have.
Making content accessible usually requires taking care of some basic guidelines related to the navigation mechanism, and fixing some issues in the underlying code (which commonly don’t even count as issues on the regular visual screens). The basics of accessibility are fairly easy to implement. But if you are new to accessibility, it might take some time and effort to learn about them. Most mistakes related to implementing the accessibility guidelines have to do with a failure to understand what constitutes accessible content.
Based on our experience of developing multiple WCAG 2.0 compliant projects, here is a list of the most common issues that could make your content non-accessible, and a checklist to help you avoid them.
| Common Issues | Checklist to Avoid the Issues on The Left |
| 1. Too low contrast 2. Color-driven instructions 3. Background colors that don’t contrast images against text – – – | · Provide sufficient color contrast. Color contrast can be checked with help of free tools like Webaim-color contrast checker. · The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. · Ensure that information conveyed by color differences is also available in text. |
| 4. Lack of keyboard accessibility 5. Lack of “skip to main content” or “skip navigation” Links 6. Complex or difficult interactivities – – – – – – – | · Make each page navigable by keyboard alone. · Add “skip to content” links to allow a user to jump directly to main content rather than navigating through all the controls. · Avoid complex interactivity design by chunking complex modules into simpler and smaller activities with required user instructions. · Provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who use alternate keyboards or input devices. |
| 7. Missing or improper headings 8. Flexibility with different text sizes – – – – | · Use heading tags (H1, H2,…), table headings and lists (UL, LI). · Add a meaningful page title. · Ensure that content can be scaled uniformly by using a web technology (the browser’s zoom functionality for instance). At the same time ensure that, the zoom function preserves all spatial relationships on the page and that all functionality continues to be available. |
| 9. Screens or parts of screens that change unexpectedly 10. Links that open unexpectedly in new windows – | · Avoid pop-up windows. · Allow pausing of animations. · User indication should be given when the focus is changing to the new window. |
| 11. Too many links or navigation items 12. Links or buttons that do not make sense – – | · Avoid “click here” link text. Describe the purpose of a link in the link text itself, instead of just saying “Click here”. For example, content that says, “Open the website harbingergroup.com” instead of “click here.” · Keep navigation consistent across all pages. |
| 13. Inappropriate Alt attributes 14. Images with missing or improper descriptions (alt text) – – – – – – – – | · Add alt text to images which describe the image. For example, an image showing a United States map with its population should have alt text as “Map of the United States showing population density in various states” instead of “an image” or “US Map” as alt text. · Add labels to form elements like buttons, links etc. · Use CSS for visual presentation of text. CSS benefits accessibility primarily by separating the document structure from presentation. By separating style from markup, developers can simplify and clean up the markup in their content, making it accessible at the same time. |
Most organizations across the United States are now legally required to meet accessibility standards. But even if your organization doesn’t fall into that category, it’s still a good idea to make your digital content accessible, because it makes good business sense. It can help improve user experience and hence make your web content more effective.
If you are interested to know more about accessibility or if you have more points that can be added to the list above, feel free to write to us at contact@harbingergroup.com.
