← All writing
Craft · · 2 min

abbr and the title attribute

HTML Accessibility Small Print

I keep <abbr> in the rotation because it is one of the only places the title attribute earns its keep.

<abbr title="Content management system">CMS</abbr>. The expansion is the point of the element, not a tooltip bolted onto it, and screenreaders will generally announce the long form in place of the short one.

The catch is the same catch title has everywhere. There is no keyboard path to it. No focus, no long-press on a phone, nothing. So the expansion is available to somebody hovering a mouse and to somebody using a screenreader, and unavailable to everybody in between, which includes a person on a phone, which includes most people.

Which means the honest rule is: expand it in the prose the first time, then use the element for the ones after. The markup is for the machines and for the mouse. The sentence is for everybody.

I have written <abbr> on client work maybe six times and I have never once seen it come up in a review, in either direction. Nobody asks for it and nobody removes it. It just sits there quietly being correct, which is most of why I like it.

Read similar posts
2 min

details and summary

An accordion with keyboard support, correct announcement and no JavaScript at all, which most of us reimplemented by hand for about a decade before noticing.

2 min

fieldset and legend

A group of radio buttons has a question attached to it, and the question needs to be in the markup rather than in a heading that happens to sit nearby.