Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy:
Abbreviations and Acronyms

August 17th, 2009

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.

ABBR and ACRONYM elements

When web designers use the <abbr> or the <acronym> HTML elements, 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> elements to the actual meaning of the phrase. See code example below.

Example:

<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 elements. 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 element should be used. Then, for screen reader users who have set their preferences correctly, the entire phrase will be spoken.

Guideline

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> elements to expand the phrase.

Tutorial

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 element 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> element 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> element 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> element 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.