Getting Abbreviations Proper – A Checklist Aside

AAA-level compliance is the best of accessibility, the bonus-round of accessible design: AAA-level compliant pages meet the wants of each group of customers. AAA is achievable, however requires preparation and forethought. To create a forward-looking, absolutely AAA-compliant website, we have to execute a form of hat trick: XHTML 1.0 and a couple of.0-compliant markup, a beneficiant breadth of backwards compatibility, and actual common accessibility.

Article Continues Under

The WCAG Precedence 3 checkpoints (and the WCAG 2.0 Degree 3 Success Standards) are clear sufficient by way of objective and implementation, however abbreviations and acronyms stand out as one of many trickier areas of AAA to implement nicely. With a purpose to meet our three-part objective of requirements compliance, backwards compatibility, and full accessibility, we have to give this facet of our content material a little bit of thought.

WCAG Checkpoint 4.2, and model 2.0 Guideline 3.1 each require the expanded types of acronyms and abbreviations to be accessible, and these pointers are necessary to many teams of customers. The aged and people with studying or cognitive disabilities could have a tough time remembering abbreviations (akin to U.S. state abbreviations); learners of international languages are more likely to be unfamiliar with abbreviations that native audio system take without any consideration (akin to “inc.” or “lmtd.” in English); and customers with visible disabilities can configure display screen studying software program to learn the expanded types of abbreviations, which significantly improves the movement of the textual content (think about listening to the sentence “We invite our readers to affix us for our Wisc. space potluck” with out the abbreviation expanded).

For customers or user-agents?#section2

Are these pointers meant to be applied in ways in which present expanded explanations to customers straight, or are they meant to supply data to user-agents, which then have the accountability of speaking this data to customers? Many wonderful articles on this debate exist, however I’m not satisfied that the controversy itself is helpful. A special strategy can be to say that accessible markup meets the wants of some customers straight, whereas concurrently offering data to user-agents, which is helpful for different teams of customers.

The purpose of together with expanded types of abbreviations is to guarantee that customers can entry these types if wanted. The worth of the abbr ingredient lies in its skill to inform display screen readers what they need to learn (thus enhancing the movement of spoken textual content), whereas additionally offering extra helpful data to visible customers with studying or cognitive disabilities (or these dealing with language boundaries). The assertion that abbr is structural is misguided, as the purpose of the tag is the content material of its title attribute.

After we discuss accessibility, we’re not speaking solely about customers with visible disabilities. Many disabilities can have an effect on an individual’s skill to entry textual content, and we need to each enhance entry and make it clear that accessibility sida exist on our websites. Visible presentation for abbr (in addition to non-visual shows mentioned under) obtain this.

As internet designers and builders, our job is to combine textual content and markup in ways in which finest meet the wants and expectations of a number of teams of customers. For AAA-level conformance, we have to successfully talk expanded types of abbreviations to everyone, requiring strategies centered concurrently on users-agents and customers straight.

That is the place the hat trick comes into play: by taking an strategy that’s compliant with each present and soon-to-be-current requirements, backwards appropriate to non-compliant user-agents, and absolutely accessible (i.e. usable, and offering the identical data to all customers) we are able to obtain the efficient communication we’re taking pictures for.

First Objective: Requirements#section3

Our first objective is compliance with XHTML 2.0. In model 2, the acronym ingredient has been deprecated, so we’re now utilizing the abbr ingredient for all shortened types. This ingredient has a brand new attribute in 2.0: full. The spec says that “the title or full attributes could also be used to supply the total or expanded type of the expression” (emphasis mine); since full shouldn’t be included below model 1, and we need to be compliant with each, we’ll stick to titles.

The fundamentals#section4

The <abbr title="Protection Superior Analysis Tasks Company">
DARPA</abbr> was instrumental within the historical past of the web.

