Accessibility on the Web: When, Why and How.


This refers to a user’s ability to interact with your digital product. Now I’m not talking about one finding their way through a complex site (though that is accessibility related too), I’m talking about being able to read content, or even use a form. For the majority of users out there, anything you can see and read, so can they. However, the WHO indicates that “Between 110 million and 190 million adults have significant difficulties in functioning.” That’s up to 15% of the worlds population and growing: “Rates of disability are increasing due to population aging and increases in chronic health conditions, among other causes.” While we can’t necessarily accommodate every disabled person in the world, we can accommodate a large percentage of them.

We can accommodate for more disabilities then just vision impairments. But we’ll start with them and go from there.

But first, Why should we accommodate these standards???

We are legally required for any website that has a brick and mortar location.
Target faced litigation over this. Their eCommerce website did not meet ADA requirements back in 2005. 
 — —

The National Federation of the Blind (NFB), a non-profit organization representing blind people in the United States, based in Baltimore, Maryland, notified Target Corporation that its website,, was not accessible to blind and visually impaired users.

Key issues cited were:

  • a lack of alternative (alt) text on the site
  • online purchases could not be completed without the use of a mouse
  • image maps to show store locations were inaccessible
  • many headings important to navigating the site were missing

Target Corporation would not commit to any action to remedy this

January 2006
The NFB filed a lawsuit alleging that’s lack of accessibility violated:

  • the California Unruh Civil Rights Act (California Civil Code Section 51 et. seq.) requiring any business establishment of any kind to be accessible if doing business in California
  • the California Disabled Persons Act (California Civil Code Section 54 et. seq.) requiring any public place ‘and other places to which the public are invited’ to be accessible
  • the Americans with Disabilities Act (ADA) which prohibits discrimination against people with disabilities in “places of public accommodation”1

September 2006
A Federal Judge ruled that the lawsuit can proceed past Target Corporation’s motions to dismiss the case. The Judge found that California anti-discrimination law covers websites whether or not they are, or are connected to, a physical place, and that those aspects of’s services that are sufficiently integrated with those of physical Target Stores are covered by the ADA’s non-discrimination provisions.

August 2008
Target Corporation settled class action lawsuit with the NFB, paying damages of 6 million dollars.

So there are monetary reasons, and if we put out work that doesn’t meet the following guidelines, we could be held liable.

Text Size.
Must be a minimum of 13pt, with the exception of legal, which may be 9pt. In most cases though, 16pt text seems to work best for body copy. Please use this as a baseline for text size decision making.

Color Contrast. 
To reach WCAG 2.0 Level AA standards, foreground to background contrast must reach 4:5:1 for smaller text and 3:1 for headlines and other large text. There are more strict guidelines to reach WCAG Level AAA standards, the requirements get a bit more drastic and I don’t think we need to meet these unless the client has a specific need to. High contrast levels are actually known to make reading more difficult for individuals with dyslexia.

Accommodating the color blind.
Differentiating between choices must be done in ways other then just color change. Look at how this looks to a color blind person. (Show example) Did you know that Colour (color) blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. In Britain this means that there are approximately 2.7 million colour blind people (about 4.5% of the entire population), most of whom are male. (

Don’t rely on color alone to differentiate one thing from another.

— —

Provide visual focus indicators for keyboard focus.
:focus {outline: 0;}

This line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Or at least find the focused text box. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer’s have been updated to remove un-styling of the :focus pseudo-class. The intent of this line of code involved expecting the designers to come up with their own styles for this.

Don’t make people hover to find things.
This principle mainly serves people with motor-related disabilities. This includes keyboard-only users who have vision, and those who use speech recognition tools like Dragon NaturallySpeaking to interact with web pages. Keyboard users and assistive technologies like Dragon rely on actionable items being visible on the screen. If a link or button cannot be seen by Dragon, it cannot be verbally “clicked”. If a keyboard-only user cannot see that a button exists on a page, how can we expect them to navigate to the empty space where it will ultimately appear?

“Primary things should be visible, secondary (non-vital) things can be shown on hover.”

Many of these things can weigh down an interface and make it harder to look “sexy.” But we are not here to just create things that are attractive. We are here to solve Business needs.

Show your support

Clapping shows how much you appreciated Nate Hull’s story.