ptg16476052614 LESSON 22: Designing for User Experience
it also indicates that it’s a level 4 heading. In screen readers or other alternative browsers,
that might cause confusion for your users. So if all you need is the text to be bold, use the
CSS font-weight property.Tables
Accessibility issues are particularly difficult when it comes to tables. I’ve already men-
tioned 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 for
tabular data where you can. If you can’t avoid using tables to lay out your page, make
sure to indicate it’s a presentation table with the role="presentation" attribute and be
aware of how the table will be presented to users.
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 distinct
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 brows-
ers indicate that the text is a table caption.
Here’s an example of a table that’s designed for accessibility:
<p>This is the famous Boston Consulting Group Product
Portfolio Matrix. It's a two by two matrix with labels.</p>
<table border="1" cellpadding="12">
<caption>Boston Consulting Group Product Portfolio Matrix</caption>
<tr>
<td colspan="2" rowspan="2"><br></td>
<th colspan="2">Market Share</th>
</tr>
<tr>
<th>High</th>
<th>Low</th>
</tr>
<tr>
<th rowspan="2">Market Growth</th>
<th>High</th>
<td align="center">Star</td>
<td align="center">Problem Child</td>
</tr>
<tr>
<th>Low</th>
<td align="center">Cash Cow</td>
<td align="center">Dog</td>
</tr>
</table>