Working with Content
Overview
Now that you understand how to create an accessible Shell that uses Included Content and User-Friendly Navigation, we need to examine some common issues with content. In this section, we will discuss how to create accessible site content.
Tables
Tables are perhaps one of the most problematic areas for web accessibility. The most important thing to remember about tables, is that they should primarily be used to display data, and not for page layout. Here is an example of a data table that is used properly, and tagged appropriately for accessibility.<tr>
<th id="office">Office</th>
<th id="phone">Phone</th>
<th id="email">E-Mail</th>
<th id="city">City</th>
</tr>
<tr>
<td headers="office">
Abingdon Office
</td>
<td headers="phone">
(276) 676-5565
</td>
<td headers="email">
overbala@drs.state.va.us
</td>
<td headers="city">
Abingdon
</td>
</tr>
</table>
There are several things that set this table apart from a 'basic' table. The first is the summary tag. The summary should be a short statement that defines what the table contains. The next item is the definition of an ID for each Table Header Cell (TH). The ID allows Table Data Cells (TD) to be defined as 'belonging' to that column through the use of a HEADERS tag.
This setup is important because Screen Reader software reads tables in a linear format. That is, top to bottom and left to right. In this instance, the table would read:
"Table: Offices Listing. Office: Abingdon Office. Phone: (276) 676-5565" and so on. Otherwise, the table would be read in the order in which the items appear:
"Table: Office, Phone, Email, City... Adingdon Office, (276) 676-5565" and so on. See the difference? Without the correct definitions for each column and data cell, data in longer tables would become disassociated with the appropriate headers. This would be particularly troublesome if you use a screen reader or similar product for visual or cognitive issues.
The table with the accessible markup is displayed as:
| Office | Phone | City | |
|---|---|---|---|
| Abingdon Office | (276) 676-5565 | overbala@drs.state.va.us | Abingdon |
Considering also that we have basic styles for generic tables in our CSS. Those styles look like:
{
border-collapse:collapse;
margin-bottom:10px;
}
th
{
text-align:left;
font-weight:bold;
background-color:#E7E7E7;
border:2px solid #0D2E7D;
}
td
{
border:2px solid #0D2E7D;
}
Fonts
The font tag is officially deprecated by the W3C. This means that it should not be used any longer. The style sheet is used to denote font types and sizes for each section of the site.
Images
Images should be used when they help represent something of importance on the page. When an image is used, the proper alternative text for that image should be added. The ALT text should describe what the image IS, not what the image DOES. An example would be:
Which would be displayed on the page like so:
