Title attribute on Close button anchor disappears on hover

Page: 1

Author Post
Member
Registered: Aug 2013
Posts: 4
I've recently upgraded our site to Floatbox 5 (from 3), and it's gone mostly well. I'm troubleshooting some lingering accessibility issues, though, and I'm seeing something very strange:

VoiceOver (the screen reader in MacOS) reads the link for the Close button as the href path rather than the title. This appears to be because once the Close button has hover, the title attribute disappears. This can be observed here using a DOM inspector.

I've looked at the element in Chrome's dev tools, and it appears that floatbox.js is the only script acting on that element.

Thanks for any assistance.
Administrator
Registered: Aug 2008
Posts: 3382
This is true not just for the close button, but for all the Floatbox controls that have system tooltip hints attached. This includes the close, outerClose, previous, next, play, pause, and resizer controls. They are initially assigned title attributes so that mouseover on those controls will display small keyboard navigation hints in the system tooltips. When a hint has been displayed in a system tooltip for 1.6 seconds, the title attribute is removed because it's irritating and unaesthetic to have those hints continually pop up as the mouse is moved around.

The content of those hint tooltips is taken from the language localization files in the floatbox/languages folder. As an example, the temporary title of the "next" button in English is "Next (key: -->)". I'm not so sure that's a particular useful string for a screen reader to be reading, or indeed how it would pronounce it. The "Next" part is fine, but the stuff after that could be confusing. The href isn't a terrible piece of text to read for the close button. It's the URL of the underlying page, and when you hit the close button you return to the context of that page.

This tooltip hint management strategy has been in place since Floatbox was a wee baby, including version 3 that you were using.

Accessibility is an important aspect of Floatbox. It's the only such library that pays attention to keyboard navigation (including proper tab-stops and tab/enter key navigation), assignment of "alt" content attributes, and the ability to sequence dynamic content properly for US section 508 compliance. In this spirit, I'll look at splicing the first word of the title/tooltip hint strings into the link html in such a way that it won't be visible on the screen. The close link would look something like <a href="basePage.html" title="">Close</a>, in whatever localized language is active. If this can be done without disrupting the standard browser visuals it should be enough to keep the screen-readers off my back.
Administrator
Registered: Aug 2008
Posts: 3382
I almost forgot! There's a showHints options which if set to "yes" will cause the title attributes to persist and not be removed. The default for showHints is "once".
Member
Registered: Aug 2013
Posts: 4
Thanks for that. :-) You just spared me from hacking up the floatbox core.

Page: 1