There are a number of ways to ensure that your website is ADA compliant. The most important part is making sure that all content is accessible to everyone, regardless of ability. This includes ensuring that all text is readable, videos have closed captions, and images have alternative text descriptions.
While this sounds easy to do, in reality, it’s tricky to ensure that all of the content on your website is truly in compliance. In one of the more famous brand lawsuits, the Supreme Court ruled that Domino’s website wasn’t compliant, as a blind man was unable to use the chain’s website.
Fortunately, there are steps that you can take to ensure your website is in consistent compliance with the ADA guidelines. Keep reading to learn about the essentials you can’t miss when designing and rebuilding your website.
Content Must Be Accessible To All Users
All website content should be readable by voice recognition, screen readers, and keyboard-based navigation systems. In addition, website imagery must have alternative text descriptions.
It may be difficult to understand why these behind-the-scenes features are so important if you do not require these accessibility tools to navigate a website, but for a potential customer looking at your brand, you’re giving them the experience any other user would have when navigating your site.
First, think about font size. When designing for desktop layouts, use a minimum font size of 16 pixels to ensure that it’s readable even to those who are visually impaired. For mobile design, a 14 pixel font is likely the lowest you could go.
Second, your fonts should be dark in color to contrast against a lighter background. This provides increased legibility for a person with low vision.
Enabling keyboard navigation
Internet users with disabilities are occasionally unable to use a mouse for navigation. This means that keyboards or other input devices must be used to navigate the web. Unfortunately, many overlook using keyboard-only navigating when designing their website.
Some ways to ensure keyboard navigation is enabled on your website:
- Use tab indexes and make sure links, form fields, and other interactive elements are in a logical order
- Create a custom keyboard shortcut by using the access key attribute on any element on the page.
- Use ARIA landmark roles to identify different sections of the web page.
- Use event handlers such as focus and blur to control when certain content becomes active or inactive.
While these actions seem small, they make it so that your users can navigate with only a keyboard and ensure full accessibility of your website.
Ensure All Media is Accessible
This includes ensuring that all videos have closed captions and audio descriptions, as well as transcripts for those who are deaf or hard of hearing. Images must also have alternative text descriptions in order to be ADA compliant.
If you add this “alt text” to your image, many programs that blind users use can read out the full description of the image. You want to ensure that this “alt text” would make sense to a blind person, though.
It’s easy to get lost in the idea that “alt text” is a great way to add hidden keywords, but the last thing a blind or low-vision user wants is to have keywords spat out at them. Ensure you’re using alternative text descriptions for their intended use.
Remove The Time-Outs
Many websites have timed elements, which can be a problem for individuals who rely on keyboard navigation or pointers. When using these browsing aids, it can be impossible to complete checking out of an online store before the website kicks the user out.
Your job when designing your website should be to keep this in mind. If you absolutely need a time-out feature, make sure it won’t delete the user’s progress if they need to refresh and come back to the page. Otherwise, your user will end up frustrated and never complete their final steps in becoming a customer.
Test Website With Screen Readers and Browsers That Meet ADA Standards
This may be one of the most important steps you can take to ensure your website meets ADA standards: test it. Screen readers offer a great way to see how someone with low vision or blindness will interact with your site, and it also offers insight into what should be changed to make the site as accessible as possible for everyone who visits.
The Alt-Text tooltip is a good example of an alternative text that would show up when pointing at an image; this specific tooltip reads “Tree in winter.” Keep in mind that all alternative text descriptions must describe the image.
It might seem complicated to test something that isn’t meant to serve you, but it’s a necessary step to ensure your website is accessible to as many users as possible. Accessibility means that your users, regardless of physical needs, can access your products and services, when others can’t offer the same to the same clientele.
Make Sure Your Website Is ADA Compliant
As we alluded to earlier, there isn’t nearly enough room in this article to cover every aspect of ADA compliance. There’s a lot of information that you should know to make sure that your website is safely complying with all necessary ADA requirements to avoid legal trouble down the road.
That’s where KangoMedia comes in. We offer the best McAllen TX website design and SEO services, and we’re here to make sure that your website is optimally designed to keep you competitive and at the top of the search results!
Whether you want to make sure that your site is ADA compliant or are looking for a professional team to build your website from the ground up, we have you covered!
Check out our web design portfolio and request a free consultation to extend the reach of your brand today!