So far we covered the high-level guidelines that should be followed to conform with the Web Content Accessibility Guidelines 2.0 AA (WCAG 2.0 AA) and design best practices. This post will focus on coding and ADA compliance.
Developers should make best efforts to make website accessibility part of their everyday workflow instead of a last-minute task. It’ll save development and testing time. Here are a few guidelines to follow for modern website accessibility development:
- Use proper document structure
- Allow users to skip to the main content area
- Set language attributes
- Enable zoom
- Describe images where applicable
- Keep animations simple
Use Proper Document Structure
Do you remember when you learned how to code your first HTML page? There were, and still are, semantics that must be followed.
- Be sure to follow the proper hierarchy of h1 to h6, and don’t use these tags solely for styling purposes. Doing so will also provide an SEO benefit. The following code shows a few headings with some content under them.
Proper use of heading tags - Use Ordered Lists when importance is needed
- Use Unordered Lists when no importance is needed
Allow Users to Skip to Main Content
“Skip to main content” allows users to bypass the nav when using tabbed navigation.
Tip: If this interferes with design aesthetics, hide it with CSS via a hidden attribute.
Set Language Attributes
Every page of your website must have a language assigned. Setting every page’s HTML language is an easy way to help your users, including those using assistive technology, to browse your website. Screen readers will pronounce words depending on the HTML language assigned to your website. You can set the language in your template by using the tag <html lang=”en”>.
Enable Zoom
For a website to meet the WCAG 2.0 AA standard, a user should be able to scale the page up to 200%. Be sure to enable your mobile users to zoom freely on their devices, and also check that your layout looks good in desktop browsers.
Describe Your Images Where Applicable
Alt Tags
By default, images are not accessible. Be sure to use alt text for images that need it, up to 140 characters in length. While alt tag descriptions are not necessary for decorative images, it is acceptable to use alt=””.
<img src=”bird.jpg” alt=”Parrot perched on a branch.”>
<img src=”decorative-image.jpg” alt=””>
For logos that link to the homepage, use alt=”Homepage” rather than “logo.”
Aria Tags
Charts and graphs can use an aria-describedby tag and link elsewhere.
<img src=”graph.jpg” aria-describedby=”desc” alt=”graph”>
<a href=”GraphDesc.html” id=”desc”>Get Graph details”</a>
Scalable Vector Graphics
SVGs should be accessible for everyone. In order to describe vector images, use the <title> and <desc> tags for short and long descriptions.
Keep Animations Simple
It’s important to allow the user to skip/pause the animations and avoid excessive use of animations and parallax. Make sure your video, animation, or other multimedia product does not contain flashing, strobing, or flickering elements as they can cause some people to experience seizures, dizziness, and nausea. You can use the Photosensitive Epilepsy Analysis Tool (PEAT) Tool to see if your content falls in these ranges.