Color Blindness Issues and Problems:

Colorblindness is usually a genetic condition, but it can also be caused by injury, disease, or the aging process. As people age, their corneas typically turn yellowish, making it difficult to see violet and blue colors.

Approximately 5% to 8% of the men and 0.5% of the women of the world are born colorblind. That’s as high as one out of twelve men and one out of two hundred women. People who are protans (red weak) and deutans (green weak) comprise 99% of this group. — WebExhibits.org.

Some color combinations do not have sufficient contrast to be visible to colorblind users. Also, instructions given by describing elements in terms of colors will not be understood by colorblind users. The subject page uses green and red on the navigation buttons. I ran the pages through a color-blindness simulator found at Vischeck.com and simulated portions of the page using the Deuteranope (a form of red/green color deficit) simulator.

As you can see in the simulation screen shot below, the navigation buttons are not legible to persons with blue-green deficiency.

Solutions

The navigation areas need to be changed to color combinations that use high contrast. You have lots of choices, so let’s pick black on light blue.

The map is already legible to colorblind users. The only problem that could occur with this map would be if you included a statement that read, “Click on the green states for exciting news! Other things to avoid are using color to give directions to your user, for example, “Click on the green button to submit the form.” To avoid confusion, be more specific, such as, “Click on the oval, green button on the left to submit the form.” Better yet, label the buttons and don’t even mention the colors. If you are making maps, try to select colors that can be distinguished by colorblind users, or use a combination of colors and patterns to mark important features on your map.

Forms

Issues and Problems:

A screen reader will read the form’s label whenever it is encountered, which should be just before the input field is encountered. The labels for the input boxes on our subject page should appear ahead of the box, not after. This will make much more sense to someone using a screen reader.

Solutions:

I will change the position of the labels to be ahead of their associated input boxes.

Issues and Problems

If you have ever designed a form, you know that it is very difficult to align your input boxes without using a table. A blind user’s screen reader may not read an input field’s label just before the input field – it all depends upon the layout of your table. Imagine if the table were complicated, containing ten labels and input boxes. If the table were set up so that all of the labels were read from top to bottom in the left column, then the screen reader began reading the input boxes, by the time the screen reader started hitting the input boxes the user would be unable to remember what is supposed to go in the first input field. The form lacks LABEL and ID attributes to further clarify the relationship between the input boxes and the labels.

Solutions:

To make the association between input boxes and their labels clear to screen readers and other assistive technology, I’ll add the ID and LABEL attributes to the form tags. In the “After” example, I have shown the needed tags in bold:

Before:
<INPUT TYPE=”TEXT” NAME=”CustomerName” SIZE=”15″><BR>
Your Name
<INPUT TYPE=”TEXT” SIZE=”15″ NAME=”CustomerEmail”><BR>
Your E-Mail

After:
<LABEL FOR=”NAME”>Your Name</LABEL>
<INPUT TYPE=”TEXT” NAME=”CustomerName” SIZE=”15″ ID=”NAME”><BR>
<LABEL FOR=”EMAIL”>Your E-Mail</LABEL>
<INPUT TYPE=”TEXT” SIZE=”15″ NAME=”CustomerEmail” ID=”EMAIL”><BR>

A LABEL tag allows the browser to tell the user definitively which label applies to the given control. Usually, clicking on the label positions the cursor in the form field, or toggles the value of radio buttons or check boxes. This is intuitive for many users and provides a larger target for the mouse. Try it for yourself by clicking on the form labels on the subject page.

If you use radio buttons or other groupings on your forms, there are other tags that you should learn (FIELDSET and LEGEND) but this topic is too complex for this article. There is a difference in opinion about entering default values in the input boxes, such as “Your e-mail.” Although this practice is recommended by some standards, the Section 508 requirements state “Don’t configure the fields with default text entry, since an Assistive Technology user expects to encounter blank space for a field so he can enter his own information.”

Use of a Mouse

Issues and Problems:

Some users cannot operate a mouse. Imagine a person whose hands are permanently cramped/curled. I went to school with a man who did his programming by strapping a stick to his wrist and index finger. The stick had a sponge ball on the end of it and he would slowly type by pressing the keys with the sponge. Obviously, this man could not use a mouse. Some Web pages contain navigation areas that require the use of a mouse, for example when a navigation button is “moused over” and a new menu appears. If this menu cannot be obtained in any other way, your site is not accessible to users who don’t have good hand control.

