How to Find & Fix Common Website Accessibility Issues

It’s the 2020s, so we shouldn’t any longer have to make the case for accessibility. An accessible site means you reach more people, the people you reach (even abled ones) all have an easier time using your site, and you won’t get sued. And with the tools and resources available to developers and designers, it’s now easier than ever to make sure you have an accessible site.

At Polypane, accessibility is one of the three core areas we focus on, the other two being performance and responsive design. If you’re not familiar with Polypane, it’s a web browser specifically for web developers. It has all sorts of tools you won’t find in regular browsers — tools that make you more effective and efficient. To learn more about Polypane, check out the introduction article.

In this article, we’ll focus on a few common accessibility issues and find ways to audit and fix them in your site to make sure it’s as accessible as possible. Here’s what we’ll look at:

• Does my text have enough contrast, and where it doesn’t, how do I fix that?
• How does my site look for people with visual impairments like color blindness or farsightedness? What about situational impairments like bright sunlight or a device with night mode?
• Does my page structure make sense for people that depend on it?
• How do I make sure I don’t have any code quality issues in my site, and are the things I did to improve accessibility actually helping?
• Does my site work well on smaller screens?
• How do I make sure my site works well for users that prefer dark colors or don’t deal well with motion?

Contrast

Does my text have enough contrast, and where it doesn’t, how do I fix that?

Ideally, text contrast is dealt with during the design, with tools like Stark making it easy to test individual text and background pairs. But unfortunately, this isn’t always the case. While there are plenty of places online to check a given text color and a given background (we even built our own online color contrast tester), your web pages likely have many different colors and backgrounds, and for any reasonably complex site, you might not know all combinations beforehand.

And that makes it really easy to overlook that one grey text that’s normally shown on a white background, but has this one place where it’s on light gray, or a dark text color with opacity that only works for certain backgrounds.

In Polypane, nearly all interactions with an element will do a quick contrast check for that specific element. Our algorithm determines the real text and background colors, taking into account the color, opacity and all background colors. We then merge that into the actual perceived text and background color and compare that.

We’ll show the result in an element tooltip and in the elements panel alongside other information like font family and font size. That way, your text contrast is always glanceable.

That still relies on chance, though, so Polypane also has a color contrast overlay. This will go through your entire page and find all unique text and background combinations, check all of them and add labels to each element. All passing contrast pairs get a single label with the contrast, and any failing contrast gets a warning label for each instance, so you don’t overlook any.

We made it really easy to find contrast issues. But how do you fix them?

If you’re lucky, you can use another color from your design system, but if you don’t have one, or if this is a one-off color pair, you have to go back to your designer or use an online contrast tester and find another color yourself — a tedious and time-consuming process, and something I wanted to do something about.

For every failing contrast pair, Polypane calculates a text color that has enough contrast with the background, and suggests that to you for easy copying. You can even preview it just by hovering over it. (The online contrast checker we mentioned also suggests improved colors for you.)

Visual and Situational Impairments

How does my site look for people with visual impairments like color blindness or farsightedness? What about situational impairments like bright sunlight or a device with night mode?

Not everyone that visits your site is going to have perfect vision. In fact, a large number of your visitors will definitely have some form of visual impairment. And while you can make sure to follow guidelines around minimum text size and not communicate anything just through use of colors, it can be easy to overlook an issue. The best way to get empathy is to try to simulate how other people experience your site.

Color blindness

Between 8 and 10% of men worldwide are color blind (women much less so, at 0.5%), and they fall in three different groups: red-green color blindness, blue-yellow color blindness, and full color blindness. Polypane lets you simulate all of these with our accessibility overlays.

You should test with these simulators to make sure that you don’t rely on just color to bring across messages. For example, if you just make the border of an input field red when you make an error, you’ll find that’s barely noticeable, or unnoticeable with any of these simulators turned on. Rather, you should provide a second, non-color indicator like an error message to communicate the issue to your user.

Red-green color blindness is the most common and the vast majority of people with color blindness have this. In Polypane, we offer four different simulators: Deuteranopia, Deuteranomaly, Protanopia and Protanomaly. The -anomaly variants here are the less severe version, while the -opia variants would be classified as “full” red-green color blindness.

As the name implies, people with this type of color blindness have difficulty seeing the difference between red and green, but also brown and orange and certain shades of blue and purple. You can see how, for example, the common “green is good, red is bad” coloring of elements can become an issue.

Blue-yellow color blindness is much more rare, at just 0.0002% of men worldwide. The technical name for it is “tritanopia”, and tritanomaly is the less severe version. This type of color blindness makes people less sensitive to blue light, making the blue part of anything grey.

Lastly, full colorblindness is the most rare at 0.00003% of men worldwide. Its proper name is “Achromatopsia”, with “achromatomaly” being the less severe version where people see some color, but it’s severely dulled.

It’s worth noting that the simulators in Polypane (and any simulator really) are approximations. Especially the less severe variants come in a range from nearly unnoticeable to close to the full thing, and so the simulator chooses a middle ground there.

Continue reading How to Find & Fix Common Website Accessibility Issues on SitePoint.

by Kilian Valkhof via SitePoint