On this instance, all XHTML 2.0 compliant browsers will present the total definition in a tool-tip on mouse-over; many use a dotted underline to alert visible customers that this data is offered. Since we’re erring on the aspect of an excessive amount of data, and for the sake of cross-browser consistency, we’ll add abbr { border-bottom-width: 1px; border-bottom-style: dotted; } to our types. (Be aware: IE 6 doesn’t help abbr: it doesn’t see it, you may’t type it, there’s no device tip. Later, we’ll use this type defintion as a part of our IE 6 workaround.)

Additionally on this instance, if a JAWS person has the software program set to learn expanded abbreviations, she or he hears: “The Protection Superior Analysis Tasks Company was.” If not, JAWS speaks “The darpa was.”

We’ll need to let customers know that our website is AAA compliant and that explanations can be found for acronyms and abbreviations, and to let customers of display screen readers know there may be further data accessible if their software program is about to learn it. The positioning’s accessibility coverage is an effective spot for this type of data.

JAWS and initialisms#section5

CSS2 has outlined properties for screen-reading software program that should assist separate abbreviations that must be spoken as entire phrases from people who must be spoken as initials. Nonetheless, JAWS 7.0 (the newest model) doesn’t help these, nor am I conscious of any user-agents that do.

Who’s ignored#section6

IE 6 customers gained’t see the tool-tip within the above instance, and there are two different teams of customers whose wants usually are not met by this resolution: visible customers with motor disabilities who can’t mouse over textual content to activate tool-tips, and customers of text-only browsers and Braille shows. We’ll come again to those teams as soon as we’ve sorted every part else out.

Second objective: backwards compatibility#section7

The subsequent a part of the hat trick is backwards compatibility. IE 7 will help the abbr ingredient; IE 6 doesn’t. IE 6 helps the acronym tag, however as talked about above, this tag didn’t make it into XHTML 2.0, so we want a greater resolution. Luckily, even older variations of JAWS will learn the title attributes of abbr tags, so the one customers we’re involved with for the time being are IE 6 customers, to whom we need to talk the provision of the tool-tip definitions.

One attainable resolution (though not one of the simplest ways to go) is with span tags:

.abbr {
  border-bottom-width: 1px;
  border-bottom-style: dotted;
}

The <span class="abbr" title="Protection Superior Analysis Tasks 
Company"><abbr title="Protection Superior Analysis Tasks Company">
DARPA</abbr></span> was instrumental within the historical past of the web.

The DARPA was instrumental within the historical past of the web.

JAWS speaks:

The Protection Superior Analysis Tasks Company was instrumental within the historical past of the web.

This works as a result of JAWS doesn’t learn title attributes for span tags, so JAWS customers don’t get redundant data, however IE 6 customers get the knowledge they want. This technique demonstrates the issue and one attainable resolution to it, and I’ve solely talked about it for that purpose—don’t fear, these spans are gone within the subsequent part. The answer we’re in search of is one that continues to be accessible to display screen readers, communicates the provision of tool-tips to customers it doesn’t matter what browser they’re utilizing, and is accessible to customers of Braille and text-only shows in addition to customers with motor disabilities, who shouldn’t be pressured to mouse-over textual content to get tool-tips.

Ultimate objective: full accessibility#section8

The apparent reply for customers with neither display screen readers nor mice is contextual (written out) explanations of abbreviations. Contextual explanations are all the time the perfect, however usually are not all the time essentially the most aesthetically interesting.

Within the DARPA instance above, a contextual rationalization is ok:

The Defence Superior Analysis Tasks Company (DARPA) was instrumental within the historical past of the web.

Nonetheless, for high-frequency abbreviations (which should nonetheless be defined for AAA-level conformance; AAA means we make no assumptions), contextual explanations pose some issues. Contemplate this instance:

Mr. John Smith Sr., CEO of Comfortable Geese Co., Ltd.

Have been we to broaden these abbreviations in context, the outcomes can be 100% accessible to everyone, however fairly messy. On the subject of written out definitions, these super-high-frequency abbreviations are the straw that breaks the camel’s again: customers with studying disabilities akin to dyslexia, cognitive disabilities akin to dementia, and different customers together with youngsters, the aged, and international language learners could all require explanations, however we are able to’t depend on tool-tips as a result of they don’t meet the necessity of customers who don’t use mice. (Be aware: whereas older drafts of WCAG 2.0 talked about an ordinary of whether or not or not the time period was included in a dictionary as a foundation for needing an evidence, that customary is (fortunately) gone within the newest model, and for AAA we’re going to outline every part.)

