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
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
abbr { border-bottom: 1px dotted black;}
When the user hovers the mouse over the abbreviation, most browsers display the full
expansion of the abbreviation.
Search WWH ::

Custom Search