WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Marking up a 'total' or a 'count'

for

From: Joe Chidzik
Date: Jan 16, 2013 1:22AM

> My use case is a common one, I have a list of tags on a page with the number of
> occurrences for that tag in parenthesis around it:
> Tagname (5)
>
> Of course, screen readers give the '5' no context and its confusing to listen to.
> Now, the easy solution would be to wrap the 5 in a span with a title attribute, but I'm
> wondering if there is a more appropriate way of marking this up?

[Joe Chidzik] Hi Christian,
If this is a separate list of tags, with occurrences listed adjacently, perhaps a data table would be suitable. Using the column headers of 'tags' and 'occurrences', the relationship between the two components is created e.g.

<table>
<caption>Keywords and occurrences</caption>
<tr>
<th scope="col">Keyword</th>
<th scope="col">Occurrences</th>
</tr>
<td>Apples</td>
<td>(13)</td>
</tr>
...
</table>


Otherwise, rather than using a span with a title as you suggest, I would use a span with hidden content - title attribute values are often only read if explicitly requested by screenreader users. By hiding content offscreen via CSS, it is not visible on the page, but still read out by screenreader users. A useful article on this approach, and some techniques, can be seen at: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

So a sample list, including descriptive and hidden heading, might look like:
<!-- List of tags and occurcences -->
<h3 class="hidden">Keywords and their occurrences</h3>
<ul>
<li>Apples (7 <span class="hidden">occurrences</span>)</li>
<li>Pineapples (3 <span class="hidden">occurrences</span>)</li>
...
</ul>

Where "hidden" is a CSS class for hiding content offscreen but leaving it accessible to screenreader users.

These are a couple of ways to do this I can think of, though I'm sure there are more.

Cheers
Joe