Search

User login

Chapter 6: Accessible Web Design

What is Accessible Web Design?

Giving meaningful names to Links

Labeling Graphics, Buttons and Form Fields

Choosing Contrasting Colors

What is Accessible Web Design?

Web pages vary not only in content, however, but also in design methods. Because of the vast number of web pages that exist and because of the fact that they have been designed in different countries, cultures and environments, it is difficult to impose a standard web design, just as it would be near impossible to impose a single architectural style across the world and abolish all others. What is possible is the creation of certain standards that would ensure that the websites are accessible with assistive technology, just as it is possible, or necessary, to follow certain rules in construction of houses, regardless of their architectural style, to ensure their safety. This chapter will not explain how to design web pages in general, but will focus on the concepts that one needs to keep in mind when designing a web site accessible for people with assistive technology.

Screen readers provide many features that allow a screen reader user to navigate most of the web pages quickly and efficiently. Screen readers, however, do not have any build-in intelligence to describe graphics to blind users or to add meaningful descriptions to links, in case they are not clear to users. This kind of descriptions has to be provided by a web page designer. If properly used, they will be picked up by the assistive technology and read to the screen reader users, or displayed on the Braille display.

A set of standards has already been developed, to help sighted web site designers develop web pages that are accessible for users of assistive technology. Various countries have adapted standards of an accessible web design. The U.S., for instance, has introduced a set of web (as well as software development and documentation) standards under the name of “Section 508.” The World Wide Web Consortium, consisting of the U.S. and most European countries have developed W3C standards, and the European Union has been working on their own standards. Despite the differences between these standards, their common goal is to make the web site design more uniform, and more accessible to the assistive technology. The most important standards to follow will be described in the two sections below.

Giving meaningful names to Links

Screen readers introduced various navigation methods on the Internet, in order to make the navigation faster. These methods are specifically designed for screen reader users, but in order for them to work, a proper design has to be followed. One of the most common issues, and a very easy one to take into consideration with designing web pages, is that of naming links.

On many web sites, it is common to see a text such as this: “Click here for more information about our services,” where the words “click here” are made into a link. It looks obvious to a sighted person, or to a screen reader user who is reading the entire contents of the page, and therefore is able, just like the sighted users, to figure out what to associate the text with. Reading the entire web page, however, may prove extremely long and cumbersome for the assistive technology users. While sighted people are able to easily skip over any information that they do not wish to read and get directly to the place on the web page which interests them, screen reader users would have to read the contents of the entire web page, hadn’t the screen readers been equipped with many navigation features.

One of the common screen reader features that enables a fast navigation on web sites is one which displays a list of links. When screen reader users press of certain shortcut key, a list of links on the currently viewed web page is displayed. The users can then go through the list of links, rather than go through the content of the entire page to find them. This is a very efficient way of getting to a link, provided that the link is clear to the users without having to read the context of the link.

When users bring up a list of links and one or more links say “click here,” the users can have difficulty figuring out where exactly “clicking here” will bring them. A better name for links, in this particular case, would be “click here for more information about our services” or simply “more information about our services.”

Labeling Graphics, Buttons and Form Fields

Graphics are any images that are posted on a web site. As mentioned earlier, screen readers cannot describe them to screen reader users, unless a description of a graphic is provided. When no description is provided, screen reader users will hear “graphic” or yet worse, “graphic” and the filename of the image. Once a description is provided, in the form of an alternative text, screen readers read the description to the screen reader users.

The same principle applies to buttons, which are used quite often on the Internet web sites. Typically, this is how a button looks like: [a screenshot of a button]. When they have no descriptions, called “labels” attached, screen readers recognize them as bottoms, but they cannot guess their purpose. They will, therefore, read them as “button.” Providing a meaningful label to the button helps screen reader users to differentiate between various buttons. It will read any labels that are provided, i.e. “OK button,” Cancel Button,” etc.

Finally, the same principle applies to form fields. Form fields are places where web site users are expected to choose from or write some kind of information. They may, for instance, be expected to choose an option from a variety of options. They may also be asked to fill out a form, i.e. to provide their personal information. If form fields are not properly labeled, screen readers will recognize the fields themselves, and will announce to the screen reader users something like “edit box” or a “list box,” but will not be able to guess what it pertains to, unless these items are labeled. Then, in edition to saying “edit box,” the screen reader will say “last name,” or “first name," etc.

It is important to keep in mind that labeling graphics, buttons, and form fields does not influence their appearance. All the labeled objects look exactly the same as they did before being labeled. The only noticeable difference is that when sighted users put their mouse pointer over the labeled graphics, they are able to see their descriptions. Buttons and form fields usually do not show the descriptions when a mouse pointer is placed over them.

Choosing Contrasting Colors

Enlargement software users will be able to see the information that the sighted people see, with the exception that it will be enlarged to a varying degree. What is most important, and specific to users who are low vision is their reliance on contrasting colors on the Internet web sites. While for sighted people it is possible to read light pink letters on a dark pink background, this may prove an impossibility for low vision users. It is, therefore, important to remember to choose colors that are contrasting, rather than those that blend into one another, when designing a web site.

Chapter 1: Introduction to Assistive Technology

Chapter 2: Various Assistive Technologies

Chapter 3: Basic Principles and Ergonomics

Chapter 4: Teaching People Who are Blind or Low Vision

Chapter 5: How do Blind/Vision Impaired Users Benefit from the internet

Chapter 7: Overbrook Resources

Get Social with enableall