Many of us have some sort of understanding when it comes to ADA compliance in the real world. Entrances equipped with ramps, sidewalks or loading zones that make coming and going accessible, and elevators inside locations with multiple floors plus wide enough doorways and low enough countertops.
But what about accessibility in the digital world? A website that is ADA compliant keeps everyone in mind. This is especially important when one in four adults in the U.S. live with a disability. While the ADA doesn’t explicitly address internet compliance, creating inclusive web content is a given considering Title III of the ADA prohibits discrimination in activities of places of public accommodations.
Luckily for us, there are nonprofit organizations out there that have set up recommendations to help us navigate this process. Thanks to the World Wide Web Consortium (W3C), we have clear guidance for making our web pages equally accessible to all.
To get started, take some time to read up on the basics of ADA compliance in one of our previous blog posts, “What You Need to Know About Website ADA Compliance”.
Ready for your next steps? Let’s dive into website accessibility!
Designing for Web Accessibility
The first area to examine is the user interface (UI) design of your website. Does it give those with disabilities an equal experience to those without?
Look at your visuals and graphics to answer that question. If someone with a disability can’t navigate the site just as easily, then you know there’s some work to be done. Here’s what to consider:
Foreground and Background Contrast
Text on websites need to have sufficient contrast with the background. This means avoiding colors that are too bright, too low in saturation, or too similar to the background.
Use Color Consciously
While color is a great way to provide information, do not rely on this as the only way. Some people see color differently and others can’t see color at all. Use other styles and indicators like symbols and words to get your point across.
This Gildan shirt on Amazon, for example, shows pictures of the available colors and has a text description of the color.
Make Interactive Elements Stand Out
Emphasize links or buttons using a distinct style. A great case for this is when keyboards are used for site navigation over a mouse. Apply consistent color and design variations to help users identify active elements.
Clear Navigational Cues
You want users to get around your site easily (and almost instinctively). This is accomplished with consistent styles, positions and naming, as well as multiple methods for navigating.
These simple navigational cues—“previous,” “next,” “back to top”—on the W3C page is a great way to help users get around.
Labels in Form Elements
Any forms to fill out on your site should clearly indicate the information that is needed. Keep labels closely positioned, whether that is to the left or above each field.
Provide Feedback
Keep the user informed as they navigate the site. Does a link no longer exist? Create an “oops, something went wrong” message. Did they fill out a field incorrectly or forget to fill one out? Have clear field validation (ex: an “email address is required” message). Did their submission go through? Redirect to a confirmation page.
Keep Out the Clutter
Headings, spacing, and grouping make content easier to understand. Maintain clear relationships between each section by utilizing your whitespace and calling direct attention to headings. How things are positioned on the page will also affect how screen readers digest and announce information.
Accessibility Across Devices
How many of us use more than one device to access information? Websites show up differently between laptops, desktops, tablets, cell phones, and whatever other screen we use for browsing. Optimizing your webpage for different sized viewports will make it easier to navigate.
Media Alternatives
How many times have we watched a video on mute and read the captions instead or clicked on “transcript” to skim through rather than listening to an audio clip? These different forms of consuming media don’t just make our days convenient; it also creates equal access for users with various disabilities.
Content Control
We’ve all come across beautifully designed sites with embedded images or videos on auto-play. While this may look nice, it’s not helpful when users can’t take in the information before the media moves on. Give users control over this by allowing them to start, stop, and move forward on their terms.
Usain Bolt’s personal webpage allows users to use arrows to click back and forth or use image icons at the bottom to access different slides.
Where Else Can We Improve?
There’s much more to web accessibility than visual design. Just ask anyone that’s worked in the field. This is an area that can always be improved and is always changing according to the needs of the user.
One way we can ensure our sites are ADA friendly? Consult an expert, see the world (wide web) through a different lens, or go straight to the source. A useful resource to start with is Andrew Patterson’s “Decoding Web Accessibility”, where he uses vision simulators to demonstrate a user’s perspective when using accessible software.
Another area to examine beyond design? Your website’s development and copy. A few of the many considerations to point out include:
- Use alternative text for images.
- Match the logical order of information with the order of elements in code.
- Make CAPTCHA accessible where it is needed by providing more than two ways to solve or access to a representative who can bypass it.
- Write code that uses responsive design to adapt to the user’s technology.
- Include meaningful information in link text. “Read more about marketing strategies” as opposed to “read here.”
- Use headings and subheadings as well as unique and informative page titles.
- Give users another way of doing business with you (call or email) if there’s an area of your site that is providing a service after hours. Everyone should be able to take advantage of that service during non-business hours.
Finally, draft a website accessibility statement to show your commitment towards creating an accessible experience with your brand and services. Include what steps you have taken to make your website more accessible, any known issues/areas that exist and what steps you’re taking to improve. If you’re needing some guidance with this, check out an earlier post on “Drafting ADA Accessible Statements for Websites: What to Include and Some Examples”.
The Takeaway
The goal is to create an internet world that is functional for everyone. The bar for website accessibility can seem intimidating when there are dozens of other marketing tasks surrounding content publishing. The first step is baselining where your content is at (scanning tools can help identify issues), and educating yourself on common mistakes to avoid. Incremental progress and continual improvement is the goal.
A great website design isn’t just one that has the best color scheme, the coolest graphics, or the most well-written copy. It is one that keeps every user in mind and keeps its audience engaged.
For more strategies, standards, and resources, check out the World Wide Web Consortium’s Web Accessibility Initiative (WAI).
