Abbreviations can be confusing for readers, particularly if you’re using them regularly. We’re well aware of this problem: We regularly write about the Web Content Accessibility Guidelines (WCAG), the World Wide Web Consortium (W3C), the Americans with Disabilities Act (ADA), and other subjects that are better known by their acronyms or initialisms.
HTML includes the <abbr> tag, which can be used to define the expanded version of an acronym, abbreviation, initialism, or a similar element. Using this tag can make your website more accessible.
Below, we’ll answer several common questions about the <abbr> element and provide some tips for using it.
What is the HTML <abbr> element, and how does it impact accessibility?
The HTML <abbr> element provides a definition or expansion of an abbreviation within the text of your web page. An associated title attribute provides that definition.
Here’s an example of markup for the <abbr> element:
<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
This affects accessibility in a few key ways. First, users can hover their pointer or keyboard focus (depending on their web browser’s support for the tag) to reveal the meaning of acronyms. That’s an especially useful feature for people with memory disabilities, attention disorders, and other cognitive differences.
Secondly, screen reader output may be improved. Depending on the user’s settings, the screen reader software may read out the full, expanded version of the abbreviation, which could make the content much easier to read and understand.
Related: Leveraging HTML for Web Accessibility
Does WCAG require the use of the <abbr> element?
No. WCAG addresses abbreviations under its Level AAA requirements, but does not specifically require the use of the <abbr> element. Success Criterion 3.1.4, “Abbreviations,” simply requires that websites provide “a mechanism" for identifying the expanded form or meaning of abbreviations.
While the <abbr> element is an obvious way to fulfill this requirement, you could use other techniques. For example, you could provide a link to a glossary page. You could also provide an explanation of the abbreviation the first time that it appears in the content. That’s the technique that we’re using in this article, by the way.
We should also note that the criterion is under WCAG’s strict Level AAA conformance level. Most websites should aim for Level AA conformance. Learn more about WCAG Level A, AA, and AAA conformance levels.
Related: WCAG Level AAA Success Criteria Are Strict, But They're Still Worth Your Attention
When should I use the HTML <abbr> element?
You can use your judgment. If you believe that the <abbr> element is unnecessary for a shorter piece of content, you’re under no obligation to use it. And while <abbr> is useful, you’re doing your job as long as you’re providing the expanded form or meaning of your abbreviations somewhere on the page.
The best practice is to use the <abbr> element throughout your content and provide the expanded form of the abbreviation with its first use. This approach gives users the ability to quickly define the abbreviation (or acronym, or initialism) whenever they encounter it — they don’t need to scroll back up to the top of the document to get that information.
This is most important when you’re authoring a longer document. For example, if you’ve got a 30-page article that frequently references several different acronyms, providing the <abbr> element may be enormously helpful to your readers. People who use a mouse or pointer system can simply hover over each abbreviation to see its expanded form.
Related: 4 Quick Ways to Create Clearer Content and Improve Accessibility
Thinking about accessibility can help you reach more people
Whether or not you decide to use the <abbr> element, you’re on the right track if you’re thinking about how your website’s markup might affect real, human users. By using plain, old semantic HTML (POSH) wherever possible, you’re creating content that is significantly more robust — and you’re giving your users more ways to enjoy your content and engage with your brand.
To learn more about the best practices of digital accessibility, download our free eBook: Developing the Accessibility Mindset.
If you’re ready to build a long-term, sustainable strategy for digital compliance, we’re here to help. Send us a message to connect with an expert or get started with a free automated web accessibility analysis.
