Programmatically associate abbreviations with their definitions
no. 145
Make sure the meaning of abbreviations and acronyms is conveyed to assistive technologies
Defining the expanded definition of abbreviations and acronyms is beneficial to all users, but making sure the definitions are reliably conveyed back to assistive technologies is just as important to provide a truly accessible experience. When simply providing the expanded definition of what an abbreviation or acronym stands for right after the occurrence just does not feel enough, relying on ARIA to programmatically associate the meaning is the next best thing.
To do so, simply make sure that the aria-describedby property is used to programmatically associate the meaning of the abbreviation or acronym to its occurrence in content. The same approach would work perfectly if the definition of the occurrence were to appear in a footnote, or elsewhere in the same document. By programmatically binding the occurrence with its definition, assistive technologies will be able to reliably convey that information back to users, thus helping them get a better understanding of the context and content of the page. While best practice would suggest that applying this definition on the first occurrence is enough, it is up to authors to determine if they want it applied to every occurrence found within a page.
User Story
As a user using assistive technology, I want the meaning of every abbreviation or acronym used in content to be defined to my tools, so that I can more easily make sense of the content.
Simple Code Example
<p>The <span aria-describedby="def01">NATO</span> (<span id="def01">North Atlantic Treaty Organization</span>) is an intergovernmental military alliance based on the North Atlantic Treaty, which was signed on 4 April 1949.</p> Or, when used as a footnote... <p>The <span aria-describedby="def01">NATO [01]</span> is an intergovernmental military alliance based on the North Atlantic Treaty, which was signed on 4 April 1949.</p> ... <li>[01] <span id="def01">North Atlantic Treaty Organization</span></li> ...
Testing Methodology
Look for abbreviations or acronyms in the page and check that a programmatically associated explanation of what the abbreviation or acronym stands for is provided.
Specification Details
WCAG 2.0: Level AAA
Principle: Understandable
Guideline: 3.1 Readable
Success Criterion: 3.1.4 Abbreviations
Related Technique: G102
Category: General










