fix-title-attr

Make HTML title attributes more accessible, using the Popover API and CSS anchor positioning.

Used in Dive Into Accessibility archive (repo).

Suitable where you have legacy content.

Why?

Using the title attribute in HTML can be thought of as an anti-pattern, as it actively excludes multiple groups of users, including keyboard users, mobile/ touch users, screen reader users (mostly) and so on.

Further reading

• Accessibility concerns - title - Mozilla Developer Network
• Using the HTML title attribute – updated March 2020, by Steve Faulkner, TPGi
• Tooltips & Toggletips, by Heydon Pickering, Inclusive Components (2017)
• The Trials and Tribulations of the Title Attribute, by Scott O'Hara (2017)

Usage

JavaScript and a CSS stylesheet are available via the esm.sh CDN:

<link rel="stylesheet" href="https://esm.sh/gh/nfreear/fix-title-attr/style">

<script type="importmap">
{
  "imports": {
    "fix-title-attr": "https://esm.sh/gh/nfreear/fix-title-attr?raw"
  }
}
</script>

For HTML like the following:

<main>
  <a href="…" title="I'm a title attribute">Hello</a>
  <abbr title="hypertext markup language">HTML</abbr>
  …
</main>

Use JavaScript like this:

import fixTitleAttributes from 'fix-title-attr';

fixTitleAttributes({
  titleSelector: 'main [ title ]'
});

You can vary the titleSelector option to suit your website. For example:

fixTitleAttributes({
  titleSelector: '#main [title], .full-page-2 [title]' // …
});

And, you can adjust or translate the "More info on %s" phrase used by the library (%s is a placeholder). To translate to French, for example, do this:

fixTitleAttributes({
  moreInfoText: "Plus d'informations sur %s"
});

License

Released under an MIT license.