Coding for accessibility

Links

Screen reading software is able to to list all links on a page in a row. Therefore, it is necessary to make the link text descriptive. For example, if you had 10 links on a page that said click here, when a screen reader displays them, it is not going to be too helpful to a disabled user. You can also use an attribute called title to add an extra description to your link that will only be picked up when you roll your mouse over the link or you are using screen reading software. so in the a tag, you can use title=""

Images

Images must all contain ALT tags describing what they are. If you consider you are accessing an image from a visually impaired person it would be helpful to describe what the image is. For example: alt="Photo: Nokkia 6100 phone".

When the image doesn't require a description, it still requires an ALT text with no content, so alt="" (for example Spacer images). The screen reader picks this up and skips the image, it will otherwise read out "BLANK" when there is no ALT tag.

Images should also have border, width and height properties. If you don't want a border, then add border="0", but the tag must be there.

For creating an alternative in the instance that the image contains too much information (eg: a diagram), you can add a [D] link. (Please see "Providing Alternatives" below)

Image Maps

Image Maps can be used, but all image areas must contain an ALT text. The image where the map is called must also contain ALT text. This is what text based Browsers will use as the initial link name, so describe it accordingly.

Tables for layout

A screen reader reads in order of each Table column, so if there is content scrolling downwards it needs to be nested within the one TD tag. For example:

<tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>The title</td>
        </tr>
        <tr>
          <td>The image</td>
        </tr>
      </table>
    </td>
</tr>

Tables for displaying data

The W3C has an in depth guideline to this, which goes over a more complex table. Here we will go over a basic table for layout.

A few small changes need to be added so a screen reader can identify what content relates to what title. Take this example:

My mates Birthdays
Name	Age	Birthday
Johnno	28	15th January
Shazza	35	23rd September
Bruce	27	6th October

Without the proper coding, the screen reader will just read the content in order of each column. This can get confusing when you have a large table. When you label what each column represents, the screen reader will read out the column, then content. So for example here, if coded correctly, the screen reader would say: Name: Bruce, Age: 27 and so on.

Take a look at the code:

<table border="1" summary="this table charts my friends Birthdays.">
  <caption>My mates Birthdays</caption>
  <tr>
    <th id="header1">Name</th>
    <th id="header2">Age</th>
    <th id="header3" abbr="type">Birthday</th>
  </tr>
  <tr>
    <td headers="header1">Johnno</td>
    <td headers="header2">28</td>
    <td headers="header3">15th January</td>
  </tr>
  <tr>
    <td headers="header1">Shazza</td>
    <td headers="header2">35</td>
    <td headers="header3">23rd September</td>
  </tr>
  <tr>
    <td headers="header1">Bruce</td>
    <td headers="header2">27</td>
    <td headers="header3">6th October</td>
  </tr>
</table>

Let's go over the new additions to the code:

Summary
Any text you add here a screen reader will pick up, but it won't be displayed on the screen.

Caption
This is to identify the heading of the table.

th
Stands for Table Header, defines the heading columns. This is where you create an id name EG - id="header1"

headers
Here you can associate each bit of information with its respective table header. So every time you want to associate something with that column you will give it the same header id. EG - headers="header1"

For more information on this subject, please visit the W3C guidelines.

Forms

There are only a few additions to take in to account when building accessible forms. Take the following example: Here is the code for this:

<form name="form1" id="form1" method="post" action="">
  <p>
    <label for="male"><input type="radio" name="gender" value="m" tabindex="1" />male</label><br />
    <label for="female"><input type="radio" name="gender" value="f" />female</label><br />
  </p>
  <table border="1" bordercolor="#CCCCCC"cellspacing="0" cellpadding="4">
    <tr>
      <td><label for="first_name">first name</label></td>
      <td> </td>
      <td valign="top"><input name="name" type="text" id="first_name" tabindex="2" /></td>
      <td>  </td>
      <td><label for="region">Region</label></td>
      <td> </td>
      <td valign="top">
        <select name="region" id="region" tabindex="4">
          <option value="sc">scotland</option>
          <option value="wa">wales</option>
          <option value="eng">england</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="last_name">last name</label></td>
      <td> </td>
      <td valign="top"><input name="name" type="text" id="last_name" tabindex="3" /></td>
      <td>  </td>
      <td><label for="city">City</label></td>
      <td> </td>
      <td valign="top">
        <select name="region" id="city" tabindex="5">
          <option value="sc">scotland</option>
          <option value="wa">wales</option>
          <option value="eng">england</option>
        </select>
      </td>
    </tr>
</table>
</form>