The elegant resolution is with hyperlinks to a website glossary. To be AAA compliant below WCAG 2.0, we’ll doubtless need to have a website glossary anyway, with definitions of any technical phrases or jargon in our content material, in addition to phrases or phrases utilized in non-standard methods. By together with abbreviations in our glossary, we’ve taken the additional accessibility step that units the perfect websites other than the herd.

There are a lot of advantages of utilizing hyperlinks to a glossary:

• The a tag’s title attribute ensures that IE 6, which doesn’t give tool-tips for abbr tags, will present tool-tips for our abbreviations.
• This method permits us to type the hyperlinks with a dotted underline, speaking their perform as explanations to visible customers.
• Since these are hyperlinks, text-only customers and customers who’ve issue with mice can now tab to them, and use the keyboard-accessible hyperlinks to entry the knowledge that different customers get through the tool-tips or display screen readers.

Right here’s our instance:

a:hyperlink.gloss,
a:visited.gloss,
a:hover.gloss,
a:lively.gloss {
  colour: #000000; /* must be the identical colour as textual content */
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #000000; /* for IE 5, similar colour as above */
  font-style: regular; /* to be used with dfn */
}

The Inner Income Service (IRS) is without doubt one of the most maligned 
businesses of the <abbr title="United States"> <a href=
"glossary.html#US" title="United States" class="gloss">
U.S.</a></abbr> authorities. <abbr title="Mister"><a href="glossary.html#Mr" title="Mister" class="gloss">
Mr.</a> </abbr> Mark W. Everson, the Chairman of the 
<abbr title="Inner Income Service"> <a href=" 
glossary.html#IRS" title="Inner Income Service" 
class="gloss">IRS</a></abbr>, would doubtless be the least
common man in America if extra folks knew his identify. Nonetheless, 
everyone within the U.S. actually advantages from the IRS’s 
work within the type of mail service and roads.

It appears like this:

The Inner Income Service (IRS) is without doubt one of the most maligned businesses of the U.S. authorities. Mr. Mark W. Everson, the Chairman of the IRS, would doubtless be the least common man in America if extra folks knew his identify. Nonetheless, everyone within the U.S. actually advantages from the IRS’s work within the type of mail service and roads.

JAWS speaks:

The Inner Income Service left paren IRS proper paren is without doubt one of the most maligned businesses of the US authorities. Mister Mark W. Everson, the Chairman of the Inner Income Service, would doubtless be the least common man in America if extra folks knew his identify. Nonetheless, everyone within the U dot S actually advantages from the IRS’s work within the type of mail service and roads.

The $64k query is: how will we steadiness in-text and marked-up explanations? WCAG model 1 instructs us to “specify the enlargement of every abbreviation or acronym in a doc the place it first happens,” whereas WCAG model 2 requires that “a mechanism for locating the expanded type of abbreviations is offered.” We appear free to do that nonetheless we select, supplied that we give an expanded kind (ultimately) the primary time we encounter every abbreviation or acronym.

The “first time” a person encounters an abbreviation may very well be anyplace if a web page is navigable through named anchor hyperlinks, and since we’re taking pictures for AAA, we need to err on the aspect of an excessive amount of rationalization anyway. From a user-centric perspective, it’s good to mark up some subsequent occurences, as we can’t assume that every one customers will be capable of recall the enlargement from a single occasion, and we need to present explanations on the level they’re wanted. My basic strategy is as follows:

• The primary time an abbreviation happens after every heading, broaden it contextually, aside from super-high-frequency abbreviations, or in conditions the place aesthetic or stylistic issues dictate in any other case; mark these up.
• In every paragraph after the primary paragraph (below every heading) the place the abbreviation is defined, mark up the primary occurence of every abbreviation.
• For these super-high-frequency abbreviations, don’t drive your self nuts; realatively rare glossary hyperlink markup for these is ok, though I counsel utilizing scaled-back markup (abbr tags with a title attribute solely) for display screen readers at each occurence: “Mister” is loads softer on the ears than “M R”.
• The place stylistically applicable, attempt to fluctuate contextual and marked up explanations.

