In today’s world, the internet has become a vital part of our daily lives, constantly connecting us with people and information. As such, creating an inclusive online space isn’t just a nice-to-have, it’s now an essential requirement for individuals who create content on the internet.
Imagine navigating a world where barriers prevent you from accessing the information, services, and experiences many of us take for granted. For millions of people with disabilities, this is a daily reality when encountering websites that are not designed with accessibility in mind.
Creating or modifying a website to be ADA (Americans with Disabilities Act) compliant isn’t just about meeting legal requirements, it’s about embracing diversity, promoting inclusivity, and ensuring that everyone, regardless of their abilities, can access and enjoy your content. Read more about our focus on accessibility here.
To that end, let’s zero in on 10 essential steps you can take to make your website more accessible.
STEP 1: Understand ADA Compliance 🎓
Navigating the world of digital accessibility can seem daunting (it was for me!), but understanding the foundational principles of ADA compliance is a crucial first step in creating an inclusive online space. So let’s start at the beginning, the most widely adopted standards are those set out in the Web Content Accessibility Guidelines (WCAG). Understanding the nuances between the latest versions of WCAG can help you tailor your digital strategy to meet evolving accessibility needs.
- WCAG 2.1: Released June 2018, WCAG 2.1 builds upon 2.0 and added 17 new items for compliance. The main gaps were mobile accessibility, low vision, and cognitive and learning disabilities, among other areas.
- WCAG 2.2: Then in December 2020, WCAG 2.2 introduced nine additional items for compliance.
Both WCAG 2.1 and WCAG 2.2 have three levels of conformance: A, AA, and AAA. Level A is the minimum, and Level AAA is the most advanced.
What’s the requirement? Well, in April 2024, the DOJ ruled that state and local governments must adhere to a WCAG 2.1 A and Level AA. This should be taken as a preview for what’s likely to come for the private sector. For now, we look at WCAG 2.2 because it’s available and covers all WCAG 2.1 requirements.
STEP 2: Use Alt Text for Images 🖼️
Alt text, short for “alternative text,” is a brief description of an image that screen readers can read aloud to visually impaired users.
Let’s take a look at some alt-text options for the image below:
Alt text option 1: Flying plane
Alt text option 2: Plane in sunset
Alt text option 3: A rear view of a commercial airplane, flying through sunset with orange and blue skies
Alt text option 4: Commercial airline, likely United, flies from NYC to Paris on the evening of May 21 through sunset. Passenger count is 75, and flight was delayed three hours.
Which option do you think is best?
Options 1 and 2 do not provide enough description. Option 4 provides tons of irrelevant context. So, option 3 is ideal.
We want to be concise but descriptive, so that people who cannot see the image still understand what it depicts, its purpose, and the reason the image was included with the content.
STEP 3: Create Accessible Forms 📝
Most of the sites we build and design incorporate some type of form. Poorly designed forms can create barriers for users with disabilities, making it challenging for them to navigate, understand, and complete the form successfully. Be sure to think about the following when designing or implementing a form.
- Clear Labels and Instructions: Be descriptive in your labels and provide clear instructions to guide users through the form fields.
- Create interactive fields: Highlight input elements on focus, so users do not have to guess where they are in the form.
- Error Handling and Validation: Provide clear error messages and feedback to users. For example, let the person know if there’s an error in text. Then let the person access the error and correct it before resubmitting the form.
- Responsive Design: Optimize form design for various devices and screen sizes, ensuring that the form is accessible and usable on desktop computers, tablets, and mobile devices.
STEP 4: Caption and Transcribe Multimedia Content 🎥
- When incorporating any video content, be sure to provide captions and transcripts for users with hearing impairments.
- Avoid using auto-playing media, such as videos or audio clips, as it can be distracting and disorienting for users with cognitive or sensory disabilities.
- Always include a pause button to allow users control over playback (including on photo carousels).
STEP 5: Choose Accessible Colors and Contrast 🎨
This one gets the most attention when it comes to accessibility and rightfully so. Selecting the right color schemes and contrast ratios is crucial for creating an accessible website for users with color blindness or low vision. If you’re just starting a brand, picking accessible colors can save you big headaches down the road. Yes, I’m talking about you orange and white.
- Contrast Ratio: Aim for a contrast ratio of at least 4.5:1 for text and interactive elements against their background to ensure readability and accessibility for users with low vision or color blindness.
- Color Blindness-Friendly Palettes: Use color palettes that are friendly to users with color blindness, such as blues, greens, and high-contrast combinations like black and white. Avoid relying solely on color to convey site user information or to drive navigation to key content sections (e.g., “click on the red button to sign up”).
- Test Color Combinations: Test different color combinations and contrast ratios to find the most accessible and readable options for your website. Consider using tools and browser extensions specifically designed to check color contrast and simulate color blindness to evaluate your color choices.
💡HELPFUL TIP – Here are a few tools we utilize to check contrast:
- WebAIM’s Color Contrast Checker: A free online tool that allows you to check the contrast ratio between two colors and provides feedback on whether the contrast meets accessibility standards.
- Colorblindly (Chrome Extension): A Google Chrome extension that simulates color blindness and allows you to view web pages as users with different types of color blindness would see them, helping you identify potential accessibility issues with your color choices.
- WCAG Color Contrast Checker (Chrome Extension): A Google Chrome extension that evaluates the color contrast of text elements on web pages against their background and provides feedback on whether the contrast meets WCAG accessibility guidelines.
- Stark (Chrome Extension): A comprehensive accessibility toolkit for designers and developers that includes color contrast checking, color blindness simulation, and other accessibility tools to help you create accessible designs.
- WCAG Color Contrast Checker: A handy tool to check the color contrast between foreground and background elements according to WCAG 2.2 guidelines that takes CSS properties, RGBA values, and opacity into consideration. The checker can simulate color blindness and show web designers and developers how their color palettes will be interpreted by individuals experiencing varying degrees of color blindness.
STEP 6: Include Accessibility Statements and Policies 📋
Include accessibility statements, policies, and contact information on your website to inform users about your commitment to accessibility and provide resources for assistance. (We usually put these in the footer next to your privacy policy.) Here’s a tool we use to that will help you create your own accessibility statement. When you’ve drafted accessibility language for your website, be sure to have your legal counsel review it before publishing it online.
STEP 7: Test Accessibility Regularly 🧪
Establish a regular schedule to review your digital offerings for accessibility. Use automated tools to catch the common issues, but don’t stop there. Get real feedback from site users in manual testing to uncover any challenges that might slip through automated checks. Keep a close eye on what needs fixing and tackle the most impactful issues first.
STEP 8: Educate Your Team and Users 🧑🏼🎓
Educating your team and users on WCAG standards for accessibility compliance is crucial to creating an inclusive and accessible environment. Here are some ideas and resources to help you get started:
- Training Sessions: Organize training sessions for your team to educate them on ADA compliance and accessibility standards relevant to your industry. (I personally love and attend all the webinars hosted by Useblenet.)
- Accessibility Audits: Conduct regular accessibility audits of your website(s) and digital content shared through other channels to identify areas for improvement.
- Documentation: Create and maintain documentation outlining accessibility guidelines, best practices, and company policies.
STEP 9: Review Available Resources 📚
There are ample resources online to help you better understand accessibility guidelines and educate your team on current standards. Here are few places to get you started:
STEP 10: Commitment 🙏
I’ve mentioned this in my other blog posts regarding accessibility, but incorporating accessibility into your website should go beyond mere compliance. Doing so shows a commitment to inclusivity, diversity, and recognizing the value of every individual who engages with your online content. That helps the people you’re trying to reach feel seen, heard, and valued. And that matters.
Ready to make your sites more accessible and inclusive?
Contact us today to learn how we can assist you in creating an ADA-compliant website that everyone can enjoy.