a11y in Real Life: Color Designation and Video Games

Think back to the original Super Mario Bros. When you hit one of the bricks that contained a coin, what happened? The brick texture changed. What about the bricks that had multiple coins? The texture didn’t change until it was empty. This is how you knew to keep jumping. What about your websites? Are you using texture or color designation to signal change? Don’t.

The temptation makes sense. You want to use familiar visual mechanics because for the average sighted person, that’s what they are used to seeing. But what if you can’t see, or at least see on the average person’s spectrum? Suddenly those visual cues are a problem.

GuidelineĀ 1.4.1, Use of Color, fromĀ the WCAG 2.0 guidelines is clear on the matter: “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” This means you need alternatives.

The Coin Sound – Alternatives to Color Designation

Think back to our Mario example. When you hit the coin block, you hear a familiar “bling” sound. You also see a coin appear. These multiple designations are accessibility features. They tell the players that don’t notice or can’t notice the visual change in the block that something has happened. But how do you add that to your websites?

For non-sighted users, the applications will vary. Sometimes you’ll use ARIA. A great example of this is menu buttons. When a non-sighted user activates a menu button (think hamburger menu), what happens? How do they know anything has changed? If you’re using “aria-expanded”, their screen reader will tell them.

In other situations, simple semantic HTML is enough. They’ll know to expect a change, for example, when <a> is used. This is why using semantic HTML is so important. It doesn’t just make your documents semantic, but improves their accessibility.

Underlines and Other Alternatives

Something you’ll notice often is how sites remove the underline from links in favor of changing the color. This is a big problem, and a direct violation of Section 508 compliance as it violates Guideline 1.4.1. If you must remove the underline for design purposes, make sure you take extra steps to make your links stand out. Using this site as an example, you’ll notice our links sometimes look like buttons. This is keeps the interactive clue for visually impaired users, and is actually more accessible than a standard link because of how it improves the user experience on mobile. Clicking on our links doesn’t require a pinch or zoom because the buttons are big enough.

When building your sites, you need to think beyond color. If they could figure it for Mario in 1985, you certainly can in 2017.

Need help making your site more accessible? Contact us today!