Understanding Accessibility
by Vivienne Trulock
Users of this site also found these sites useful
Guideline 1 - Provide equivalent alternatives to auditory and visual content
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.