These are subjective choices; use your finest judgement and take note of named anchors and the space between abbreviation explanations and customers ought to be capable of discover what they’re in search of.

A word about types: It will be good to do that with out having to outline a category (e.g. abbr a { … types … }) however as a result of IE 6 doesn’t help abbr this gained’t work. It will work for the situations under the place we’ll use dfn, however for consistency I’ll maintain utilizing my gloss class in these examples.

Future enhancements#section9

As soon as XHTML 2.0 compliant browsers are the norm, we’ll be capable of tighten this markup by together with the href inside the abbr tag. The above instance is as clunky and redundant as it’s to make sure each ahead and backwards compatibility whereas maximizing content material accessibility. We may reduce the abbrs fully and deal with this solely with anchors, however that may break the trick described under, and would take us farther from the semantically preferable strategies we’ll be capable of use as soon as browsers grow to be XHTML 2.0 compliant.

Notes about JAWS#section10

JAWS identifies hyperlinks to customers by talking “hyperlink”, “visited hyperlink”, or “this web page hyperlink” as applicable. Nonetheless, within the instance above, JAWS doesn’t see these hyperlinks, and JAWS customers can’t entry them. Right here’s why:

<abbr title="Jaws speaks this"><a href="https://alistapart.com/article/hattrick/href" 
  title="Visible browsers show this">textual content</a></abbr>

JAWS encounters the abbr tag, and treats all following textual content (together with markup) because the outlined time period till it encounters the closing tag. The result’s that hyperlinks enclosed inside abbr tags are dropped.

On this case, the hyperlink takes customers to a glossary entry that gives the identical data that JAWS would communicate, and I imagine that that is acceptable from an accessibility perspective. We’re making an attempt to supply abbreviation explanations, and even when non-visual customers can’t entry the identical hyperlink that visible customers can, they nonetheless obtain the knowledge that the hyperlink supplies. JAWS customers gained’t be distracted by listening to “hyperlink”—and following the hyperlink would offer redundant data for these customers anyway. That mentioned, taking hyperlinks away from one group of customers feels mistaken, even when they do get the identical data through display screen readers, so I’m thinking about ideas for enhancing this technique.

We may, after all, reverse the nesting of the tags like this:

<a href="https://alistapart.com/article/hattrick/href" title="IE shows this"><abbr
title="JAWS speaks this, and different browsers show this">textual content
</abbr></a>

…and JAWS would then present entry to the hyperlink. The commerce off is that it’ll additionally communicate “hyperlink:”, obstructing the movement of studying with redundant data. On this case, the a title turns into IE 6’s tool-tip, as a result of it doesn’t help abbr, and the abbr title turns into the tool-tip for browsers that do help abbr. The abbr title can be the textual content that JAWS speaks.

Experimenting with JAWS#section11

I’ve tried pulling the href from the anchors to check if JAWS will communicate these appropriately if they don’t seem to be hyperlinks, and the reply is sure. It is because JAWS is talking the abbr title. If you’ll not be utilizing a glossary in your website, you may do it this fashion (changing the as with spans so IE 6 customers obtain the type), however this gained’t work for examples I’ll be addressing shortly.

Our website is shaping up properly from an accessibility perspective: we’ve supplied explanations of all abbreviations and acronyms in a approach that’s accessible to all of our potential customers. Let’s not drop the ball right here: we are able to use the identical strategies, with some slight changes, to execute our hat trick for technical language and foreign-language phrases as nicely.

International phrases#section13

Phrases from different languages are an fascinating problem: we would like a tool-tip rationalization that’s useful for visible customers who can see the phrase, and we would like display screen readers to learn the phrase out and in addition present a hyperlink to the positioning glossary for non-visual customers who would really like the reason.

