Understanding Accessibility
by Vivienne Trulock
Guideline 1 - Provide equivalent alternatives to auditory and visual content
There are 5 specific checkpoints in Guideline 1. Most of them are priority 1, so they are very important.
| No. | Checkpoint | Priority | How to check | Disability Accommodated |
|---|---|---|---|---|
| 1.1 | Provide a text equivalent for every non-text element | .Priority 1 | .WebXact Automatic check, Manual check for 1.1 | Blind, Deaf |
| 1.2 | Provide redundant text links for each active region of a server-side image map | .Priority 1 | .WebXact Automatic check (?) | Blind |
| 1.3 | Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation | .Priority 1 | .WebXact Automatic check (?) | Blind |
| 1.4 | For multimedia movies or animation, synchronize captions or auditory descriptions of the visual track with the presentation | .Priority 1 | .Manual check for 1.4 | Blind |
| 1.5 | Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map | .Priority 3 | .WebXact Automatic check | Blind |
Checkpoint 1.1 - Provide a text equivalent for every non-text element
How do I do it?
Alt Attributes
For most web designers this simply means putting in alt attributes on all images and hotspots. This means that screen readers can read out the alternative text, and users will understand what the image's purpose is.
alt general example - HTML
<img alt="image description here" src="image.gif" width="206" height="60">
alt general example - xHTML
<img alt="image description here" src="image.gif" width="206" height="60" />
alt specific example - html
<img src="images/eggs.gif" alt="eggs are high in protein" width="200" height="150">
alt specific example - xhtml
<img src="images/eggs.gif" alt="eggs are high in protein" width="200" height="150" />
However, if an image is purely decorative and serves no function, putting an alt="" attribute allows the screen reader to skip the image, instead of alerting the user in case the image is important. Alt="" is not the same as having no alt tag.
empty alt general example - html
<img alt="" src="decorativeimage.gif" width="200" height="200">
empty alt general example - xhtml
<img alt="" src="decorativeimage.gif" width="200" height="200" />
empty alt specific example - html
<img alt="" src="lowcarb1.jpg" width="153" height="94" border="0">
empty alt specific example - xhtml
<img alt="" src="lowcarb1.jpg" width="153" height="94" border="0" />
Long Description Attributes
Where an image contains important information, such as a chart, table or diagram, it should also have an extended description so that blind individuals can access this content. The extended description is referenced using the ‘longdesc’ attribute of the <IMG> tag which links to the URI (the page address) of the extended description.
Long Description general example - html
<img alt="image chart description here" src="imagechart.gif" width="200" height="200" longdesc="chartdescriptionpage.htm">
long Description general example - xhtml
<img alt="image chart description here" src="imagechart.gif" width="200" height="200" longdesc="chartdescriptionpage.htm" />
Long Description specific example - html
<img alt="chart of age versus height" src="ageheight.gif" width="200" height="200" longdesc="ageheightchart.htm">
long Description specific example - xhtml
<img alt="chart of age versus height" src="ageheight.gif" width="200" height="200" longdesc="ageheightchart.htm" />
How do I check that the page meets the WCAG criteria for Checkpoint 1.1?
webXact automatic check
webXact will automatically check for the presence of alt attributes where ever there is an image or a hotspot. If webXact finds even one image or hotspot which is missing an alt attribute, the page will fail the check.
manual check
To ascertain compliance with this checkpoint, check the pages manually for charts, diagrams and table images and images with extended text. The easiest way to do this is to view the site or page images in Window’s Explorer in thumbnail format. If images like the above are found they should be checked in Dreamweaver, Notepad or View > Source for a ‘longdesc’ attribute.
Images with charts, diagrams and tables in them which have no extended description, will fail the check.
If there are no images with important information (such as charts, tables or diagrams) the page will pass the check even when there are no long descriptions available.
Checkpoint 1.2 - Provide redundant text links for each active region of a server-side image map
If you are using a server side image map you must provide text links which link to the same pages. This is because some assistive devices don't support server-side image maps.
How do I do it?
Add in extra links into your code to the appropriate pages. You can then style these to be invisible using CSS styles so that they don't appear to those not using assistive devices.
display: none; and visibility: hidden; is used in CSS to not display content that is actually in the page. Unfortunately, however, this is not available to some screen readers, who may require it. The code below simply uses a width and height of 0 pixels, turns off the overflow and absolutely positions the code. This coding allows the screenreader to access the 'invisible' content.
hiding content example
Give the surrounding <div> tag an id of extralinks.
<a href="index.htm">home</a>
<a href="about.htm">about</a>
<a href="contact.htm">contact</a>
</div>
Then style the <div> with css as below:
overflow: hidden;
position: absolute;
height: 0px;
width: 0px;
}
How do I check that it meets the WCAG criteria for Checkpoint 1.2?
It may be possible to run your page through webXact's accessibility checker to validate this checkpoint automatically, however I have never tested a page in which this was raised as a point of correction, so I cannot guarantee that this will work.
Checkpoint 1.3 - Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation
How do I do it?
Use an audio recorder to record an audio track of the text content. This can be embedded into the multimedia movie. In Director, for example, the sound can be played directly from the score or controlled by Lingo. Director has pre written behaviours which facilitate easy control of sound. Check out http://www.ilikecake.net/director/behaviours05_sound.htm for more information on controlling sound with Director.
How do I check that it meets the WCAG criteria for Checkpoint 1.3?
It may be possible to run your page through webXact's accessibility checker to validate this checkpoint automatically, however I have never tested a page in which this was raised as a point of correction, so I cannot guarantee that this will work.
Checkpoint 1.4 - For multimedia movies or animation, synchronize captions or auditory descriptions of the visual track with the presentation
How do I do it?
This guideline refers to making available text versions of the audio content in a multimedia element so that deaf individuals can access it. It also refers to having a text description of the multimedia itself available so that blind people know what the multimedia content and purpose is. This can be achieved either having captions embedded into a QuickTime movie, by using the SMIL specification or by enabling accessibility options within the multimedia source code.
How do I check that it meets the WCAG criteria for Checkpoint 1.4?
To check whether accessible text versions or alternative text descriptions have been applied, the JAWS 6.20 screen reader can be used on every page which contains multimedia.
If alternative content is available when a page containing multimedia is scanned with JAWS 6.2 the page will have passed the check.
Where alternative content cannot be found, the page will have failed the check.
Checkpoint 1.5 - Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map
If you are using a server side image map you must provide text links which link to the same pages. This is because some assistive devices don't support server-side image maps.
How do I do it?
The same way as for server-side (checkpoint 1.2) - add in extra links into your code to the appropriate pages. You can then style these to be invisible using CSS styles so that they don't appear to those not using assistive devices.
display: none; and visibility: hidden; is used in CSS to not display content that is actually in the page. Unfortunately, however, this is not available to some screen readers, who may require it. The code below simply uses a width and height of 0 pixels, turns off the overflow and absolutely positions the code. This coding allows the screenreader to access the 'invisible' content.
hiding content example
Give the surrounding <div> tag an id of extralinks.
<a href="index.htm">home</a>
<a href="about.htm">about</a>
<a href="contact.htm">contact</a>
</div>
Then style the <div> with css as below:
overflow: hidden;
position: absolute;
height: 0px;
width: 0px;
}
How do I check that it meets the WCAG criteria for Checkpoint 1.5?
Run your page through webXact's accessibility checker to validate this checkpoint automatically.
