Web Content Accessibility Guideline 1.4

Accessibilibuddy Tips. WCAG 2.0 1.4

So far in my efforts to take the mystery out of web accessibility, I’ve tackled text alternatives and alternatives for time based media. This time I’m discussing the WCAG 2.0 1.4 guideline of making content distinguishable. What exactly do they mean by distinguishable?

Distinguishable: Make it easier for people to see and hear content including separating foreground from background.

We’re going to cover 5 of the most important ways you can help to pass this guideline and help millions of people use your site easier.

  1. Don’t use color as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

    An example of a failure here is marking required form fields with only a red outline. Or a quality table that indicates a pass/fail for criteria with only the use of red/green color. Links, since they indicate an actionable item should not only be a different color from surrounding text, but also be underlined or look different from the surrounding non-actionable text.

  2. If audio automatically plays on the page for more than 3 seconds, provide a way to pause, stop or control the audio volume independently from the overall system volume level.

    This is a very important rule to follow because a failure here will automatically fail your entire page even if other accessibility requirements are met. Playing audio with no way to turn it off interferes with the screen reader’s ability to distinguish what is happening on the page leaving them no option but to exit the page. It is best to let the user initiate the audio themselves.

  3. Text, including text in images, must have a contrast ratio of at least 4.5:1 between the text and background color.

    This ensures there is enough contrast for content to be read by people with color deficits or when viewed on a black and white screen. Sufficient color contrast between the text and background is the third most problematic issue reported by people with low vision. Color blindness affects 1 in 12 males and 1 in 200 females. With numbers this high, you’re bound to know a guy or two that sees the world this way. Also consider your responsive website when it’s viewed outside in the sun. Does the color contrast still hold up? Help people out by providing enough contrast so that they can comfortably read text.

    When contrast is too light, people may experience eye strain as they try to decipher the words. On the flip side, too much contrast like pure white on pure black can also be harmful. For many people with dyslexia, high contrast colors can make the words appear to swirl or blur together.

    Logos and incidental text are exempt from color contrast standards. An example of incidental text is buttons that are disabled because they cannot be used yet. Once buttons are enabled, they should pass contrast ratio.

    Can you tell which color combination passes contrast ratio?

    Contrast ratio samples

    It can be difficult to choose your branding colors and accent colors for web, but there are tools out there that can help. One of these tools is the Colour Contrast Check.

    With this tool you not only insert the colors to see if they are compliant, but it also refers you to the WCAG 2.0 contrast ratio formula which explains why you should be following these rules.

    So have you figured out the correct block above? It’s the one in the first column, third row. Below is the aforementioned contrast ratio checker showing how it passes.

    Screen shot from the Colour Contrast Checker

  4. Except for captions and images of text, text can be resized in the browser without assistive technology up to 200 percent without loss of content or functionality.

    Text that is not scalable is the 2nd most problematic accessibility barrier reported by visually impaired web surfers. Simply getting older, or not having your glasses or contacts in could be enough to make you want to increase the text size to be able to comfortably read the content.

    We use relative font sizes instead of pixels to allow all browsers including IE 9 and older to increase the font size.

  5. Use text instead of images of text as much as possible.

    Strive to have the only images with text in them be of logos. This ensures people that need to enlarge text can do so easily without loss of quality. It helps screen reader users hear the content. Plus it allows people to upload their own user-defined style sheets to override your site styles so they can read the content with contrast settings that are comfortable for them.

For more information on this guideline, look to the WCAG 2.0 documentation.

* Special thanks to Marni Bramstedt for her contributions to this article!

Plusone Twitter Facebook Email Stumbleupon Pinterest Linkedin Digg Delicious Reddit
This entry was posted in Admin Feed, Best Practices, Content, Design, Geo.com Homepage Panel, User Experience and tagged by Andrea Skeries. Bookmark the permalink.
Andrea Skeries

About Andrea Skeries

An all-around creative-type, Andrea brings her artistic vision and technical know-how to our design team as a senior web designer & developer. With a strong background in multimedia, she’s also our resident Flash expert and often adds video integration to client sites. Although it’s not in her job description, Andrea is well-known for her photography skills and can frequently be found capturing important company events. Somehow she finds the time to develop album covers for local bands and is even credited with making an app for the iPad.

One thought on “Web Content Accessibility Guideline 1.4

  1. One consideration with the fourth guideline is that, while WCAG 2.0 only requires that text can be zoomed up to 200 percent without loss of legibility, users with low vision often need to magnify to 300-400% for text to be legible. While they can resort to software magnifiers to do this, zooming your page to 200% then using a magnifier to go the rest of the way could mean having to move the magnification cursor back and forth a lot. A well-designed responsive web design shouldn’t have much problem with this, because as the type gets larger (much as when the screen gets smaller), you end up at a fully linearized layout, so things shouldn’t overflow one another.

    Low vision is a family of conditions in which the person is not blind but has severe limitations in sharpness, field of vision, contrast, light sensitivity, or some other aspect. It’s a class of disability that hasn’t necessarily been well represented by the accessibility standards bodies thus far, and just one example of why we say that the standards are merely baselines for accessibility.

    Kudos for working on this series. More awareness of accessibility is always a good thing.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.