Accessibility for All
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Making your web sites accessible does not "only" mean making them accessible to people with disabilities but making them accessible to "all" who visit you site. If you implement a technique that makes your site more accessible to a person who is site impaired, for example, and the result is that your site becomes less accessible to someone with good vision, you have failed in making your site accessible.
Many of the useful and practical techniques that you can use for making your web pages more accessible are derived from the various documents published by the World Wide Web Consortium, also known as the W3C, and are available online (http://www.w3c.org). What follows are ways to make these guidelines easier to understand.
Use HTML Heading Tags to Define Document Structure
This is an important technique to use in long documents that contain various section, sub-sections, topics, sub-topics, etc. Using heading tags will help define the structure of your document and the importance of sections to one another. For example, a web site containing a story with several chapters might look like this:
code
<H1>Chapter 1</H1> <P>Once upon a time . . . </P> <H1>Chapter 2</H1> <P>In the small cottage . . .</P>
code deconstruction
Heading tags are read through a screen reader with different emphasis and can help someone who is blind more easily navigate through the document. For example, H1 is read with more emphasis than H2, etc.
Use the ALT Tag on All Images and Other Non-Text Elements
All of the non-text content on your page should contain the ALT attribute. Remember, it's equally important to make sure this alternative text is meaningful so the disabled visitor has the best experience possible.
code
<IMG SRC="coffee.jpg" ALT="a cappuccino cup overflowing with white fluffy foam" WIDTH="150" HEIGHT="150">
code deconstruction
Notice how the ALT space is used to provide a meaningful text equivalent. This will help a visually impaired person understand what they cannot see with their own eyes.
The ALT attribute has the added bonus of causing a small yellow tooltip to appear in some browsers (see figure 1). This provides a text description while the image is downloading, or in the event that images have been turned off in the browser setting.
)
figure 1 ALT text benefits both visually impaired users and those with
images disabled in their browsers.
Use Style Sheets to Control the Layout and Presentation
This is a critical step in separating the structure and presentation of your pages. It is not acceptable to use HTML (i.e. FONT) to format your pages. Instead, you should use cascading style sheets to describe the layout, formatting, and presentation of your web pages. For example, you should not use the FONT tag to define the appearance of your text. Style sheets should be used instead.
code
H1 { FONT-SIZE: 3em; }
code deconstruction
In the example preceding example, the text is set to a relative size, which means it will change relative to the size of the text defined in the user's browser or style sheet. This is very helpful to persons with low vision and other visual disabilities because it gives them control over the size of the text they view while maintaining relative sizes.
Add Captions and Summaries to Tables and Identify the Header and Rows
This is really important for people who are accessing your web page through a screen reader because the header is read out loud differently from the date in rows (see figure 2).
)
figure 2 This looks like a normal HTML table, right? Well, it is, but
it's also an accessible HTML table because I have added a caption and
summary, and identified the header and rows.
Let's take a look at the code for this table and then you'll learn why it's so important to make this effort when building your tables.
code
TABLE WIDTH="300" BORDER="1" SUMMARY="This table lists all of our products by item number, including the name and description of each."> <CAPTION>Product Listing by Item Number</CAPTION> <TR> <TH>Item #</TH> <TH>Name</TH> <TH>Length</TH> </TR> <TR> <TD>001</TD> <TD>Learning Dreamweaver</TD> <TD>4 hours</TD> </TR> <TR> <TD>002</TD> <TD>Learning Flash</TD> <TD>6 hours</TD> </TR> <TR> <TD>003</TD> <TD>Learning Illustrator</TD> <TD>8 hours</TD> </TR> </table>
code deconstruction
Notice that I used the SUMMARY attribute to describe the contents of the table. This should state the purpose and overall content of the table. I also provided a <CAPTION> for the table, which is listed at the top visually, not the bottom like you might have assumed. And, I used the <TH> tags to identify the headers in my table.
Ok, so why is this such a big deal? Well, for a visually impaired person who has this page read aloud through a screen reader, it's a huge deal. For example, when this page is read out loud, because of my efforts, it will be read like this:
Caption: Product Listing by
Item Number
Summary: This table lists all of our
products by item number, including the
name and description of each.
Item #: 001, Name: Learning Dreamweaver, Length: 4 hours
Item #: 002, Name: Learning Flash, Length: 6 hour
Item #: 003, Name: Learning Illustrator, Length: 8 hours
Try reading the section above out loud to yourself and imagine whether you'd still be able to understand the contents of this table if you could not see the screen. Pretty cool, huh? With just a little extra time and effort, you can make a big difference for a lot of disabled web surfers!
Use the TITLE Attribute to Name Frames
Frames present challenges to persons who aren't disabled, so you can imagine the headaches they can cause for disabled users. One way to make them accessible is by careful use of the TITLE attribute.
For example, the code example below uses the TITLE attribute to give meaningful names to the frames so the user can better understand how the frames relate to one another.
code
<FRAMESET COLS="15%,85%"
TITLE="catalog of products>
<FRAME SRC="navbar.htm"
TITLE="product navigation bar">
<FRAME SRC="content.htm"
TITLE="product descriptions">
</FRAMESET>
code deconstruction
Use client-side image maps instead of server-side image maps. While client-side image maps are pretty much the norm, it's still important to make this point. Server-side image maps require that the server process where the user clicks and what page they should be taken to. Server-side image maps also require a specific input device.
code
<IMG SRC="navigate.gif" WIDTH="300" HEIGHT="50" USEMAP="#navbar" BORDER="0"> <MAP NAME="navbar"> <AREA SHAPE="rect" COORDS="10,7,77,42" HREF="home.htm" ALT="Home" TITLE="Home"> <AREA SHAPE="rect" COORDS="87,7,153,42" HREF="products.htm" ALT="Product Listing" TITLE="Product Listing"> <AREA SHAPE="rect" coords="171,10,235,43" HREF="contact.htm" ALT="Contact Information" TITLE="Contact Information"> <AREA SHAPE="rect" COORDS="248,10,311,41" HREF="map.htm" ALT="Site Map" TITLE="Site Map"> </MAP>
code deconstruction
Make sure that your client-side image maps include a meaningful ALT attribute for each link. This is really important for people accessing the page through a screen-reading device. Above is an example of a good client-side image map. Notice the USEMAP tag; this denotes a client-side image map. Also notice the consistent use of meaningful ALT attributes for each link.
Make Sure Animations and Movies Contain Synchronized Equivalent Alternatives
If your web pages contain content, such as Flash or QuickTime, you should ensure that you use captioning to provide users with a text transcript of the content. If the technology you are using does not support captioning, then make sure you have a plain-old text available, which provides the disabled person with access to equivalent information.
You should also know about SMIL (Synchronized Multimedia Integration Language). SMIL was created by the W3C specifically for synchronizing multimedia and text files. You can find out more about SMIL at http://www.w3.org/AudioVideo/. More specifically, you can learn more about SMIL and accessibility at http://www.w3.org/TR/SMIL-access/.
code
[knock on door] [knock] [knock] Who is it? Hi, it's just the mailman!
code deconstruction
Your captioning should always be descriptive and include supporting information to understand what's being said and occurring in the movie.
Make sure links clearly identify the target and that you provide a text equivalent when using images as links. This might seem like Web Design 101, but it's worth stating here. Avoid using terms like "click here" for your text links, instead using something that describes the target. For example, if you were linking to a map of the 50 states, you might use something like "map of United States" as the text for that link. I know it seems elementary, but you would be shocked at the number of "click here" links on the web! Imagine if you were site impaired (close your eyes) how meaningless the term "click here" would be all by itself without further description.
Macromedia and Microsoft content
Companies, like Macromedia and Microsoft, have published online information and tutorials for making their content accessible. You should visit the links below if you are working with Flash or Windows AVI files.
Macromedia Flash : http://www.macromedia.com/macromedia/accessibility/features/flash
Microsoft SAMI (Synchronized Accessible Media Interchange) : http://www.msdn.microsoft.com/library/default.asp?url=/library/en-us/dnacc/html/atg_samiarticle.asp