Does My Website Need to Be ADA Compliant?
The short answer is, “yes.” Like brick and mortar businesses, the Americans with Disabilities Act (ADA) requires businesses, regardless of size, to make reasonable efforts to accommodate customers with disabilities. What “reasonable” is remains open to interpretation. There is, however, one thing for certain, commercial websites are considered digital storefronts to many and fall under the ADA. As we share with our clients, better to be in compliance than to risk unanticipated issues in the future.
In the past year, the shift from traditional workspaces to virtual environments has amplified the need for technology to be in order. Rather than getting into the legal aspects of the ADA, let’s focus on the things that can be done to your company website to ensure it meets the compliance standards set forth by the ADA.
Here Are the Top Five Things That Should Be Done to Ensure A Website is ADA Compliant
Orientation and Responsiveness
Individuals with disabilities often find it easier to use a tablet or smartphone to browse the internet. For this reason, a website should be functional on these devices by scaling to the different screen sizes and changing to fit the different formats. Some functions such as hover effects work well on desktops or laptops, but don’t translate to touchscreen devices, so the content shown on a hover will have to be displayed another way. This is generally accomplished by making content and navigation available through a click.
The good news is responsive websites are more common for most website platforms, which makes it easy to perform the necessary adjustments to a website that is already established and if the website is being built from scratch, then all goals can be accomplished from the start.
Moving from one section of a website to another can be a challenge for anyone with visual impairment, especially if the site is not structured properly. Tab navigation allows a user to move easily through a site via keyboard shortcuts. Most screen readers are reliant on this structure to read a website correctly. For those individuals with physical disabilities, tab navigation might be the only way they are able to access your site, which is why it is critical it’s in working order. Otherwise, you run the risk of the user abandoning your website.
One thing to keep in mind is that Google is placing a higher level of importance on the user experience and how visitors interact with your website. This is not only for visitors without impairments but applies to those with physical challenges as well.
Labels, Titles, and Alt Tags
Visual elements on your website, such as buttons, icons, and images must be functional for all users. This is accomplished through the proper labeling of the items so that all tools used to identify them function properly.
For instance, buttons should have a title attribute that is the same are the text on the button. If the text that appears on a button is ‘send’ to submit a contact form, but the title on that button in the back end is ‘submit’ the program will not be able to identify the button and the submission will fail.
Images also need an alternative attribute to help identify them as well. The ‘alt’ tag needs to be included for all images to the user can gather information about what is being viewed on the page. Simply stated, an alt tag should be a brief summary of what the image is conveying.
This also holds true for icons, however, the labeling is handled a bit differently. The labels combine a mix between the button and the image. Icons are either text or a SVG image, so the ‘title’ attribute will be used for these like the button, but the value will be the description like with the image.
Spacing and Sizing
Spacing is created for a website through padding and margins. By increasing the padding to an element more space is created inside and between the edge and the content. This will enable an element to be made larger. The margins will add spacing around an element to give it a bit of breathing room.
This is important since an individual who experiences tremors or is challenged by eye-hand coordination, clicking on a small button or element can be a challenge. By increasing the padding and margins, more space can be devoted to the action elements without compromising the integrity and layout of a page.
Readability including Color Contrast
The most important thing to know for readability is all text should always be text. This seems straightforward but isn’t. People will add words in an image or add simple PDFs to websites without an option for the screen reader to be able to read the information contained. The ‘alt’ attribute on the images should solve the issue for most images, but this is not an option for a PDF. If possible, a page for the PDF should be created to give the user the option to download a PDF, but have the information available in another format. All PDF information should be accessible as text whenever possible.
According to the National Institutes of Health, color blindness occurs in about one in 12 males and one in 200 females. To make sure this population can read the content webpages you will need to pick contrasting colors to provide readable text for all. White background with black text is a safe bet, but a green background with blue text can get into trickier territory.
Certainly, we have only scratched the surface of what should be taken into consideration when designing or updating any website. To learn more, including exemptions that could impact a website, click here to read about the ADA. Also, to learn about color contrast, fonts, and other elements, click here to learn more about the Web Content Accessibility Guidelines (WCAG).