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:
Do you remember when you learned how to code your first HTML page? There were, and still are, semantics that must be followed.
“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.
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”>.
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.
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.”
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.
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.recommend this