Skip to main content

Blog

Five Steps You Can Take To Make Your Site More ADA Friendly

By on August 19th, 2024 in Web

When a website is ADA (Americans with Disabilities Act) friendly, it means it’s designed to welcome and accommodate everyone, including people with disabilities. It’s about inclusivity and making sure no one is left out. Just as you’d want every guest at a party to have a great time, you want everyone visiting your website to be able to access information and services easily, no matter what challenges they might face. While this may seem daunting, keeping these tips in mind can go a long way to help make your site more accessible.

Screenshot of a webpage titled "Mortgage Loans" with sections for purchases, refinancing, and features of mortgage products. Headings are labeled and shown in the correct order.

Nesting isn’t just for the birds

Using headings in the correct order (h1, h2, h3, etc.) is crucial for accessibility and user experience. Headings give a clear order to the information on a page, helping users navigate and understand the content better. People using screen readers often jump from heading to heading to browse a page quickly. Good headings make it easier for them to find what they need without listening to every single word. Using headings out of order or skipping levels (e.g., using h2 before h1, h3 before h2, or h6 after h1) can confuse these technologies and make the content difficult to follow for users with disabilities.

Screenshot of a webpage showing a less descriptive call-to-action “Learn More” versus a more descriptive version “Loan Details”.

Context Clues

Visitors using screen readers to navigate websites often use lists of links. Link text like “Click here” or “Read more” lack context and these users may not understand where the link leads or its purpose. Choose specific wording and avoid generic phrases that don’t explain the link’s purpose. It’s important to ensure link text clearly describes the destination or action, like “Learn More About Certificates” or “Apply for an Auto Loan” vs. “Learn More” or “Apply Now”. You can also talk to your website service provider to see if it’s possible to add text hidden from view but available to screen readers to keep the links visually short while also being descriptive.

Screenshot of a webpage with a  banner image and its associated alt text in the proper format.

Beyond Mainstream: Explore Alternative Text

Alt text for images such as banners and ads is essential for people who are blind or have low vision and use screen readers to navigate websites. It gives them a text description of the images, ensuring they understand the meaning and context the visuals convey. Without alt text, these users would not be able to access this information. Focus on conveying the essential information the image is intended to communicate. Aim for a brief description that provides enough context without being too wordy. Screen reader users typically prefer alt text that is concise and to the point.

Screenshot of a webpage with an image containing information about hiring opportunities versus a screenshot of the same page with the same information displayed within the html content.

Too Much of a Good Thing

You might encounter situations where an image contains extensive text or complex information presented in tables or charts. It can be challenging to keep the alt text concise while effectively conveying the content. Consider breaking up the image content and integrating the information directly into the HTML content of your site. Tables, charts, paragraphs of text, and even photos with captions are more accessible when presented as separate elements of HTML and text rather than as complex images alone. This approach ensures that all users, including those relying on assistive technologies, can easily understand and interact with the information.

Images of the same banner. Version 1 has low contrast text which does not pass contrast guidelines while version 2 does pass contrast guidelines.

Compare and Contrast

While you’re focused on your images, take a moment to make sure any text on them passes contrast guidelines. For regular-sized text (18 points or smaller), it should have a good contrast ratio (4.5:1 or more) with the background to make it easy to read. Larger text, like headlines or important info, it can have slightly lower contrast (3:1) but still needs to be clear. When in doubt, it’s always better to go with more contrast. Online tools such as WebAIM, can help you choose colors with the proper contrast ratios when creating your banners.

By following these simple steps, you’ll enhance the accessibility of your website while also improving the overall user experience for everyone who visits.