Accessible Web Design 101: 4 Common Mistakes (And How to Fix Them)

Why should St. Louis businesses care about digital accessibility?

For starters, it’s a legal requirement: The Americans with Disabilities Act (ADA) is applicable to websites and other digital products, per official guidance released by the Department of Justice. Each year, thousands of ADA lawsuits cite web accessibility issues, and the number of lawsuits continues to increase annually.

But while compliance is important, it’s not the only factor to consider. About 25% of US adults live with at least one disability. An accessible website can help you reach those potential customers — and bring in new traffic by improving search engine optimization (SEO).

Most importantly, inclusive design improves experiences for everyone, and most of the best practices are easy to follow. To get started, let’s look at a few of the most common web accessibility barriers (and learn how to fix them).

1. Low-Contrast Text

If people can’t read your website, that’s a big problem. Text that doesn’t maintain enough contrast with its background may be unreadable for people with color vision deficiencies.

For example, take a look at the images below. The one on the left uses accessible color contrast; the one on the right does not. Which one is easier to read?

The Web Content Accessibility Guidelines (WCAG) requires a minimum color contrast ratio of 4.5:1 for most text. You can quickly test your website with free online tools, then fix color combinations that don’t make the grade.

Make sure your designers understand the importance of contrast and test all content against those standards. That includes your business’s videos, PDFs, and other items that are essential to your website’s functionality.

2. Missing Alternative Text for Images

Alternative text is also known as alt text. It describes the purpose of images for users who can’t perceive content visually.

That includes people with vision disabilities, but it’s broader than that: If someone’s viewing your website with a slow internet connection, the images might not load. When that’s the case, the alt text fills in the gaps — provided that you remember to add it to each image when building your website.

Fortunately, writing alt text is fairly easy. Keep these tips in mind:

Don’t include “image of” or “picture of” in your alt text. The people who read the descriptions will understand that they’re reviewing an image.
Use the first words that come to mind. A good tactic is to pretend that you’re describing your webpage to a friend over the phone. What would you say about each image?
Be descriptive, but don’t write too much. People who use assistive technology will need to listen to the entire description — you don’t want to overload them with unnecessary information.

3. Empty, Redundant, and Broken Links

Links are important navigational markers for people who use screen readers and other assistive technology. There are two big issues to watch out for:

Empty links are hyperlinks with no link text (the text within the link that explains where the link leads). This is frustrating for users, since they aren’t able to understand what will happen when they activate the link.
Redundant hyperlinks occur when two links that point to the same URL appear next to each other. For example, if you add an icon that links to Facebook alongside the text, “Facebook,” which is also a hyperlink, you’ve created a redundant link.
Broken links, which point to pages that don’t exist.

These issues are WCAG violations, and they’re frequently cited in ADA lawsuits. They usually occur when people build websites with visual page builders (such as WordPress’s Gutenberg) and fail to consider how the website will appear to nonvisual readers.

Your development partner can help you audit your hyperlinks for potential problems. You can also manually check each page for issues — but if you have a tremendous amount of content (for example, an eCommerce website), this might be impractical.

4. Keyboard Navigation Issues

Many people with disabilities use a keyboard (with no mouse) to browse the internet. That’s also true for developers, by the way; some of our team members are simply much faster with a keyboard than they are with a mouse.

Every website must be fully navigable with a keyboard. That includes web apps (and mobile apps, for that matter). Unfortunately, many developers make fundamental mistakes:

Poor use of JavaScript and other technologies can create “keyboard traps,” interactive elements that prevent the user from regaining control of their machines without using a mouse.
Visual-first web design may create a keyboard focus order that isn’t logical. For example, as the user hits Tab to move down the page, the focus might jump to the side of the page, then the end of the page, then to somewhere in the middle.
Web apps may rely on mouse movements. For example, if a kanban app requires users to drag a tile to a “finished” column, that could create problems for keyboard users — unless that functionality could be accomplished with keyboard commands alone.

Keyboard navigation issues may be difficult to fix after-the-fact. The best approach is to think about keyboard users when creating your content — and test your website regularly to make sure that it’s usable.

ST. LOUIS WEB ACCESSIBILITY TESTING AND REMEDIATION

While we’ve listed a few common web accessibility issues, this certainly isn’t a complete list: WCAG contains dozens of requirements, and digital compliance requires dedication.

The good news: Digital accessibility is achievable, and it’s enormously beneficial for St. Louis businesses. Blue Stingray is committed to helping businesses adopt the best practices of WCAG when building inclusive websites, web apps, and mobile apps.

To learn about our inclusive design practices and accessibility testing services, schedule a demo or call 314.266.8097.