International phrases add a sure <dfn title="French: 
indefinable high quality"><a href="glossary.html#jenesaisquoi" 
lang="fr" class="gloss">je ne sais quoi</a></dfn>to at least one’s prose.

Visible browsers show this:

International phrases add a sure je ne sais quoi to at least one’s prose.

JAWS speaks this:

International phrases add a sure hyperlink: je ne sais quoi, to at least one’s prose.

I’m utilizing a dfn tag for the tool-tip that customers anticipate (versus a title attribute within the a tag) as a result of I’ve used the lang attribute of the a tag, and subsequently display screen readers predict every part enclosed inside these tags to be in French. If I had an English-language title attribute inside tags that included the lang attribute, display screen readers would pronounce the title utilizing French pronunciation guidelines. Moreover, this takes benefit of the truth that JAWS doesn’t learn the title attributes of dfn components, so JAWS appropriately speaks the passage in the identical approach as a human reader (we do not need JAWS to talk the tool-tip textual content instead of the phrase), whereas indicating that the glossary definition is offered by saying “hyperlink”.

Be aware that right here, JAWS will communicate “hyperlink”, and JAWS customers can tab to the hyperlink, as a result of there aren’t any abbr tags. This can be a good factor: for glossary entries that outline the phrases given (and particularly the place we’ve used markup such that display screen readers communicate one thing different than the tool-tip data), we actually need to guarantee that customers of display screen readers know that definitions can be found in our glossary, and might entry them.

A word about hrefs: Within the IRS instance above, we may pull the href from the a tags (for a case the place the positioning shouldn’t be utilizing a glossary) as a result of JAWS would nonetheless learn the abbr title. On this instance, and the examples under, we are able to’t get away with this, as a result of JAWS will learn neither the dfn title nor the a title within the absence of a hyperlink.

Jargon#section14

Right here’s one other state of affairs wherein we would like JAWS to talk one factor and have a tool-tip that reveals one other:

In audio know-how, the <dfn title="see glossary">
<a href="glossary.html#rms" class="gloss">root-mean-square 
statistic</a></dfn> is a helpful technique for generalizing 
about output.

Visible browsers show this:

In audio know-how, the root-mean-square statistic is a helpful technique for generalizing about output.

JAWS speaks this:

In audio know-how, the hyperlink: root sprint imply sprint sq. statistic, is a helpful technique for generalizing about output.

Once more, there’s a tool-tip and JAWS speaks “hyperlink:” to direct customers to the glossary.

Roman numerals#section15

One other good utility for this trick is the Roman numeral. We need to make certain our Roman numerals are accessible to customers who’re unfamiliar or have issue with them, but additionally make certain JAWS speaks them naturally.

King Henry <a href="http://alistapart.com/glossary.html#romannums" title="the eighth" 
class="gloss"><dfn title="Roman numeral eight">VIII</dfn></a> 
had many wives.

Please learn chapter <a href="http://alistapart.com/glossary.html#romannums" 
title="eight" class="gloss"><dfn title="Roman numeral eight">
VIII</dfn></a> for homework.

Visible browsers show this:

King Henry VIII had many wives.

Please learn chapter VIII for homework.

JAWS speaks this:

King Henry hyperlink: the eighth, had many wives.

Please learn chapter hyperlink: eight, for homework.

Be aware that in these examples, I’ve moved the a
tags to the skin of the dfn tags, as a result of visible
browsers show the final title attribute they
encounter, however that’s not what we would like JAWS to talk.

AAA-level compliance in apply#section16

This in all probability appears like a number of “further” code, however there are working strategies that assist decrease keystrokes and time required whereas sustaining this diploma of accessibility. For every of my websites, I maintain a plain textual content file of abbreviation markup from which I can reduce and paste when vital. It consists of entries like these:

<abbr title="Equal Justice Works"><a
  href="http://alistapart.com/site_help/glossary.php#ejw" 
  title="Equal Justice Works" class="glossary">EJW</a></abbr>

<abbr title="Graduate Administration Administration Check"><a
  href="http://alistapart.com/site_help/glossary.php#gmat" 
  title="Graduate Administration Administration Check" 
  class="glossary">GMAT</a>

