WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard accessibility of abbreviations

for

From: Nasrin.Saef
Date: Apr 16, 2015 7:51AM

> The first time an uncommon abbreviation is used in a page provide the
> expansion:
> example:
> <abbr>W3C</abbr> (World Wide Web Consortium)
> subsequent instances may include the expanded form in the title <abbr title="World Wide Web Consortium">W3C</abbr>
> This means it will be available to all by default, without any need for complicated solutions.

That is actually done wherever feasible, so f.i. not in headings. Most of the abbreviations used in headings are repeated with their expanded form in the text right after, though. I see two drawbacks in leaving everything the way it currently is:

1) It's impossible to outrule human error; someone can always forget to mention the expanded form once, maybe because it's common in their field but not for the occasional layman looking for information.

2) I am such a layman in medicine issues. Before I started working here I knew pretty much none of the abbreviations frequently featured on our website, and even now if I try to read a text anywhere on it, chances are I forgot what most of them mean by time they're mentioned a second time. Without the mouseover I'd frankly just skip most of them and not really get the text, then realize I understood nothing, scroll back up, and try once or twice more.
I realize our js-implementation is only of limited use in that case too, because it's only supposed to show up the first time an abbreviation is used. But having no mechanism at all to offer the expanded form, on a site containing as many abbreviations as ours does, seems unsatisfactory as well. (Sadly "write simpler texts/use less abbreviations" isn't really an option.)

> But does the abbr element work for keyboard only users?
> How does it work visually?
> If you put the abbreviation with a title, you would only see it with either a screen reader that supports it, or if you hover over the
> term with the mouse.

Normally it only works on mouseover, yes, which is what we try to circumvent with a bit of scripting. It's not perfect - no js and it obviously doesn't work, and there's at least one bug in Chrome -, but overall it works like this: the first use of each abbreviation is included in the tab order (tabindex="0"), and when it has focus a small, pop-up like box appears above it and offers the expanded version.

Thanks for your replies!
Nasrin