«
»

Accessible HTML for X-out-of-Y Results Summaries


The project I am currently involved with at work has several paging widgets i.e. for image slideshows, search results, etc. that contain summary information such as “Showing 1/8″.

So how can this information be marked up in HTML in an accessible manner?

Well, I cannot remember where I got the inspiration for this from – if I remember I will post an update – but here is the HTML that I decided to use:

<span class="summary">
    Showing 1<abbr title="out of a total of">/</abbr>8
</span>

Pretty nifty eh?

Please let me know what you think.

,

This entry was posted on Tuesday, March 31st, 2009, 10:47 pm and is filed under accessibility. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

  1. #1 by Martin Bean - April 16th, 2009 at 17:56

    Nice solution. I encountered this problem but gave up and reverted to using just slideUp() without the fade. I shall see if I can give this a try on a future project though!

    Quote

  2. #2 by Martin Bean - April 16th, 2009 at 17:58

    Whoops! Wrong post! Any-who, nice idea. Although I can’t say I’ve ever used a slash to designate number of pages; I’ve always just gone with “Page x of y” as it seems slightly more readable then separating page numbers by a slash.

    Quote

  3. #3 by Ian - April 16th, 2009 at 21:02

    @Martin Bean: Yes, agreed – although some clients can be rather anally retentive about such things :-)

    Quote
(will not be published)
  1. No trackbacks yet.