After I encounter a brand new abbreviation (or different glossary entry), I paste the markup into my abbreviations file in alphabetical order in order that I can shortly discover it for the following prevalence.

One very sturdy argument for under utilizing contextual abbreviation explanations is that marked up explanations is not going to happen in a printed doc. That is actually price taking into consideration as we resolve which abbreviations to clarify contextually and which to mark up, however in equity, the hyperlinks on the printed doc gained’t work both, and neither will JavaScript or Flash. We’ve got to just accept that after we ship an HTML doc to the printer, there may be an inherent lack of performance, and that’s hardly an excuse to not use HTML options that many customers discover useful.

(Generated content material in CSS could also be used to broaden abbreviations for print, utilizing the strategies mentioned in “CSS Design: Going to Print,” remedying a few of these issues. Be aware additionally that JavaScript could also be used to generate a web page glossary for print, utilizing the strategies mentioned in “Bettering Hyperlink Show for Print.” —Ed.)

By the use of conclusion, here’s a passage from Richard Mitchell’s Lower than Phrases Can Say:

…so long as we’ve a lawyer in view, ain’t they one thing? We learn with pitying shakes of the pinnacle the disclaimers and demurrers on the backside of the contract. We wish to think about that we, simply plain people, are someway, deep down the place it actually counts, superior to these pointy-headed word-mongers with all their herinafters. Nonetheless, we do what they inform us to do. We all the time keep in mind that if we are able to’t determine from their language what we’re required to do, and if we subsequently fail to do it, it isn’t the writers of the jargon who can be known as to tài khoản. Our sense of superiority is an phantasm, a handy phantasm from someone’s perspective; actually, after we learn the contract, we’re afraid. It’s the intent of that language to make us afraid. It really works.

Mitchell is writing concerning the relationship between language and social class: these in positions of energy use language in another way from these over whom they wield that energy, and the lesson we must always take from the statement is necessary.

If the content material of our web site is accessible solely to customers who’re native audio system of our language and who don’t dwell with any form of incapacity, then we’re perpetuating a state of affairs wherein second-language learners, youngsters, the aged, and folks with disabilities are second class residents. By taking the time to tug off the accessibility hat trick, to make our content material requirements compliant, backwards appropriate, and absolutely accessible, we enable all customers to strategy our content material as equals. That’s what AAA-level conformance is about.

For actually accessible content material, we must always deal with abbreviations, acronyms, and international phrases is methods which can be:

• Requirements compliant in a approach that works with present applied sciences whereas trying ahead to forthcoming variations of these applied sciences.
• Backward appropriate, particularly in ways in which talk the provision of accessibility sida to customers (e.g. dotted underlines for abbreviations for IE 6 customers).
• Absolutely accessible, together with explanations of abbreviations which can be usually taken without any consideration, and the usage of a website glossary and hyperlinks to it for customers who can’t or don’t use mice for enter.

Pattern website glossary#section20

Here’s a pattern website glossary as an instance the ensuing context of glossary hyperlinks described above.

IRS

Inner Income Service—the company of the US authorities answerable for amassing taxes

je ne sais quoi

a French phrase that means “a sure indefinable high quality”

Mr.

Mister—in English, a well mannered type of tackle for a person

RMS

root-mean-squared—a technical time period referring to the common steady output of an amplifier; it’s measured by calculating the common (imply) of the sq. roots of all accessible measurements, after which squaring (multiplying by itself) this imply

Roman Numerals

a system of numbers generally used for referring to reigns of monarchs, centuries, and in musical notation; every letter has a price (e.g. I=1, V=5, X=10, L=50, C=100, and many others.), and the full worth for the quantity is the sum of its part letters (e.g. XII = 10 1 = 12); when a letter comes earlier than one other letter of a higher worth (e.g. XL), the worth of the lower-valued letter is subtracted from the worth of the instantly following letter (e.g. XL = 40, XLIII = 43)

U.S.

the US of America—a typical abbreviation in English