The subject page does not include “mouseover menus” but it does have an image map that leads users to other pages. If you use your Tab key you will see that it is possible to tab your way through the states included on the map and you can use the Enter key to “Click” on the links. Even so, it is a good idea to provide alternate methods of reaching these other pages. Not only is this easier for persons with disabilities, it allows search engines to find those pages. Image maps can also present problems for vision-impaired users. Some newer browsers allow the creation of alternative text for each hot-spot in the image map. Until all browsers support this, however, it remains important to have redundant text links on the page as well.

Solutions

I’ll add a simple navigation bar above the map to allow users to click on the state.

Other Issues

Have you ever used a pair of BLOCKQUOTE tags as an easy way to create margins? Do you use header tags, but start with H4 because H1 is too big? Do you use tables to create indentation when an unordered list would do the job? Try your best to use the tags for their intended purposes. Use the H1, H2, H3, etc. tags in their intended order to logically define sections of your page (if H1 is too big, use your external style sheet to make it smaller). Use BLOCKQUOTE only for actual quotes. Use definition and other list tags to create indentation where appropriate.

Consider using STRONG instead of B (bold) and EM instead of I (italics) because some screen readers can communicate these subtleties to the user. Use the TITLE attribute with your HR (horizontal rule) tags. Include the LANG attribute in your HTML tag, and include a DOCTYPE tag. All of these things help screen readers and other assistive technology to properly interpret your site.

Be careful with animation. Images that flash or flicker can trigger seizures. Also, persons who experience dizziness and nausea can be adversely impacted by certain types of animation. Personally, I find all animation nauseating, but I digress

Avoid the use of absolute sizes whenever possible. If you wish to specify a size, try to use WIDTH=”80%” instead of WIDTH=”600″ because this will work better with custom style sheets.

Summary

Let’s take one last look at our original page and our finished product. As you can see, in spite of the changes, the site is just as “good” as it was before, but now it is far more accessible.

In my opinion, it’s all about habits. As a Webmaster, I have changed my habits so that coding for accessibility is a built-in part of my business. It took some time to learn, but it has made me a better Webmaster and my sites are faster, more effective, and rank higher in the search engines than they did before. Will you find sites in my portfolio that don’t use all of these techniques? Sure. I learn something new every day, and try to make each new site better than the last.

Do accessible sites have to be boring? When you consider the primitive nature of the HTML language itself and the amazing things that a creative Webmaster can do with it, you realize that there is also a way to incorporate these standards without sacrificing a beautiful design. If you employ these techniques discussed in this article, it won’t guarantee that your site is completely accessible, but you will be much closer to that goal.

For more information, check out these sites:

• Section 508
  This site is full of information about Section 508 of the Rehabilitation Act. Sign up for 508 Universe and take the online tutorial, which includes simulated screen readers that allow you to experience accessibility problems first-hand.
• The Access Board
  The Access Board is an independent Federal agency devoted to accessibility for people with disabilities.
• Federal IT Accessibility Initiative
  Section 508 was established to prohibit barriers in information technology and present new opportunities and promises for people with disabilities. This law impacts upon electronic and information technology purchased by the federal government.
• CAST Bobby
  Bobby is a free service provided by the Center for Applied Special Technology to help Web page authors identify and repair significant barriers to access by individuals with disabilities.
• The W3C’s Web Accessibility Initiative
  The World Wide Web Consortium, or the W3C for short, is the international body of industry-leading corporations, individuals, and organizations who set the standards by which the World Wide Web operates. One of the W3C’s major areas of interest is the Web Accessibility Initiative (WAI, pronounced “way”). The WAI team and volunteers develop resources that increase the accessibility of the web, including guidelines for web page content, browsers and other user agents, and authoring tools.

Sue Bolander started Webworks7 in 2000, with a focus on creating Web sites for small business and government and making Section 508 compliance a standard feature of her designs. She is a Certified Master HTML Programmer and is also certified in Web Design for Accessibility. Webworks7 provides site design, redesign, JavaScript programming, and training in client-side Web environments.