Using the HTML ABBR and ACRONYM Tags to Increase Accessibility

Donald F. Evans

April 16, 2006

Question

How can I make abbreviations and acronyms easier for the screen reader to read? The screen reader will often times try to speak an abbreviation as a word. So, "fyi" becomes something like "foyia" when read by the screen reader. And sometimes I don't have enough room in table headers to completely spell out a word, so I use Desc. to mean description.

Answer

Many people who use screen readers have learned some of the more common abbreviations and they way their screen reader will read them, but that is no excuse. We should make sure that our HTML is easy to read. And it doesn't take a lot of effort to add an ABBR or ACRONYM tag.

There are many places where you might use an abbreviation or an acronym. By using them in the text of documents, table headers, select drop downs and form labels you will increase the usablility of your documents.

Screen readers have some abbreviations reading capability built in and will speak them if they recognize them. As an example, Jaws with say "For Your Information" when it finds an "FYI". Be careful, Jaws will not understand "fyi", it has to be in all caps.

Note:

Jaws users will have to set their screen reader to be able to hear these tags. It is not the default setting. They will need to go to "Utilites" -> Configuration Manager -> Set Options -> HTML Options -> Text and check the Expand Abbrevations and Expand Acronyms check boxes.

Screen Shot Showing the Jaws HTML Options Configuration Screen

Note:

Avoid using the ABBR attribute of the TH tag, use the ABBR tag itself: 

NOT Correct
<table>
  <tr>
    <th abbr="virginia">va</th>
  </tr>
</table>

Correct
<table>
  <tr>
    <th><abbr title="virginia">va</abbr></th>
  </tr>
</table>

Examples

Other Resources