HTML and CSS Reference
In-Depth Information
Web Content Accessibility Guidelines
(WCAG)
2.0 was released as a World Wide
Web Consortium
(W3C)
recommendation in December 2008.
Using abbr
Use the
abbr
element to programmatically associate the full expansion with the abbre-
viation. The
abbr
element is an inline element that can be used within block elements
or other inline elements:
<p>
<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
2.0 was
released as a
<abbr title="World Wide Web Consortium">W3C</abbr>
recommendation
in December 2008.</p>
If the abbreviation is plural or possessive, ensure that the content within the
abbr
ele-
ment matches what is included in the
title
attribute, as shown in
Figure 7-1
:
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
's
mission
<abbr title="Space Transportation System">STS</abbr>
−133 is the last
flight scheduled for Space Shuttle Discovery.</p>
Figure 7-1. Abbreviations with a bottom border
Discussion
As noted in
Recipe 1.13
, the
acronym
element is deprecated in HTML5. This eliminates
the XHTML quandary of when it is appropriate to use the
abbr
or the
acronym
element:
the
abbr
element simply covers both.
Styling abbr
It's recommended to style the
abbr
element so that sighted users have a visual cue that
there is additional content available to them. The default styling for
abbr
in the Opera
and Firefox browsers displays an underline (a dotted bottom border) beneath the text.
You can add this effect in Safari, Chrome, and Internet Explorer 8 with a single line of
CSS:
abbr { border-bottom: 1px dotted black;}
When the user hovers the mouse over the abbreviation, most browsers display the full
expansion of the abbreviation.
