Skip to content
SilktideHelp

Title attribute labelling

Silktide checks the buttons and links on your pages for controls that depend on the title attribute to explain what they do. Browsers show title only as a delayed tooltip when a mouse pointer hovers over the element, so most people never see it.

<!-- Problem: the tooltip is the only label -->
<button title="Close"><svg>…</svg></button>

<!-- Fix: give the control a real accessible name -->
<button aria-label="Close"><svg>…</svg></button>

Why this matters

A title tooltip appears only for mouse users, and only after a delay. Keyboard users, touch and mobile users, and most users never receive it, so a control labelled only by its title is a mystery button for a large share of your visitors. Screen readers also handle title inconsistently - some read it, some ignore it - which makes it unreliable even for the users it nominally serves.

When a control has both a title and a different , the problem is consistency: a mouse user briefly sees one description while an assistive technology user hears another, and the two drift further apart as the page is maintained.

How to fix it

  1. Give the control a proper label: visible text where possible, or an aria-label (or aria-labelledby pointing at existing text) for icon-only controls.
  2. If the control has both a title and an aria-label that disagree, pick the more useful wording and use it everywhere. Usually the cleanest fix is to delete the title and let aria-label carry the description.
  3. Keep title only for genuinely supplementary detail. It must never be the only way to learn what a control does.

How Silktide tests this

  1. Find the visible buttons, links, and disclosure controls on each page, including elements with role="button" or role="link".
  2. For each control with a non-trivial title attribute, check whether it has any other labelling: visible text, image , aria-label, or aria-labelledby.
  3. Report controls whose only label is the title attribute.
  4. Where a control has both a title and an explicit aria-label or aria-labelledby, compare the two and report them when they say substantially different things. If one simply extends the other (a title of "Search" with a name of "Search now"), that is not reported.

Form fields such as <input> and <select> are not tested by this check; their labelling is covered by form control labels.

Troubleshooting

The title attribute is required on iframes

Correct - title on an <iframe> is the standard way to name it, and this check does not test iframes. It only tests interactive controls like buttons and links.

My tooltip adds useful extra information

That is a legitimate use, as long as the control also has a real label. This check only reports controls where the title is the only label, or where it contradicts the accessible name.

Learn more

Last updated

Was this page helpful?