Creating Accessible Websites

Dealing With Tables

Make sure that the content makes sense when read cell by cell, left to right, row by row to assist users of screen readers.

Try and avoid complex tables (merged cells, integrated headings etc). Use separate tables if possible as these are far easier to mark up correctly.

Dreamweaver users should make sure that their preferences are set correctly to prompt you to add accessible code. Select Edict>preferences from the main menu and click on "Accessibility". Make sure that the top 5 boxes are checked in the dialog box that appears.


Layout Tables

HTML is designed for page structure and not for layout. Using tables for layout is a misuse of HTML and should be avoided if possible - but everyone does it. Make sure you mark up tables correctly to assist screen readers.

Use the <table SUMMARY> tag to help the user understand the table contents and choose whether or not to skip over it.

e.g.

<table SUMMARY="table used for layout"> or <table SUMMARY="contains staff contact details">

Use the caption tag if you want a heading to appear on the screen. Otherwise use the summary tag to alert screen readers that the table is used for design purposes.


Setting Table Width

If you are using a table for layout purposes you should set the table width to 99% to allow the page to expand or contract to the width of the browser window.

<table WIDTH=99%>

Don't use 100% as this will cause some browsers to produce a horizontal scroll bar.

You should avoid using tables with an absolute width such as 620 pixels as this causes problems for people using screen magnifiers because it will confine very large text to a very small screen space.


Tables Containing Data

If your webpage contains tables that display data e.g. staff names, e-mail addresses and telephone, you must make sure that you mark up the table cells that contain the headings.

Dreamweaver users can do this easily by selecting the header cells and checking the "header" box in the table properties window.

e.g.

Name Tel Number E-mail
Billy Bunter 1234567 b.bunter@dandy.co.uk
Dennis the menace 7654321 d.menace@beano.co.uk

Here is the code for this table:

<table width="99%" summary="contains names, telephone numbers and email addresses of comic characters")
<tr>
<th>
Name</th>
<th>Tel Number</th>
<th>E-mail</th>
</tr>

<tr>

<td height="34">Billy Bunter</td>
<td height="34">1234567</td>
<td height="34">b.bunter@dandy.co.uk</td>
</tr>

<tr>
<td>Dennis the menace</td>
<td>7654321</td>
<td>d.menace@beano.co.uk</td>
</tr>
</table>

The <TH> tag contains the table heading and the <TD> tag contains the table data. This is the minimum amount of code that will allow you to reach Checkpoint 1. <summary> tells users of screen readers the content of the table.

Note: a bad way to arrange this table is shown below.



Name Billy Bunter Dennis the menace
Tel Number 1234567 7654321
E-mail b.bunter@dandy.co.uk d.menace@beano.co.uk

Imagine trying to relate the contact details to the correct name.


Future Proofing

To future proof your tables you can use <THEAD>, <TBODY> and <TH> tags. These tags are not recognised by old browsers but inclusion in your page will future proof your code. Code Examples to follow.

<<Back to list :: Next>>

Intro | SENDA | Disabled Users | Accessible Pages | Testing | Further Info | Getting Help