Jeffery is vision impaired – he has what is commonly called color blindness. Even so, he is now on your website trying to find the information you would love for him to see. But he can’t, or at least it’s extremely difficult for him because the color of the type on your website is almost invisible to him.

According to the U.S. government (the CDC), 26% of adults in the United States have some type of disability. Thankfully, there is technology available today that enables many of those individuals to access information on websites, e.g., screen readers, special monitors, input devices, etc. The problem is these technologies only work well when websites are designed and built correctly. Most websites are not and the result is frustration and anger from visitors who have disabilities.

How do we know how to design and build websites that are accessible to people with disabilities? The primary set of policies for web developers is contained in the Web Content Accessibility Guidelines document, usually referred to as WCAG. We are currently on WCAG 2.1, with 2.2 due out in 2021.  Within WCAG, there are three criterion levels: A, AA, and AAA. Criterion level A is considered a weak attempt – barely trying; while AAA is a bit extreme, used mostly for sites dedicated to the disability community. Almost all websites attempting to be accessible use the AA guidelines as their design directive.

The WCAG 2.1 AA guidelines cover a lot of territory, but here are just a few examples of what knowledgeable developers consider when designing an accessible website:

Text Color: There are minimum contrast levels established for text; that is the contrast between the text and the background the text is on. The contrast levels are also adjusted depending on the size of the text. The web developer has special tools available that will indicate the contrast level of color combinations and whether it passes or fails for A, AA, and AAA for a particular text size. A developer that builds accessible websites will only use text color combinations that pass AA compliance.

Alt Text: Images present a particular problem for many people with vision impairments. If you have trouble seeing an image, you’ll have difficulty figuring out what it’s trying to communicate. There are two broad categories of images on websites: images that contribute information to the content, and images that are there to add to the look and feel of the website (commonly referred to as “eye candy”). When an image contributes information, that information can be communicated to screen readers through an attribute call “Alt” text. This is particularly important when an image actually contains text. For images that are there as eye candy, we still set the alt text attribute, but we let the screen reader know the image is eye candy with a command (alt=“”). You will find many websites that are not designed for accessibility will ignore alt text and not set it at all. This is frustrating to the vision impaired visitor because there’s no way for them to know if the image is important or not.

Heading Hierarchy: The website developer uses tags to indicate different types of elements on the web page. Headings are indicated with an “h” tag. You can have up to six different levels of headings and each heading level can have a different style (font, size, color, weight, etc.). These different heading levels and their styles are indicated using a number after the “h” within the tag – for example

,

,

, etc. What many website designers don’t realize is that these heading tags also indicate a hierarchy to screen readers used by vision impaired individuals. A WCAG compliant page will have only one

heading per page and it indicates the general subject matter of that page. After the page heading,

headings will indicate major topic divisions with

headings being sub-topics, etc. If the web designer is looking at “h” tags as simply applying different styles, the hierarchy will usually be scrambled, and the vision impaired visitor will be very disappointed and probably unable to quickly find the information they are seeking.

 

In this article, I’ve touched primarily on WCAG compliance affecting vision, but there are many more guidelines that cover almost any disability a visitor might have. At Drake Web Development, we are certified in Accessibility compliant website design and incorporate it into each website we develop. We believe when you develop websites that give access to individuals with disabilities, you actually improve that website for everyone who visits it.

 

Imagine being able to increase engagement on your website from 26% of your visitors and knowing that your website is inclusive. If your website is not WCAG compliant, or you don’t know if it is, schedule a free consultation with Drake Web Development and we’ll be happy to talk with you about ways you can improve your website’s accessibility.