abbr and the title attribute

#html #accessibility #small-print

I keep <abbr> in the rotation because it’s one of the only places where the title attribute is worth using.

Take <abbr title="Doctor of Dental Surgery">DDS</abbr>. The expansion is the point of the element, not a tooltip tacked onto it. Screenreaders will generally announce the long form instead of the short one.

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

So I think the rule is to expand it in the prose the first time and then use the element for the ones after. The markup is for the machines and the mouse, but the sentence is for everybody.

I’ve written <abbr> into a practice’s site maybe six times and nobody has ever mentioned it in either direction. Nobody asks for it and nobody removes it. It just sits there being correct, which is most of why I like it.

Read similar posts

View posts by tag

#accessibility #agency #ai #careers #cross-browser-compatibility #css #culture #debugging #documentation #ecommerce #forms #git #html #images #javascript #performance #php #privacy #scss #security #shopify #small-print #tooling #typography #wordpress