Website accessibility Hints and Tips

Alternative text for images

The use of alternative text (also known as 'alt tags') is fundamental to accessibility. All graphics on a page need to be labeled because a visually impairment. person using a screen reader has only the information in the alt tag to gauge the importance of a particular image. This is because computers can read text to a blind person via speech or Braille but cannot interpret and describe an image.

If you have a graphical link to your careers home page with no alt tag then a screen reader user cannot navigate to your careers page. There is a wide range of image uses on a Website for each there is a specific way to implement alternative text.

Pictures, logos and graphical form buttons

Provide clear, concise descriptions -for example for the key logo on this page

web links - specify the function of the link - e.g.
<A HREF="http://www.macromedia.com/papers/erecruitment.pdf">
<IMG BORDER="0" HEIGHT="31" WIDTH="88" SRC="mm_erecruit.gif"
align="center" alt=" Download Macromedia e-recruitment white paper (PDF 320KB)"></A>
spacer/decorative graphics - provide empty alt tags: alt=""
Example: <img src="spacer.gif" width="450" height="1" alt="">
graphs and charts - provide detailed description via 'longdesc'
images maps - each active area must have an alt text, for example:

<map name="balance">
<area alt="Enhanced Reputation - opens in a new window" coords="18,63,70,118" href="../reputation.htm" target="_blank">
<area alt="Enhanced Performance- opens in a new window" coords="80,63,137,120" href=" ../performance.htm" target="__blank">
<area alt="Cost Savings- opens in a new window" coords="16,129,70,184" href="../costsave.htm" target="__blank">
<area alt="Legal benefits- opens in a new window" coords="81,127,136,185" href="../legalb.htm" target="__blank">
<area alt="Costs- opens in a new window" coords="297,59,352,114" href="../costs.htm" target="_blank">
</map>

Make sure you apply the right alt tag to the right type of image - one major international firm has a empty alt tag on all its top navigation links including the 'careers' links which makes it inaccessible because screen readers ignore any graphic with alt="".

Alt text best practice

Keep alt text concise and brief.

For pictures, you do not need to add 'picture of...' and for links you do not need to add the phrase ' click here for' at the start of the alt text because text readers and screen readers know it is a link. For example a screen reader will read links on a page in a different voice to differentiate them from standard text.