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.

• Demo: nfreear.github.io/fix-title-attr

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/[email protected]/style">

<script type="importmap">
{
  "imports": {
    "fix-title-attr": "https://esm.sh/[email protected]?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.