Short note: The abbreviation appreciation society

Posted on Tuesday, 12 March 2019 by Steve Faulkner

Billy Gregory presenting at Funka conference, with a huge "That #SUX" behind him.The HTML <abbr> element is deceptively familiar and attractive, its been around forever (1999) and thus people assume that it does what it does and does it well. Nothing much changed over the iterations of the abbr element definition over the years. One notable exception is that the acronym element was obsoleted in HTML5 and abbr now is used for both acronyms and abbreviations.

User Interface truth

The use of the title attribute to provide the expansion for an abbreviation is not a user friendly way to provide the expanded text, it is a method that #SUX (Some User Experience).

WHY SUX?

  • The title attribute content is only practically available to mouse users.
  • The title attribute display for mouse users with low vision is problematic, to say the least.
  • The title attribute content is available to users of JAWS and NVDA screen reader users if they enable it, by default it’s ignored.
  • VoiceOver simply does not announce the title attribute content on <abbr>
  • No amount of clever tricks with ARIA, CSS and JavaScript will make it not suck.

A solution

Provide an expansion of the abbreviation/acronym, numeronym even, in plain text on first use, use an <abbr> to mark up the abbreviation, which provides a hint to user agents on how to announce/display the content:

See the Pen
Abbreviations
by steve faulkner (@stevef)
on CodePen.

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. If the title is largely ignored, how is it harmful to keep it in (if properly textually expanded the first time)?

    For example, wouldn’t something like this be better than your proposed solution?
    <abbr>FWIW</abbr> (For What It's Worth)
    And later down the page, probably under a different heading, further down the page,
    <abbr title="For What It's Worth">FWIW</abbr>

    The user still has the possibility of seeing the expansion even if they’ve skipped the first instance (such as nav by headings).

Comments for this post are closed.