Improve accesibility in pager.inc

Do you know how to add a patch? Or a diff between the existing code?

Interested in seeing more, but don't have enough to run with here.

Mike

The pager in d7 does use a list to represent the links to different pages. The pager, however, does not have a heading to give context to the list of links.

The attached patch adds a h2 before the list of pager links styled with .element-invisible with the heading text "Pages".

Installed and tested this patch. Worked great. This is a simple addition of an invisible heading for screen readers. I think this is RTBC!

+1

Forgot to wrap the heading text in a t() function. Will reroll the patch

Updated patch with t() for the heading text.

I think this is RTBC.

As a summary, screen reader users do not get the context that visual users have that the pager is the last item in a series of content items. Adding this means that it is clear what the purpose of these links is, and also makes it easier to skip to if jumping from heading to heading with the screen reader looking for a specific post (that happens to be on the second or third page).

+1. I agree with RTBC.

This is an appropriate use of headings with element-invisible. Without this patch, JAWS says something like, "List of 7 items bullet link 1 bullet link 2 bullet link 3 ... bullet link 5 bullet link next," but there is no context for what that means, as Owen said.

This patch correctly adds the heading, and h2 is the appropriate level. JAWS says, "Heading level 2 Pages list of 7 items bullet link 1 ...." The patch causes no visual changes (tested in Firefox 3.5, Safari 4, IE 6 and IE 7 for Garland, Seven and Stark).

See the updated Accessibility section of the Theme Guide: http://drupal.org/node/561750
See also the page on Techniques for Hiding Content: http://drupal.org/node/472572

P.S. Later I suggest we add heading functionality into theme_item_list() as well as theme_menu_tree() like we have done in theme_links(). The best way might be to create a theme_heading() function that all these call. We can factor this functionality out of theme_breadcrumb() and simply call theme('heading'). That gives consistent ability for developers to override the heading level, heading text, or add their own CSS classes.

@Brandon

Agreed that we might want to work on a more generalized method for providing menu, and list headings in the future. Wouldn't want headings to be overused where they are not useful though.

Just curious: is that the way Google does it too? They have a pager link on virtually every search result page. I assume they spent a lot of time getting to the most accessible solution?

@Dries

Sadly I don't think that Google has done all that good a job at finding the most accessible solution. Heck, when I looked at the source the pagination was still done within a table.

But probably worse than that it doesn't contain valid HTML according to http://validator.w3.org

There were lots of accessibility problems according to the FAE evaluation - http://fae.cita.uiuc.edu/report/123dcc98bb3144f4/

The pagination didn't come up as a problem with this accessibility tool:
http://wave.webaim.org/report?url=http%3A%2F%2Fwww.google.com%2Fsearch%3...

But it's less useful. The addition of this header provides landmarks to allow blind users to easily know where the pagination sits in a river of data.

Although far from perfect in it's implementation of pagination (from my review) it is consistent in where it is. Unfortunately with Drupal sites we can't rely on the pagination being in the same spot in the page.

@Dries

Google is not typically a good point of reference for proper implementation of accessibility techniques.

The pager on google search results pages is currently read as "link 1, link 2, link 3, ... link next", similar to the way that head is currently functioning. If Google were to as me I would recommend that they also implement a heading befor their pager, as this would provide easier access to the list of pager (navigational) links.

Just re-rolled this patch to address a change in the line that was being returned.

In response to this I decided to also try to petition Google to follow W3C standards including WCAG as everyone uses them as a web standard -> http://act.ly/nh

Should be good to include now.

not sure why this isn't tagged

Setting back to RTBC. This is simply a re-roll of the previous patch above in 7. This is a helpful accessibility improvement.

Tests passed:

• Correctly adds the invisible h2 to pagers (such as /admin/reports/dblog pager)
• No visual change at all
• Verified in Firefox 3.5 on Mac and WinXP, Safari 4 on Mac, and IE 7 on WinXP
• Verified in Seven, Stark, Garland and Minnelli
• Plus I reviewed the code (all 1 lines of it) and it looks good

This was first RTBC now over a month and a half ago. - Bump!

Committed to CVS HEAD. Thanks!

Thanks! Glad this one's in core!