Accessibility

As part of the W3C's Web Accessibility Initiative, they released a series of Web Accessibility Guidelines. In this module we are going to take a closer look at the Web Content Accessibility Guidelines. These guidelines are dedicated to making the Web more accessible for people with disabilities, but they also improve the lot of all user agents, including under powered mobile phones. The first version of the guidelines was released in 1999. We are currently in version 2.0. It is referred to as WCAG 2.0.

The guidelines address the following kinds of disabilities:

Visual: impairments including blindness, low vision and color blindness

Motor/Mobility: difficulty using one's hands due to tremors; loss of fine motor coordination due to diseases like Parkinson's disease, muscular dystrophy, cerebral palsy, and stroke

Auditory: deafness and other hearing impairments

Seizures: photo-epileptic seizures due to visual strobing or flashing effects (Remember the notorious blink tag? Not a good idea.) Cognitive/Intellectual: developmental, learning, and cognitive disabilities Accessibility helps with assistive technologies that people with disabilities might be using. When we talk about "assistive technology," we are referring to technologies like:

screen readers
Braille terminals and keyboards
screen magnification
speech recognition
keyboard overlays


You may be wondering why you should go to the expense and trouble of learning and following the guidelines. There is both a moral and business case to be made for following the guidelines. First we'll discuss the moral case for coding accessible websites:

It's the law. The United States, Canada, and other countries now have legal mandates advocating for accessibility. In the U.S., we have Section 508 of the U.S. Rehabilitation Act. Section 508 establishes standards that websites of federal agencies should incorporate. If your organization takes federal money you will be expected to follow the guidelines. It is likely that these policies will only grow in the future, so you might as well be a good citizen and get started now.
Accessible sites encourage independent living and improve people's lives. An accessible website grants access to information and also increases independence and dignity.
Accessible websites permit learning, shopping, working, and communicating with friends and family. They encourage and enable greater participation in the larger community. For some, the Web is their lifeline to the outer world. When you take the time and care to make your site accessible, you improve the life of a disabled person. There are a lot of people with disabilities in this world. We are all mortal and will experience greater and lesser mobility at different times in our lives.
Inclusion spurs innovation. Creating accessible websites force the designer to be more inventive. It encourages empathy. Adhering to accessible design guidelines will make you a better designer.

Quite simply, accessible web design makes the world a better place. It forces us to acknowledge the dignity and value that each of us brings to our society.
Here's the business case for accessible design:


An accessible site is one that is available to more visitors. More visitors mean bigger markets and more customers.
Accessible websites are built according to web standards. They are faster to develop. They save time and money by reducing site development and maintenance costs.
Developing an accessible website using web standards makes the site more likely to work across browsers, platforms and devices.
Accessible websites have faster performance. They download and function more quickly.
Improving accessibility means improving usability for everyone.
An accessible website is search engine-friendly. You will get a boost in your search engine ratings.
You also get good publicity and good karma.


The Hidden Nuggets of WCAG2: The Wonderful World of ALT Attributes, Part I Time-Based Media

Time-based media gets a bit more complex. You need to consider presenting both audio and video content in multiple forms. Captions should be provided for video -- preferably closed captioning that is synced to the presentations. You may also need an audio description of the action in the video.

For audio you might consider providing a sign language option as well as captioning. The key here is to consider alternative ways of presenting the same content.

Adaptable

The concept of adaptable means paying attention to:

Info and Relationships: The structure of your documents should support creating meaningful associations and distinctions within the content. The presentation of your content should be supported by thoughtful structuring of your code. Again this goes back to our theme of human/machine collaboration. Meaningful Sequence: The sequence that your content is presented in should be meaningful. It should support the message you want to convey. The structure of the documents themselves should support and be expressive of the meaning.

Sensory Characteristics: This directive is a hard one for most designers to hear. When designing the controls for a page's functionality, be sure that any instructions, navigation/control buttons and so on are presented in such a way that their meaning and usage is clear without relying on the look and feel. If your page controls depend solely on size, color, shape, position or sound, then think again. Designers hate to hear this but it pays to be explicit. A picture may be worth a thousand words, but sometimes a decent label makes an icon much clearer.

Distinguishable

The distinguishable guidelines are interesting for designers. "Distinguishable" refers to the practice of creating pages that help the user separate precious content from background clutter. It separates foreground from background. This is true for audio as well. You need to help the user separate sound from noise. Let's break it down:

Use of Color: The use of color on the Web is more than creating pleasing combinations of tones. The palette directly influences the functionality of a page. If your body copy is dusty gray and you make your link color dusty violet, who will ever be able to see your links in order to click on them? You might want to consider going old-school and including an underline in your link styles. Also, what if your users are color blind? Upwards of 8 percent of men and 0.5 percent of women are born color blind. This is definitely an aspect you'll want to consider.

Audio Controls: It used to be fairly common to embed music in a web page that would automatically play on load. Thankfull, this practice has fallen out of favor. If you do find yourself in a position where you are embedding music or any audio on a page that plays automatically, be sure to include controls so the user can pause, play and adjust the volume. Think of it as common courtesy.

