Accessibility
Accessibility Coding Tips
Author: Scott Rippon
Version:
1.2
22/08/03
When creating web pages there are coding techniques that we can employ to ensure our content is more accessible. The HTML coding techniques that are listed in this document have been taken from documents produced by W3C 's Web Accessibility Initiative (WAI) group. This document is not intended alone to help you create accessible web pages. It contains a few quick tips that can be easily added to your present coding routine to create more accessible documents.
- W3C WAI Homepage
- WAI Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
- WAI Web Content Accessibility Guidelines 1.0
Tip: HTML code must be valid. It can be validated through the use of W3C's MarkUp Validation Service.
Text Formating
<h1></h1> <h2></h2> <h3></h3> <h4></h4>
Make sure that heading tags are use to represent the level of the heading within the page. Do not use different heading tags just to create a certain presentation effect.
Quotations
Use <q>
and <blockquote> tags to
mark up quotations:
<blockquote cite="http://www.example.com/loveslabourlost"> <p>Remuneration! O! that's the Latin word for three farthings. William Shakespeare (Love's Labor Lost).</p> </blockquote>
Warning:
Do not use <blockquote> tag
to create the effect of indented text.
<p>John
said, <q>I saw Lucy at lunch, she told me <q>Mary
wants you to get some ice cream on your way home.</q>
I think I will get some at Ben and Jerry's, on Gloucester Road.</q></p>
Change of Language
In the Monash Arts template the primary
language is specified in the opening <html>
tag:
<html lang="en">
Common Language Codes:
- Chinese (zh)
- French (fr)
- German (de)
- Greek (el)
- Indonesian (id)
- Italian (it)
- Japanese (ja)
- Korean (ko)
- Russian (ru)
- Spanish (es)
Modify this if the primary language in your page is something other than English. For more information about language codes and there use see section 8.1 Specifying the language of content: the lang attribute of the HTML 4.01 Specification.
Small sections of content
that are a different language to the specified primary language should
be coded. The lang attribute which is present
in many HTML
tags is what we use to code these language changes.
<p>And
with a certain <span lang="fr">je ne sais
quoi</span>, she entered both the room, and his life,
forever.<q>My name is Natasha,</q> she
said. <q lang="it">Piacere,</q>
he replied in impeccable Italian, locking the door.</p>
Colour Contrast
WCAG 1.0 states that:
2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].
The problem is what constitutes "sufficient" colour contrast? Using the W3C WAI guidelines HP has created an online colour contrast verification tool. This tool allows you to enter a forground and background colour and test if there is sufficient contrast. ArtsWeb recommends that when working with colours always test to make sure that there is sufficient colour contrast.
Also if you are using colour to communicate content ArtsWeb also strongly recommends testing using Vischeck's Colour Blindness Simulator.
Images
Whilst they say an image is worth a thousand words this is only true if you are able to see the image! When inserting an image onto the page we should make sure that the image has a short and long (if required) text description.
<img src="2002-sales.gif" alt="Sales per month for 2002" longdesc="sales.html"> <a href="sales.html" title="Description of 2002 sales figures">[D]</a>
The short description is provided through the alt tag. The long description is provided through the longdesc tag. Because browser support for the longdesc tag is flaky we also provide a link to the page which provides detailed description of the image.
Tables
<table summary="Short description of the contents in the table. This allows people with using screen readers to decide whether to read the table or not."> <caption>Table Heading</caption> <thead> <tr> <th abbr="Head1" scope="col"><p>Table Heading 1</p></th> <th abbr="Head2" scope="col"><p>Table Heading 2</p></th> </tr> </thead> <tfoot> <tr> <th><p>Table Heading 1</p></th> <th><p>Table Heading 2</p></th> </tr> </tfoot> <tbody> <tr> <td><p>Table Body Cell 1</p></td> <td><p>Table Body Cell 2</p></td> </tr> </tbody> </table>
Use:
-
summaryattribute to provide a description of the table contents. -
<caption>tag to give the table a title. -
<thead><tbody></tfoot>tags to break table up into sections.The
<tfoot>tag is used to create a table heading at the bottom of a table. It is recommended that it only be used for tables which span multiple printed pages. -
<th>tag to format cells which are table headings. -
abbrattribute to abbreviate the table heading. If the table heading is read before every cell by a screen reader this will cut down the reading time immensely. -
For simple tables where the table data only has one heading use the scope attribute to show link between heading and data.
More complex tables with multiple column and/or row groups should be marked up using
id,headersandaxisattributes. See section 5 Tables from HTML Techniques for Web Content Accessibility Guidelines 1.0 for an example and explanation of this type of table.
Avoid Spanned Rows or Columns
Unfortunately spanned rows or columns are not presently handled well by screen readers. They can cause the screen reader to not associate table headers with relevant data. ArtsWeb recommends that coders duplicate cells within a table rather than having one single row/column-spanned cell. Web AIM How to Create Accessible Tables.
Here are two simple examples to illustrate what to avoid in the formatting of tables:
| C1R1 | C2R1 |
C3R1 |
|---|---|---|
|
C1R2/C1R3 | C2R2 | C3R2 |
| C2R3 |
C3R3 | |
|
C1R4 | C2R4 | C3R4 |
This is the HTML code for the above table:
<table border="1" cellspacing="0" summary="This table, an example of spanned row, shows row 2 and 3 in the first column merged."> <caption>Spanned Row Example</caption> <thead> <tr class="TblHead1"> <th abbr="C1R1" scope="col"> <p>C1R1<br> (Table Heading 1)</p> </th> <th abbr="C2R1" scope="col"> <p>C2R1<br> (Table Heading 2)</p> </th> <th abbr="C3R1" scope="col"> <p>C3R1<br> (Table Heading 3)</p> </th> </tr> </thead> <tbody> <tr> <td rowspan="2"><p>C1R2/C1R3</p></td> <td><p>C2R2</p></td> <td><p>C3R2</p></td> </tr> <tr> <td><p>C2R3</p></td> <td><p>C3R3</p></td> </tr> <tr> <td><p>C1R4</p></td> <td><p>C2R4</p></td> <td><p>C3R4</p></td> </tr> </tbody> </table>
| C1R1 | C2R1/C3R1 | |
|---|---|---|
| C1R2 | C2R2 |
C3R2 |
| C1R3 | C2R3 | C3R3 |
| C1R4 |
C2R4 | C3R4 |
This is the HTML code for the above table:
<table border="1" cellspacing="0" summary="This table, an example of spanned column, shows column 2 and 3 in the first row merged."> <caption>Spanned Column Example</caption> <thead> <tr class="TblHead1"> <th abbr="C1R1" scope="col"> <p>C1R1<br> (Table Heading 1)</p> </th> <th abbr="C2R1/C3R1" colspan="2" scope="col"> <p>C2R1/C3R1<br> (Table Heading 2&3)</p> </th> </tr> </thead> <tbody> <tr> <td><p>C1R2</p></td> <td><p>C2R2</p></td> <td><p>C3R2</p></td> </tr> <tr class="TblSlat"> <td><p>C1R3</p></td> <td><p>C2R3</p></td> <td><p>C3R3</p></td> </tr> <tr> <td><p>C1R4</p></td> <td><p>C2R4</p></td> <td><p>C3R4</p></td> </tr> </tbody> </table>
|
C1R1 |
C2R1 | C3R1 |
|---|---|---|
| C1R2 |
C2R2 | C3R2 |
|
C1R3 | C2R3 | C3R3 |
| C1R4 |
C2R4 | C3R4 |
This is the HTML code for the above table:
<table border="1" cellspacing="0" summary="This table contains no spanned rows or columns. Cell data may be replicated but this is a trade off to ensure the table will be correctly read by screen readers."> <caption>Spanned Row/Column Examples Corrected</caption> <thead> <tr class="TblHead1"> <th abbr="C1R1" scope="col"> <p>C1R1<br> (Table Heading 1)</p> </th> <th abbr="C2R1" scope="col"> <p>C2R1<br> (Table Heading 2)</p> </th> <th abbr="C3R1" scope="col"> <p>C3R1<br> (Table Heading 3)</p> </th> </tr> </thead> <tbody> <tr> <td><p>C1R2</p></td> <td><p>C2R2</p></td> <td><p>C3R2</p></td> </tr> <tr class="TblSlat"> <td><p>C1R3</p></td> <td><p>C2R3</p></td> <td><p>C3R3</p></td> </tr> <tr> <td><p>C1R4</p></td> <td><p>C2R4</p></td> <td><p>C3R4</p></td> </tr> </tbody> </table>
ArtsWeb realises that the above examples are very simplistic and the solution of repeating data may not always be appropriate. It is not mandatory for Web Developers to stop using the colspan and rowspan attributes. ArtsWeb wishes to:
-
Raise awareness about the use of these attributes, and
-
Encourage the creation of tables where strong relationships exists between table heading and data.
The simpler the table and the stronger the relationship the easier it will be for people reading these tables using screen readers.