Without adding the correct coding, when a user tabs through each field, they will follow the order of the code. The tabindex needs to be specified in order to make the user to tab from First Name to Last Name, instead of across the table. The radio buttons are in a group and therefore only the first radio button will need a tabindex

The other addition to note is the label control. This associates the text with the appropriate form, in the case where you might have them in separate columns. Some older screen readers have trouble linking a form control to nearby text, particularly across the boundary of a table cell. The label can be grouped around the text and form element, such as is the case for the radio buttons in the example. The other option is to wrap the label around the text and give the form element id property the same name. This is the case with the rest of the form elements. The label control can also be wrapped around images in the case of where they are used to convey text, for example.

All form elements must contain an id attribute to be read by the various types of screen readers. Depending on the software it will read out one or the other. JAWS, the most common, reads out the ID attribute.

One thing to note is that Javascript is not DDA compliant. This means error checking, for example, will have to be done server side and may take longer to produce. The client will need to be asked whether they require DDA compliance.

Text/CSS

To be truly accessible, text must be re-sizable using your browser controls. This is for partially sighted people, but may compromise a design that our creative team have worked on. Once again, it is necessary for the client to request this before design goes ahead as our creative team can take it into account.

When using the pt or px extension for CSS styles, the text cannot be resized. When you use the em extension this becomes possible.

For example:
font-size: 0.8em; as opposed to font-size: 12px;

You can also use relative sizing, (small, x-small, etc), but this will make all text relative in size to it's parent style. So if you had an overall body size of small and then added a new size of x-small within the body it will be smaller than if you had an x-small body size.

CSS

Text based browsers such as LYNX do not support CSS. It is therefore important that a page is still comprehendible when CSS is turned off. Instead of having properties for emphasis, (such as bold), featured within your stylesheet, they should be wrapped around the text itself, so they will still display as a heading when CSS is turned of. This can be done using the following tags within your page:

h1, h2, h3
These are standard HTML tags, that can be edited with a style sheet, but will still display with their respective hierarchy when CSS is turned off. Screen readers can also list all headings in a document and their heirarchy, if they are surrounded by any of these tags, whereas a class called ".heading", for example, will not be understood.

strong
This has the same effect as the bold tag and will replace its use. This is due to the bold tag being visual rather than semantic. By using strong you are telling the browser that it is important and it will render it according to its own specifications. You can always change the display of strong in your stylesheet, so anyone viewing with CSS will see it correctly.

em
This has the same effect as the italic tag and will replace its use, for the same reasons mentioned for the strong tag.

Providing Alternatives

It is worth noting that providing alternatives to things such as Flash and Animated GIF's can be time consuming and the client needs to be asked whether they require DDA compliance prior to building. They will also need to be asked what Browsers we need to design for.

The [D] linkdlink

This has been created as a standard by the W3C which is also recognised by the various Disabled associations. When a page contains content that is not accessible (eg: Flash, Audio, Video, images displaying information, etc), an alternative page can be linked to using the [D] link, or description link. This doesn't have to appear on the page, as it can be added to a Spacer GIF with a width of 1px by 1px.

displaying [D] link on a page:
<a href="disabled.html" title="Click here for a description of this chart">[D]</a>

displaying [D] link hidden within Spacer GIF:
<a href="disabled.html" title="Click here for a description of this chart"><img src="images/spacer.gif" width="1" height="1" border="0" alt="[D]"></a>

Flash

Flash MX has several new additions which help make it accessible, but as the majority of users do not have the player it would be advisable that the client is asked whether they require it before we go ahead and use it. Regardless though, it will not work in a Text based browser and cannot be truly labelled accessible.

When using Flash, an alternative version of the website must be created which is linked to from the page. This can be done using the invisible [D] link or any reference to a non-Flash version of the site.

Video, audio, etc

Obviously, audio will not be accessible to deaf people. Video will not be accessible to blind people and possibly deaf, depending on the content. Using the [D] link to provide alternatives will be sufficient to satisfy the Web content accessibility guidelines 1.0.

Javascript

Javascript is not compliant for text based browsers such as LYNX and is therefore not DDA compliant. However, this can be fixed in most cases by creating a NOSCRIPT alternative. For example:

<SCRIPT language="JavaScript">

</SCRIPT>
<NOSCRIPT>
<A href="jargon_buster.jsp" target="_blank">click here</a>
</NOSCRIPT>

Navigation

Screen readers read a page from left to right, top to bottom. Large menus at the top of the page can be painful for a disabled person as they have to listen to the navigation every time the page loads. A suggested way around this is to add a spacer GIF at the top with a skip navigation link, anchored to the body of the page.

So you would have:
<a href="#body"><img src="images/spacer.gif" width="1" height="1" border="0" alt="Skip Navigation"></a>