How to Ensure That Your Website Is ADA Compliant
Many websites today need to adhere to ADA compliance. Check out my previous article to learn more about ADA compliance and to determine if your site needs to be compliant. This article assumes that your site needs to be compliant and gives you practical tips on how to assure your site is compliant.
Compliance can feel like a moving target since technology is constantly changing, as are the rules themselves. It’s up to website owners to move with the ebbs and flows of the times in order to meet their clients’ needs.
ADA compliance is never a one-and-done deal. It’s an ongoing process that requires routine maintenance and remediation.
WCAG: Web Content Accessibility Guidelines
The World Wide Web Consortium has determined that in order for a website to be considered accessible, it must meet four standards, as stated in the WCAG, or Web Content Accessibility Guidelines. These are known as the Four Principles of Accessibility. ADA compliant websites must follow these principles:
- Perceivable: Users should be able to perceive the information; content can’t be invisible to their senses.
- Operable: The interface can’t require an interaction in which the user cannot perform.
- Understandable: Users should be easily able to understand all information and operation of the interface.
- Robust: Content must evolve with the advancement of changing technologies.
Overview Of Basic Accessibility
Technology is constantly changing, and with each new website feature comes an array of necessary edits in order to make the new setup ADA compliant.
When updating your site’s accessibility, don’t forget to consider these elements:
- Navigation, links, forms
- Images, maps, infographics
- Videos, audio, podcasts
- Color and contrasts
- Fonts and text layouts
- Overall structure and organization
With regard to the components listed above, be sure to account for the following:
Navigation, Links And Forms
Links should never just say, “click here.” Links should be written such that they make sense out of context. You must describe the purpose of the link, including information telling where the link will take the user. This is a basic courtesy that benefits all users, not just those requiring accommodations.
Keep in mind that many users rely solely on their keyboard for navigation, rather than a mouse or touch screen. Therefore, it’s imperative that your page has skip links. Skip links are internal page links that allow the user to navigate around the page and skip over things they don’t need to hear or be informed about.
Consider other details, such as the fact that mobile device users will not be able to see a hover state. Keep this in mind, especially when creating critical content.
Images, Maps And Infographics
Every picture should be described with words (alternative text) so that a person using a screen reader will be able to hear about the picture (while the information is read aloud to them).
The alt text info should be helpful, not annoying or unnecessary. For example, a website for a scarf store may have a link on a picture that says, “The Cozy Shop.” Without further clarification, this text does not provide user value. Always use alt text that is descriptive of the image.
Links have titles to tell screen readers more information as well as users who hover over the text. If the link is an image with no text, then the link title text would be, “View our collection of scarves,” and the alt text for the image would be, “Stack of our designer scarves,” etc. The link title cannot be redundant with nearby links and text. If it exists, it has to serve a unique purpose in directing the user.
Videos, Audio And Podcasts
Closed captioning and alt text should be provided for videos, as well as a transcript for podcasts. Otherwise, the material is not accessible to those who have limited vision and hearing.
Color And Contrasts
Color should never be the only cue to indicate a categorization, urgency or other pertinent knowledge. For example, if your site indicates important information by marking it in red, it will go unnoticed by those who cannot see red or for those with difficulty seeing in general.
You can use red, of course — but make sure that the red is complemented mindfully by another color that contrasts it well enough to be seen. If you’re unsure, ask yourself if the same set-up would be visible in grayscale. For example, red lettering on a white background should work, whereas red on dark blue would be a bit jarring on the eyes — not to mention difficult to read.
Simplicity is key. Just write out the information, as is. Don’t overthink it.
Again, this is just a beginner’s guide to get the ball rolling. It’s imperative that every website owner checks the guidelines detailed in the latest edition of the WCAG.
Fonts And Text Layouts
Currently, there isn’t a specified, foolproof font size requirement given by the WCAG 2.1. However, a general rule of thumb for body content readability would suggest a font size between 12px and 16px. The navigation-link text should be slightly bigger, between 16px and 18px.
The user must be able to magnify the focus of words and other features. Every page must have a title and consistent styling. Navigation should be aligned on the left. Busy, distracting layouts and sections should offer a way to cease movement.
Overall Structure And Organization
Depending on how a website is created and maintained, a website can offer basic accessibility or be fully ADA compliant.
In addition to the aspects listed above, basic accessibility features may include any of the following:
- User interface alternative options that are user-controlled
- Tab control navigation
- Skip-to-content feature
However, keep in mind that accessibility is a living and breathing organism of sorts — after your site is marked as “accessible,” any edits you make could jeopardize your compliance, if not properly maintained. Be sure to review your site frequently to confirm that it remains compliant.
Published in Web Development