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
- Give the control a proper label: visible text where possible, or an
aria-label(oraria-labelledbypointing at existing text) for icon-only controls. - If the control has both a
titleand anaria-labelthat disagree, pick the more useful wording and use it everywhere. Usually the cleanest fix is to delete thetitleand letaria-labelcarry the description. - Keep
titleonly for genuinely supplementary detail. It must never be the only way to learn what a control does.
How Silktide tests this
- Find the visible buttons, links, and disclosure controls on each page,
including elements with
role="button"orrole="link". - For each control with a non-trivial
titleattribute, check whether it has any other labelling: visible text, image ,aria-label, oraria-labelledby. - Report controls whose only label is the
titleattribute. - Where a control has both a
titleand an explicitaria-labeloraria-labelledby, compare the two and report them when they say substantially different things. If one simply extends the other (atitleof "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.