When used with the Advanced books block module I noticed that the Jquery Menu module uses empty span tags to place the plus and minus symbols in the expandable menus.

This creates accesibility errors/warnings, and I found it was simple to overcome this by adding a simple plus sign into the empty span tag.

Change this line in the in the jquerymenu.module file;

$plus = '' : ' class="'. implode(' ', $classes) .'">') .'';

to simply this;

$plus = '' : ' class="'. implode(' ', $classes) .'">') .'+';

Then to remove the + sign using CSS add this line of code to the jquerymenu.css file;

.parent span {
text-indent: -10000px;
}

CommentFileSizeAuthor
#4 jquerymenu-span-a11y-4.patch650 bytesmgifford
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

m_d_mcbride’s picture

$plus = '<span'. (empty($classes) ? '>' : ' class="'. implode(' ', $classes) .'">') .'</span>';

to simply this;

$plus = '<span'. (empty($classes) ? '>' : ' class="'. implode(' ', $classes) .'">') .'+</span>';

mgifford’s picture

Issue tags: +Accessibility

adding accessibility tag

Pat Redmond’s picture

Status: Active » Closed (won't fix)

Closing due to age. Let me know if this is still a problem with the most recent version of the module.

mgifford’s picture

Version: 6.x-2.3 » 7.x-3.x-dev
Status: Closed (won't fix) » Needs review
FileSize
650 bytes

I confirmed that this is still the same issue in D7 so rolled a patch against it. Hopefully that helps move this issue ahead. Empty spans/links/headers are a problem for accessibility.

Pat Redmond’s picture

Can you send me some info on how empty span tags affect accessibility? Everything I can find suggests it is OK. I'm not a usability expert, so I'm happy to be swayed.
Specifically, what I've found says that absolute positioning of elements (such as the CSS code above) is actually less beneficial that other techniques.

I am about to release a new dev version, which includes text for screen readers. Hopefully that will make the module more accessibility friendly.

mgifford’s picture

Hey Pat, great to hear you're looking at this on the dev version. I haven't tested this solution and was mostly re-rolling this patch against D7 as the issue remained.

There's a lot of work going on in this in D8 right now. Things like this where an empty link is used & then javascript is used to modify the element:
http://drupal.org/node/1719640#comment-6339978

That's not the best example, but it was handy. The WAVE Toolbar is great - http://wave.webaim.org/toolbar

Often without some text within a link it is impossible to navigate to a link without a mouse. It's possible that this technique isn't be best, but I would encourage you to share your links. There are lots of opinions on the web as you know. Lots are contradictory.