0

The HTML5 element abbr is used to mark-up abbrevations and acronyms.

Unfortunately, the spec only gives examples for the acronyms "WHATWG", "WG" and "IOFGA".

There are words that are not wholly abbreviated, for example:

  • etc.
  • HTML5

Examples with alternatives:

<abbr title="et cetera">etc.</abbr>
<!-- or -->
et<abbr title="cetera">c.</abbr>

<abbr title="HyperText Markup Language 5">HTML5</abbr>
<!-- or -->
<abbr title="HyperText Markup Language">HTML</abbr>5

I'm not necessarily looking for pragmatic answers, I'm more interested in semantic, specification and accessibility point of views.

For example, I'd like to know what all the different screenreaders would read (if they are configured to announce abbreviations at all, which is at least for Jaws not the default).

unor
  • 92,415
  • 26
  • 211
  • 360

1 Answers1

3

You should use <abbr>etc.</abbr> and <abbr>HTML5</abbr>.

There is very little support for the <abbr> tag in screenreaders -- It is not clear what support there should be: expanding HTML5 to Hypertext Markup Language 5 every time it is read would be fairly annoying.

For ChromeVox at least [which I'm most familiar with], writing et<abbr>c.</abbr> would cause the screenreader to send two utterances to the Text-to-Speech engine: 'et', 'c.' which sounds different than the expected 'etc.'.

Breaking on words is fine: <abbr>NASA</abbr> <abbr>JPL</abbr>, but breaking in the middle of words is not expected.

James deBoer
  • 2,477
  • 15
  • 17