WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 2 (In chronological order)

From: Christian Biggins
Date: Tue, Jan 15 2013 7:16PM
Subject: Marking up a 'total' or a 'count'
No previous message | Next message →

Hi All,

I'm aware of the abbr and acronym tags for text, but I dont think there is anything that would allow you to mark up a number semantically?

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?

Thanks in advance.

--------------------------
Christian Biggins

From: Joe Chidzik
Date: Wed, Jan 16 2013 1:22AM
Subject: Re: Marking up a 'total' or a 'count'
← Previous message | No next message

> 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