WCAG 3.1.3: Unusual Words

Let’s imagine for a moment that you just went to Chicago on vacation (pro tip: forget the pizza; the hot dogs are killer). You want to learn more about the architectural history of the city, so you do some research on the web. However, the articles you find use a lot of architectural and civil engineering terms you’ve never seen before. You might be able to tell what some of these words mean based on context, but otherwise, you need to look them up to make any sense of the information you’ve found.

This post is all about words and phrases whose definitions may not be totally clear. If your site contains specialized, figurative, or nuanced language, WCAG advises that you provide a mechanism whereby users can access the intended definitions of those words or phrases. Such language includes:

• Jargon.
• Idioms, or cultural sayings (e.g., “spilling the beans” or “time flies”).
• Common words or phrases that can have drastically different meanings depending on the context (for instance, the word “gig” means something totally different to a musician as it would to a computer programmer).

Providing a way for users to find the definitions for such words and phrases helps those with certain cognitive, language, or learning disabilities who have trouble with comprehension or using context to construe definitions. It’s also useful for people experiencing some visual limitations who would need to use a screen magnifier to read your page and thus might lose the visual context necessary to understand the word or phrase in question.

Possible Fixes

So, what do we mean exactly by “mechanism”? There are a number of ways by which you can provide users with the means to access definitions to unusual language. For instance, you can link the word or phrase in question to a glossary, or you can link them internally to definitions listed at the bottom of the page. You can also create a description list using the “dl” element in HTML. Going back to our example from before, here’s a list of descriptions of architectural terms:

<dl title=”Architectural terms”>
<dt>Baluster</dt>
<dd>
<p>A <em>baluster</em> is a vertical supporting element.</p>
</dd>
<dt>Curlicue</dt>
<dd>
<p><em>Curlicue</em> is a spiral or looping line.</p>
</dd>
</dl>

Another option is to use the “dfn” element in HTML to provide an inline definition. Here’s what that would look like:

<p>The LondonHouse Hotel in Chicago has a beautiful cupola, which guests frequently reserve for weddings and other special occasions. A <dfn>cupola</dfn> is a small done, or hexagonal or octagonal tower, located at the top of a building.</p> 

Level AAA Conformance

This rule is categorized as level AAA.

For more information on WCAG conformance levels, check out our post on conformance.