Web Accessibility Made Easy: Abbreviations and Acronyms

This entry in the “Web Accessibility Made Easy” series explains expanding abbreviations and acronyms so that, for instance, all users know that ARIA means Accessible Rich Internet Applications and not Automated Robot Integration Assembly.


When web designers use the <abbr> or the <acronym> HTML tags, abbreviations and acronyms will be read as their full text. However, this is only true if the user has set their screen-reading software to do this. Web designers need to set the title attribute of the <abbr> or <acronym> tags to the actual meaning of the phrase. See code example below.


<acronym title=”Web Content Accessibility Guidelines”>WCAG</acronym>

Using this method a web designer complies with the guideline below. However, as mentioned above this coding only provides the desired result if the screen reader user has set their preference (settings) to automatically voice the entire text of the acronym or abbreviation tags. Therefore, as is common writing practice, it is important that for the first use of a phrase which will subsequently be represented by an acronym or abbreviation, that the phrase be entirely spelled out and followed by the desired acronym or abbreviation in parenthesis (e.g., World Wide Web (WWW). For subsequent uses the acronym or abbreviation tag should be used. Then, for screen reader users who have set their preferences correctly, the entire phrase will be spoken.


IU Web Accessibility Guidelines

2. Specify the expansion of abbreviations or acronyms where they first occur in a document.

This guideline requires that the first time an abbreviation is used, it is expanded. Common writing practice is that the first time a name or phrase is used for which an acronym will be used later, the words should be spelled out followed by the acronym in parenthesis. Web coding should employ this same practice. After the first instance, it is up to the web designer to decide whether to continue to use the <abbr> or <acronym> tags to expand the phrase.


This tutorial will again be using the Bad example web page, Good example web page, their associated stylesheets and Dreamweaver.

1. The Bad Code – Acronyms not Expanded

<p>Web accessibility standards have been developed by the W3C (http://www.w3c.org)</p>

The code shown above will validate to the W3C standards. However, since this is the first instance of an acronym, it needs to be expanded.

2. The Good Code – Acronyms Expanded

Example 1…First Instance of the use of a phrase for which an acronym will subsequently be used:

<p>Web accessibility standards have been developed by the World Wide Web Consortium (W3C), http://www.w3c.org.</p>

Example 2….Use of the acronym tag for the second and all subsequent uses of the acronym:

<p>Web accessibility standards have been developed by the <acronym title= “World Wide Web Consortium” >W3C</acronym> (http://www.w3c.org)</p>

Simply expanding the acronym physically in the text (example 1) or using the <acronym> tag in conjunction with the “title” attribute to expand the acronym (example 2) is all that needs to be changed to have the acronym display correctly to all users.

3. All users will know understand the acronym

That is it. Because the acronym has been expanded once, if a user cannot remember what it means they can refer back to the original expansion. Using the <abbr> or <acronym> tag is also beneficial because it can be used over and over again with minimal interruption to the visual design.

Wrap Up

Expanding abbreviations and acronyms not only helps users of assistive technology, it is beneficial to all users. With each new day in this age of the internet and text messaging, new acronyms and abbreviations are emerging. There are even online dictionaries of acronyms and abbreviations. So it is very important that web coders follow the suggestion above regarding the use of acronyms and abbreviations! Physically expanding abbreviations or using the <acronym> tag to expand an acronym adds very little time to the design and coding of a website. However, this practice contributes dramatically to the understanding of a web page.


  1. Jim Cooper

    You said: When web designers use the or the HTML tags, abbreviations and acronyms will be read as their full text. However, this is only true if the user has set their screen-reading software to do this.

    It might be useful to your readers (and me!) if you included info on how to do that with the Windows text-to-speech converter.


  2. Joe Humbert


    Unfortunately windows screen-reader (Narrator) has very limited options and this is not one of them. Narrator reads text and offers very little customization. If you are in need of a screen-reader JAWS and Window-Eyes both offer demos in addition there are free screen-readers out there. NVDA (http://www.nvda-project.org/), Thunder (http://www.screenreader.net) and System Access to Go (http://www.satogo.com). These free screen-readers offer much more customization. As for whether they offer the abbreviation tag option I will consult with our screen-reader expert and post back. Thankx.

    Joe Humbert

  3. artViper

    I agree implementing this in a correct way will help making a website accessible. It might be confusing in a screen reader if its implemented wrongly.

Leave a Reply

Your email address will not be published. Required fields are marked *