Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
The current links are '(-)'. This fails WCAG 2.0 A "Link Purpose (In Context)":
http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs
I also see it as a usability problem, because:
- It's not obvious what clicking the link will do
- It's a smaller-than-necessary click target
Comment | File | Size | Author |
---|---|---|---|
#17 | theme_facetapi_link_active-1316580-3.patch | 615 bytes | daniel.nitsche |
#9 | theme_facetapi_link_active-1316580-2.patch | 603 bytes | daniel.nitsche |
#4 | facetapi-a11y.jpg | 141.41 KB | cpliakas |
#1 | theme_facetapi_link_active-1316580-1.patch | 1 KB | daniel.nitsche |
Comments
Comment #1
daniel.nitsche CreditAttribution: daniel.nitsche commentedSubmitting suggested patch. This version produces more accessible links, but it might be too verbose for the default. I'd suggest hiding the @name using
<span class="visuallyhidden"></span>
if this is the case.Comment #2
cpliakas CreditAttribution: cpliakas commentedHi daniel.nitsche.
Thanks for bringing up this very important topic. As a result, I added an "Accessibility" component to which I am assigning this post. I definitely want to resolve this issue, but I am marking this patch as "needs work" for a few reasons.
Thanks again for posting the patch, and I look forward to working together on this issue.
~Chris
Comment #3
Everett Zufelt CreditAttribution: Everett Zufelt commentedI haven't taken a look at the patch, and don't completely understand the problem based on the issue summary.
I can say that using the title attribute is almost never a sufficient method of ensuring accessibility, as most screen-readers, and no keyboard only users, can access @title.
If someone can show an example of current markup, and the problem, I can make more detailed recommendations.
Comment #4
cpliakas CreditAttribution: cpliakas commentedThanks, Everett. See the attached image for the current state of things.
~Chris
Comment #5
Everett Zufelt CreditAttribution: Everett Zufelt commentedHi Chris
I am actually completely blind and using a screen-reader. Can you please provide a clear and detailed description of the image you attached. Or, an example of current markup and a description of the problem?
Thanks,
Everett
Comment #6
cpliakas CreditAttribution: cpliakas commentedSorry for unintentionally making assumptions in my post. I guess that is why there are accessibility issues :-)
In terms of how Facet API works, when you execute a search you are presented with items that you can filter by. These might be taxonomy terms, content types, field data, whatever. The display is configurable via Facet API's widget system, and the most popular method is presenting the items as an unordered list of clickable links. The text inside the link is the facet item's display value, for example the name of the content type, followed by an integer in parenthesis denoting the number of results the facet item is present in. An example of the markup for inactive facets is
<li class="leaf"><a href="/search/site/mykeys?f[0]=bundle%3Aarticle" class="facetapi-inactive">Article (77)</a></li>
.Clicking on an item's link activates the filter which narrows the result set by whatever criteria is selected. From a display standpoint, the text is no longer wrapped in a link, but it it preceded by a link with the text "(-)" to remove the filter. An example of the markup for active facets is
<li class="leaf first"><a href="/search/site/mykeys" class="facetapi-active">(-) </a> Article</li>
.Thanks for reviewing,
Chris
Comment #7
daniel.nitsche CreditAttribution: daniel.nitsche commentedHi Chris,
I'm not sure I agree that the link in question is a control, although I couldn't find anything in WCAG 2 that says a link can't be a control. More importantly however, the current link does pose a real accessibility problem.
Two examples using a screenreader (JAWS):
(where "parent" is short for parenthesis).
Sighted users have the advantage of seeing the link directly next to it's label, and also may have the advantage of recognising the dash with parenthesises as representing "remove this filter" functionality. Screenreader users will be forced to interpret "left parent dash right parent".
I understand not wanting to change the standard UI unnecessarily, which is why I thought the submitted patch might be a bit to verbose. I'll submit another one shortly which should meet accessibility, but not introduce too dramatic a change.
Dan
Comment #8
Everett Zufelt CreditAttribution: Everett Zufelt commentedMy suggestion would be to.
1. Use a CSS background image for the (-) and then use a span with invisible text that matches the title attribute of the image.
E.g.
Alternatively, you can keep the (-) in the markup, but outside of the span.
.element-invisible is a D7 system class to hide content visually, but to keep it available to screen-readers / DOM.
Comment #9
daniel.nitsche CreditAttribution: daniel.nitsche commentedHere's my second attempt. Visually, it should look the same, but should provide some helpful link text to screenreaders. The "visuallyhidden" class used in the last patch is actually an HTML5 boilerplate class, "element-invisible" is the default drupal one.
Sorry about the last patch not being from the root of the module directory -- it was my first submitted patch. This will also explain if there are any violations of the drupal coding standard in this patch -- I'm still working on getting an IDE sorted locally.
Comment #10
daniel.nitsche CreditAttribution: daniel.nitsche commentedYou just beat me to it :)
Comment #11
Everett Zufelt CreditAttribution: Everett Zufelt commentedLooking good. Two thoughts.
1. there should be a space at the end of the content within the span, or it will run into the (.
2. I think that the (-) should preceed the accessible text, at least in English. Can we throw (-) into the t() so that translations can place the (-) appropriately?
Comment #12
daniel.nitsche CreditAttribution: daniel.nitsche commentedI'll wait for Chris to comment on how he'd like to proceed.
Comment #13
cpliakas CreditAttribution: cpliakas commentedThanks for the feedback and taking the time to help me better understand the issue. I think the approach mentioned in #8 is the way I would like to attack it, keeping the "(-)" in the markup but outside of the span. The patch in #11 looks good and I like the use of t(), I just want to make 100% sure we aren't introducing any security vulnerabilities by always setting the html key to TRUE when building the link. Other than that I think we are getting close. Bumping up the priority and changing status to "needs review".
Comment #14
cpliakas CreditAttribution: cpliakas commentedThe patch in #9 looks good to me, and the values are properly escaped. I think we should incorporate the recommendations made by Everett in #11, and then this issue will be RTBC in my book. Care to cut another patch Dan? Would like to get you in as the 9th committer.
Thanks guys,
Chris
Comment #15
cpliakas CreditAttribution: cpliakas commentedAlso, if you could add a
// @see http://drupal.org/node/1316580
comment, that would be helpful for future reference.Comment #16
cpliakas CreditAttribution: cpliakas commentedBumping to the "low hanging fruit" list.
Comment #17
daniel.nitsche CreditAttribution: daniel.nitsche commentedHere you go. Everett's first point no longer applies, because I've taken his second point and moved the span to the end of the text.
Happy to do another patch if I've missed something.
Comment #18
Everett Zufelt CreditAttribution: Everett Zufelt commentedHaven't tested, but looks good.
Comment #19
cpliakas CreditAttribution: cpliakas commentedThanks, Daniel!
I am on a mini-vacation and will test early next week, but this looks good to me.
Great work,
Chris
Comment #20
cpliakas CreditAttribution: cpliakas commentedPatch looks great! Marking as RTBC. Great work Everett and Daniel.
Comment #21
cpliakas CreditAttribution: cpliakas commentedCommitted at 150f01b.
Congrats on becoming the 10th committer to Facet API! Also looks like this is your first credited commit to Drupal in general, so congrats on that as well.
~Chris
Comment #23
cpliakas CreditAttribution: cpliakas commentedFollow-up issue at #1368166: Pass facet deactivation link through t() tying up some of the loose ends.