HTML and CSS Reference
In-Depth Information
When it comes to writing accessible HTML, there are two steps to follow. The first step
is to use the same tags you normally use as they were intended. The second step is to
take advantage of HTML features specifically designed to improve accessibility. I've
already mentioned a number of times that tags should be used based on their semantic
meaning rather than how they're rendered in browsers. For example, if you want to print
some bold text in a standard size font,
<h4>
will work, except that it not only boldfaces
the text, it also indicates that it's a level 4 heading. In screen readers or other alternative
browsers, that might cause confusion for your users.
Tables
This problem is particularly acute when it comes to tables. I've already mentioned that
it's not a good idea to use tables for page layout when you're designing for accessibility.
Alternative browsers must generally indicate to users that a table has been encountered,
and then unwind the tables so that the information can be presented to the user in a linear
fashion. To make things easier on these users, you should use tables as intended where
you can. Even if you can't avoid using tables to lay out your page, be aware of how the
table will be presented to users. If possible, try to avoid putting lots of navigation text
and other supplemental text between the beginning of the page and the content the user is
actually looking for.
When you're presenting real tabular data, it's worthwhile to use all the supplemental tags
for tables that are all too often ignored. When you're inserting row and column headings,
use the
<th>
tag. If the default alignment or text presentation is not to your liking, use
CSS to modify it. Some browsers will indicate to users that the table headings are dis-
tinct from the table data. Furthermore, if you label your table, using the
<caption>
tag is
a better choice than just inserting a paragraph of text before or after the table. Some
browsers indicate that the text is a table caption.
Finally, using the
summary
attribute of the
<table>
tag can be a great aid to users with
alternative browsers. How you use the summary and caption are up to you. The caption
can explain what the table contains, and the summary can explain how the data in the
table is used if it's not obvious from the row/column headings. Here's an example of a
table that's designed for accessibility:
<table summary=“This is the famous Boston Consulting Group Product
Portfolio Matrix. It's a two by two matrix with labels.” border=“1”
cellpadding=“12”>
<caption>
Boston Consulting Group Product Portfolio Matrix
</caption>
<tr>
<td colspan=“2” rowspan=“2”><br /></td>
