Issue:
It can be difficult for screen-reader users to determine the role / purpose of links in a breadcrumb trail because there is no semantic markup to indicate the role or purpose of the links.
Recommendation:
Provide semantic markup to identify role / purpose of breadcrumb links. Possibly by hiding this information offscreen using classes defined in #473396: Defining System-Wide Approaches to Remove, Make Invisible & Push Content Off-screen with CSS.
Example:
or,
{breadcrumb markup}{
Resources:
theme_breadcrumb - http://api.drupal.org/api/function/theme_breadcrumb/7
G65: Providing a breadcrumb trail (Techniques for WCAG 2.0) - http://www.w3.org/TR/WCAG-TECHS/G65.html
Preferred breadcrumb implementation (WebAIM discussion list) - http://www.webaim.org/discussion/mail_message.php?id=8971
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | breadcrumb_heading_3.patch | 1.72 KB | mgifford |
| #5 | breadcrumb_heading_2.patch | 1.7 KB | mgifford |
| #4 | breadcrumb_heading_1.patch | 1.76 KB | Everett Zufelt |
| #1 | issue-526674.patch | 1.31 KB | Everett Zufelt |
Comments
Comment #1
Everett Zufelt commentedThis patch adds semantic markup to provide information for screen-reader users to define the role of the list of links in the breadcrumb.
1. modified includes/theme.inc: theme_breadcrumb() and themes/garland/template.php: garland_breadcrumb() to add an invisible span with the text "You are here:".
Example from theme.inc:
2. Using CSS style class "visibility-invisible" being defined in #473396: Defining System-Wide Approaches to Remove, Make Invisible & Push Content Off-screen with CSS this text will only be presented to screen-reader users.
Comment #2
Everett Zufelt commentedComment #4
Everett Zufelt commentedRerolled the patch.
This patch provides a h2 heaing with the text "You are here", made invisible with .element-invisible, directly before the breadcrumb liks in includes/theme.inc and themes/garland/template.php
Comment #5
mgiffordSmall correction in this patch. Like how this is done with the simple "You are here" text.
Great that it's following the example set with WebAim:
http://webaim.org/blog/screen-reader-testing-is-back-in-style/
Works fine in Garland & Seven with this new patch.
+1
Comment #6
owen barton commentedNote that some usability experts (e.g. Crug) recommend using "You are here" in front of breadcrumbs for ALL users (i.e. including visual users).
This may need to be determined on a site by site basis (since on simple, flat sites breadcrumbs are perhaps not as important) but I think it is worth considering. Perhaps the core theme function could make it visible, but Garland could add the element-invisible class since the most common out of the box Garland site is quite simple.
Comment #7
mgiffordI'm not sure that most designers would want to see that there. I think the usability thing should come as a separate issue. It probably would improve everyones experience though.
I had to wrap this as we forgot the t()
Comment #8
Everett Zufelt commented+1 to the patch in #7. I agree that we should check with the usability folks about making the heading "You are here" visible to all, but that this should come in a separate issue.
Comment #9
bowersox commented+1 for the patch in #7. The code and the comment look good to me. I tested and confirmed it works and has no visual impact in:
Again, the justification for using element-invisible and
h2applies to this just like #515236: theme_status_messages needs additional markup to be more apparent to assistive technology users and others.Comment #10
Bojhan commentedThis should not be visible for anything but screenreaders, it should be appear ant and has become a standard over the years. On the semantic value of this change I cannot judge.
Comment #11
mgiffordThis particular patch is just for accessibility and shouldn't affect usability. Don't think there's any reason to wait before marking this RTBC.
If the "You are here" is to be visible then it should be another issue and should undergo a usability review. I like the idea, but it should be a separate issue.
Comment #12
dries commentedLooks good. Committed to CVS HEAD.
Comment #13
Everett Zufelt commented@Dries
Does this issue need documentation, if so where? Setting to NW awaiting answer on documentation.
Comment #14
Everett Zufelt commentedAdded docs to http://drupal.org/update/theme/6/7#theme_breadcrumb-heading
Comment #16
liam morlandComment #17
RedTop commentedThe current output results in a warning when validating against WSCAG 2.0 AAA, recommending the breadcrumb to be output as a list.
Solution
Found here:
http://www.otakunozoku.com/php-imploded-wrap/
My apologies for not providing a patch, still only just venturing into developer territory...
Comment #18
mgiffordWCAG 2.0 AA is presently the goal for Drupal. But no reason we can't exceed it. Moving this to d8 and making it a feature request.
Comment #19
Everett Zufelt commentedThis is somewhat related to the original issue, but is a new request. Please open a new issue, in which you can reference this issue.
Comment #20
liam morlandDrupal 8 is already as suggested.
Comment #21
mgiffordJust opened a new issue #1687864: Bring theme_breadcrumb() up to WCAG 2.0 AA it is really the right thing to do. This issue was fixed for D7 and makes sense to make this a new request.