Advanced Techniques for Universal Accessibility
Advanced Techniques for Universal Accessibility
- Use Backgrounds and Animations Wisely
- Add Color with Care
- Make Tables Make Sense
- Include NoFrames with Frames
- Remember the Alt Attribute in Image Maps
- Take Navigation Seriously Around Your Site
Use Backgrounds and Animations Wisely
Busy wallpaper, the dreaded blink, and decorative animations can be distracting to any reader. Imagine using a text magnifier while looking at a Web page such as this awful sample page! This page demonstrates some very obvious problems but occasionally designers use backgrounds that are less obviously troublesome, but nevertheless do present problems for people with low visions and make pages less readable in general. Here is an example of a page with a more subtle background problem.
Please use simple pastel or neutral colored backgrounds and wallpaper with a subtle texture or design. If you must use an animation, choose one that is not jumpy or will visually call attention away from your important message. Notice the difference with this improved sample page.
For accessible Web pages, choose background colors and wallpapers and animations that are easy on the eyes, and that add to the content of your page. Avoid using animations that flash. This flashing could trigger seizures in some people with seizure disorders.
Add Color with Care
Color Sensitivity
Using wild color combinations, like hot pink and green, or turquoise and black distracts from your important message. Please avoid wild combinationsfor background and text colors.
Also remember that 5 to 10% of men have some form of color blindness. This can cause difficulties distinguishing between red and green, or between yellow and blue. In rare cases, there is an inability to perceive any colors at all.
Avoid background/text color combinations that would make the text hard to read for people with color blindness, or other visual impairments or sensitivities.
To make your Web page accessible, use white, muted or soft pastel colors or a light colored, barely textured wallpaper for your background. A dark colored text, such as black, navy, dark brown or a similar color, will make your text clearly readable without annoying distraction.
Hexadecimal Color Codes
Codes like “#FF9999″ represent colors as Hexadecimal Code for red, green and blue. The first two characters following the # give the number for red, the next two for green and the last two for blue. These “RGB” or Red Green Blue values are always related to the range of 0 to 255 decimal. The Hexidecimal Code is
written with numbers and letters.
Browser-safe colors are constructed from Hexadecimal Codes where red, green and blue are restricted to the decimal values:
| 00 | 00 |
| 51 | 33 |
| 102 | 66 |
| 153 | 99 |
| 204 | CC |
| 255 | FF |
The color red would be coded “#FF0000″ and blue would be “#0000FF”.
Color swatches, with the Hexidecimal Coding for the browser-safe palette are available free from www.visibone.com. At this Web site, you can click on a color and this online color lab will display the browser-safe Hexadecimal Code for it. You can also test combinations of various browser-safe colors for visual compatibility and readability.
Default colors on most browsers are grey background, black text, red links, blue visited links, and orange active links. To code HTML for your own selection of hexidecimal colors for background, text and links, place these attributes inside the <body> tag:
<body bgcolor=”#FFFFCC” text=”#000033″ link=”#CC3333″ vlink=”#336666″ alink=”#CC6600″>
These hexidecimal codes make the background a soft cream color, the text a deep navy blue, the link a bright orangish red, the visited link (vlink) a dark teal, and the active link (alink) a burnt orange. Try this color combination on www.visibone.com and see how they look together.
Make Tables Make Sense
Data Tables
If you are unable to see the table it can be quite hard to understand what the table is about. Assistive technology such as voice and Braille output devices, read from left to right across a Web page, regardless of the formatting. Imagine
trying to figure out what the information means, without the use of sight!
Accessible tables: There are several ways to make tables that are accessible AND make sense, such as using the table caption, summary attribute and scope attribute. For long, complicated tables though, it is best to use a text alternative such as lists.
Try holding a ruler across a line in a table and see if each line makes sense when reading across the page. Also, if you are several lines down into the table, can you remember what the table headers were, so that the information you’re reading still makes sense?
The Table Caption
The first step is to add information describing the purpose and structure of the table. The caption element allows you to provide a caption, and to position this above or below the table. The <caption> tag should appear between the <table> and the <tr> tag to make the caption appear above the
table.
The Summary Attribute
The <table> tag’s summary attribute should be used within the <table> tag to describe the structure of the table for people who can’t see the table. For instance a summary stating, “the first column gives the year and the second,
the revenue for that year” is placed inside the <table> tag like this:
<table summary=”the first column gives the year and the second, the revenue for that year”>
The Scope Attribute
When a table is rendered to audio or to Braille, it is useful to be able to identify which headers describe each cell. For instance, an aural browser could allow you to move up and down or left and right from cell to cell, with the appropriate
headers spoken before each cell.
To support this you need to annotate the header and/or data cells. The simplest approach is to add the scope attribute to header cells. It may be used with the following values:
row: The current cell provides header information for the rest of the row that contains it.
col: The current cell provides header information for the rest of the column that contains it.
An Example Table
<table summary=”the first column gives the year and the second, the revenue for that year”>
<caption>Projected Sales Revenue by Year</caption>
<tr align=”center”>
<th scope=”col”>Year</th>
<th scope=”col”>Sales</th>
</tr>
<tr align=”center”>
<td>2000</td>
<td>$18M</td>
</tr>
<tr align=”center”>
<td>2001</td>
<td>$25M</td>
</tr>
</table>
This HTML coding produces the following table:
| 2000 | $18M |
| 2001 | $25M |
Assistive technology reads the table like this:
“Projected Sales Revenue by Year”
“Year 2000″
“Sales $18M”
“Year 2001″
“Sales $25M”
Text-only Version
For longer and more complicated tables, link to a text-only version that will help readers understand the information in the table. One way to do this is to create a list of the data, using the table header information with each bulleted item:
Projected Sales Revenue by Year
- Year: 2000, Sales: $18M
- Year: 2001, Sales: $25M
- Year: 2002, Sales: $36M
- Year: 2003, Sales: $45M
and so on.
Using Tables for Layout
Where possible, use Cascading Style Sheets (CSS) instead of tables for formatting purposes. Just be sure that your formatting “decays gracefully.” If you must use tables for layout,
do not use table headers for columns or rows. Do use the summary attribute to describe the contents of the columns and rows to the user.
Include NoFrames with Frames
Web pages containing frames are not universally accessible. According to the World Wide Web Consortium, “For non-visual users, relationships between the content in frames (e.g., one frame has a table of contents, another the contents themselves)
must be conveyed through other means.”
Please refer to the W3C’s Web Content Accessibility Guidelines for making Web pages with frames universally accessible.
Remember the Alt Attribute in Image Maps
An image map is an image that has “active regions”. When the user selects one of the regions, some action takes place — a link may be followed, information may be sent to a server, etc.
To make an image map accessible, you must ensure that each action associated with a visual region may be activated without a pointing device. Also, provide a link to a text-only version since image maps convey visual information. If AREA is used to create the map, use the “alt” attribute.
Image maps are created with the MAP element. HTML allows two types of image maps: client-side (the user’s browser processes a URI) and server-side (the server processes click coordinates).
You should create client-side image maps (with “usemap”) rather than server-side image maps (”ismap”).
Please see the World Wide Web Consortium’s Web Content Accessibility Guidelines for further information about coding accessible client-side image maps into your web page.
Take Navigation Seriously Around Your Site
A consistent style of presentation on each page allows users to locate navigation mechanisms more easily, but also to find important content. This helps people with learning and reading disabilities but also makes navigation easier for all
users.
Predictability will increase the likelihood that people will find information at your site, or avoid it when they so desire.
Examples of structures that may appear at the same place between pages:
- navigation bars
- the primary content of a page
- advertising buttons, banners, icons
A navigation mechanism creates a set of paths a user may take through your site. Providing navigation bars, “Top” (back to the top of the page) links, site maps, and search features all increase the likelihood that a user will reach the information they seek at your site.
If your site is highly visual in nature, the structure might be harder to navigate if the user can’t form a mental map of where they are going or where they have been. To help them, you should describe any navigation mechanisms (use the title attribute inside the <a> element.) It is crucial that the descriptions and site guides be accessible since people who are lost at your site will rely heavily on them.
<< Return to Basic Formatting in HTML | Learn to Validate Your Pages >>