Contrast (Minimum): The guidelines suggest a minimum contrast of 4.5 to 1 for all text and images of text, except for oversized text, incidental text that is there strictly for decoration and logo types.

Resize Text: As you code your pages, be careful not to disable the users' ability to resize and zoom text in their browsers. This is a place where you need to say the Serenity Prayer and rely on your skills as a designer to use proportion and relationships well. Let the user customize their reading environment and they will reward you with loyalty. Images of Text: Using images of text to replace "live" text is an important weapon in any web designer's arsenal. There are times when you need a particular font that everyone must see in exactly the same way. CSS3 supports the use of embedded fonts, but you may not always want to go to the expense of licensing a font or forcing your users' browsers to download it. Using an image is a good alternative, but be careful how you use images of text. Make sure the text is readable. For instance, six-point lemon yellow text on cream is not a good choice.

Visual Presentation: When designing your body copy, pay attention to the basics of legibility.
Make sure there is enough contrast between the font color and the background color. You don't want so much that it tires the eyes, but you want enough that you create a comfortable reading environment.
Control the line length: don't let your columns sprawl wider than 80 characters in length.
Align your text, preferably to the left margin. Avoid justified text if possible. It looks nasty on the Web and is hard to read.
Be generous in your leading. Line-heights between 135 and 150 percent look good and facilitate reading. Be sure that there is at least a character and a half height margin between paragraphs.

Background Images: When using background images and colors, be sure that the user can easily separate background from foreground.
There are many more guidelines like these, but this list should get you started.

The Understanding WCAG 2.0 website says:
"Operable - User interface components and navigation must be operable."
The Operable guideline covers a lot of issues that you'll find familiar from your usability studies. The point of the Operable guideline is threefold: to ensure that your navigation is comprehensible; to allow your sites to be used by people that must navigate by keyboard; and to make certain that your sites don't cause seizures.

Keyboard Accessible
It is a courtesy to your users that rely on keyboards to make sure your entire page is navigable and operable with this tool. Setting the tab order for navigation and form elements makes your pages much easier to use. When you write your style sheets, be sure to include the focus pseudo class when you define the hover state. That way, users on keyboards will get the same visual cues as those using mice. This will also improve the experience for people using touch screens! It's easy to do:

a { color: #d00; }
a:hover, a:focus { color: #f00; }

Adequate Time
Users need time to react. If you have time-dependent content that appears and then goes away, you need to give your users enough time to digest what they are seeing or hearing and then react to it. Examples of this might include:
Step-by-step presentations in a slideshow format such as a PowerPoint presentation
Slideshows of images that automatically refresh
Pop-up information boxes that appear and then fade from view
Content that auto-scrolls like ticker tapes or news feeds
Information that auto-updates such as stock quotes or online auctions
Be generous with your users. Add controls for stopping, pausing, hiding, showing, starting and rewinding. Always be sure to add enough feedback for your users so that they know where they are in the sequence -- Slide 4 of 10, for instance.

Seizures
Back in 1994 Netscape introduced the infamous blink tag. Lou Montulli, who is credited with the idea, says that it was originally discussed as a joke in a bar after work hours. For better or worse it was insanely popular, though it never got wide browser support. It had serious usability problems. In 1996, Jakob Nielsen called it "simply evil."
There is no doubt about it: blinking and strobing effects are problematic in that they can cause seizures. You are strongly discouraged from using any element that flashes more than three times per second.
Navigability
This is a big topic. You could write an entire course about designing navigable pages; in fact, many have done just that. Here we are going to provide a brief discussion of navigability from the perspective of accessibility. Keep in mind that this discussion doesn't even begin to scratch the surface!
Good navigation answers the following four questions:
Where am I?
Where can I go?
How will I get there?
How will I get back?
There's a lot in these simple questions. The goal is to help users find the content they want and keep them oriented while they do it. There are simple best practices that go a long way to solving this problem. As an extra bonus, they also greatly improve pages' search engine performance!
Every page in your site should have a unique, descriptive and keyword-rich title tag.
Make sure all your page headers, subheaders and labels are descriptive. Every page should display a unique, keyword-rich header in either an h1 or h2 tag. This will let the user know where they are. It helps to orient the user.
Set the tab order so that your page can be navigated sequentially. As we mentioned before, include a visual focus style to cue the user.
Redundancy on the Web is a good thing. Provide more than one way for the user to find pages. Be certain the users always know which page they are on in relationship to all the other available pages. Let them know where they are in your site.
The purpose of your link should be clear. Name your links and buttons for where they go or what they do. Showing a picture of a cuttlefish and including a link that says "Read more..." is not so good. Pairing a picture of a cuttlefish with a link that reads "Parakeets Rejoice in Cuttlefish Population Explosion" is much more expressive. (Not long ago, we saw a spectacularly bad example on a site you are familiar with that shall remain nameless. There was actually a link that said "Click here to go there." Wow.)