This Web page lists CSS Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.
All technologies that support CSS
This technique relates to:
The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.
In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented.
Here is the content to be displayed:
<div class="box">
<dl>
<dt class="menu1">Products</dt>
<dd class="item1">Telephones</dd>
<dd class="item2">Computers</dd>
<dd class="item3">Portable MP3 Players</dd>
<dt class="menu2">Locations</dt>
<dd class="item4">Idaho</dd>
<dd class="item5">Wisconsin</dd>
</dt>
</dl>
</div>
Here is the CSS which positions and styles the above elements:
.item1 {
left: 0em;
margin: 0px;
position: absolute;
top: 7em;
}
.item2 {
left: 0em;
margin: 0px;
position: absolute;
top: 8em;
}
.item3 {
left: 0em;
margin: 0px;
position: absolute;
top: 9em;
}
.item4 {
left: 14em;
margin: 0px;
position: absolute;
top: 7em;
}
.item5 {
left: 14em;
margin: 0px;
position: absolute;
top: 8em;
}
.menu1 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 0em;
margin: 0px;
position: absolute;
top: 3em;
}
.menu2 {
background-color: #FFFFFF;
color: #FF0000;
font-family: sans-serif;
font-size: 120%;
left: 10em;
margin: 0px;
position: absolute;
top: 3em;
}
#box {
left: 5em;
position: absolute;
top: 5em;
}
When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.
Resources are for information purposes only, no endorsement implied.
For content which uses CSS for positioning
Remove the style information from the document or turn off use of style sheets in the user agent.
Check that the structural relations and the meaning of the content are preserved.
Check #2 is true.
All technologies that support CSS .
This technique relates to:
The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link but styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.
This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.
Note: This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.
The following examples use the CSS selector and rule set below:
a span {
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;
}
This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> <link href="access.css" rel="stylesheet" type="text/css" /> <title>Hidden Link Text</title> </head> <body> <p>Washington has announced plans to stimulate economic growth. <a href="#"> <span>Washington stimulates economic growth </span> Full Story</a></p> </body> </html>
This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<link href="access.css" rel="stylesheet" type="text/css" />
<title>Hidden Link Text </title>
</head>
<body>
<dl>
<dt>Winnie the Pooh </dt>
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
</body>
</html>
No resources available for this technique.
For each anchor element using this technique:
Check that an element has been defined that confines its display to a pixel and positions text outside the display with overflow hidden
Check that the element of that class is included in the content of the anchor
Check that the combined content of the anchor describes the purpose of the link
All checks above are true.
All technologies that support CSS.
This technique relates to:
The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.
The following CSS would add the equivalent of a space between each character in a level-2 heading:
h2
{
letter-spacing: 1em;
}
So for the markup:
<h2>Museum</h2>
the rendered result might look something like:
M u s e u m
Resources are for information purposes only, no endorsement implied.
For each word that appears to have non-standard spacing between characters:
Check whether the CSS letter-spacing property was used to control spacing.
Check #1 is true.
Any technology that can use CSS to include images.
This technique relates to:
The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.
Background images can be included with the following CSS properties:
background,
background-image,
content, combined with the :before and
:after pseudo-elements,
list-style-image.
Note: This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.
The stylesheet for a Web page specifies a background image for the whole page.
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
… The stylesheet for a Web page uses the CSS background
property to create a decorative rollover effects when a user hovers
the mouse pointer over a link.
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
} The styleseet for a Web page uses the CSS background
property to create rounded corners on elements.
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
</blockquote>
<div class="submitter">
<p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…In the following example, a decorative image is used to replace text within the heading element.
<style type="text/css".
h3#about {
width: 480px;
height: 34px;
position: relative;
}
h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com"> <span></span>About example.com </h3>
Resources are for information purposes only, no endorsement implied.
The HTML 4.01 specification states that the
background attribute of the body
element is deprecated
Check for the presence of decorative images
Check that they are included with CSS
If #1 is true, then #2 is true.
CSS
This technique relates to:
When font size is specified in any absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.
When High Contrast Mode has been set from the Accessibility Control Panel on Windows, IE6 increases the size of the page text as if a percentage change had been set for the outermost window via CSS. Standard CSS layout behavior causes relative scaling to be multiplied, so the scaling of text within elements will be different in subtle ways. Firefox and IE7 do not change the scaling of the content based on the system settings in a way that affects CSS layout, so this effect does not occur in those browsers.
The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
strong {font-size: 120%}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…Resources are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size for each rule set.
Check that the value is a percentage.
Check #2 is true
CSS
This technique relates to:
When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.
The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
strong {font-size: larger}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…Resources are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size of the CSS rule set.
Check that the value is one of xx-small, xx-small, x-small, small, medium, large, x-large, xx-large, xsmaller, or larger.
Check #2 is true
CSS
This technique relates to:
In Internet Explorer 6, using ems for font sizes will cause the text to grow more than using % or named font sizes. So, text-size/largest, might cause the text to grow more than 200% and have clipping problems.
When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.
Internet Explorer 7 only changes the text size when the CSS is defined in a style element, keyed off an element as in the examples. When using inline style with the "style" attribute, the text size change is not supported.
The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.
strong {font-size: 1.6em}
...
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…Resources are for information purposes only, no endorsement implied.
Examine all CSS properties that define font size for each rule set.
Check that the value is expressed in em units.
Check #2 is true
All technologies that support CSS
This technique relates to:
Internet Explorer 6.0 and earlier versions for Windows do not support dynamic pseudo-classes for any elements except hyperlinks. Internet Explorer 7 does not support :focus styles for elements other than hyperlinks.
Firefox 1.5, Firefox 2.0 and SeaMonkey 1.1 for Windows support dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, and button elements. However, setting different colors or borders when a radio button or a check box receives focus is not supported.
Opera 9.02 for Windows supports dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, but not for button elements.
Firefox 2.0, Opera 9.02 and SeaMonkey 1.1 for Windows also support adjacent sibling selectors for form labels. Firefox 1.5, Internet Explorer 6.0 and earlier versions for Windows do not support adjacent sibling selectors for form labels.
The objective of this technique is to demonstrate how the current focus can be made visually evident by changing the appearance of the focused element with CSS styling.
In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00; color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6: color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>In this example, the :focus pseudo-class is used to apply a highly visible yellow border around links that receive focus. Use of the "outline" property instead of the "border" property ensures that the border will not perturb the page layout, since outlines are drawn on a separate layer.
<html>
<head>
<style type="text/css">
a:focus {
outline: medium solid yellow;
}
</style>
</head>
<body>
<p>The <a href="#">link in this paragraph</a> will have a yellow
border when it receives the focus.</p>
</body>
</html>Resources are for information purposes only, no endorsement implied.
For each control or form label that is styled using the CSS :focus pseudo-class:
Check whether the styling indicates that the control has focus when it receives focus
#1 is true.
(X)HTML, CSS
This technique relates to:
Internet Explorer does not support the :focus CSS pseudo class. Include the :active CSS pseudo class to achieve the same effect as :focus in Internet Explorer for (X)HTML links (a element).
The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.
Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.
In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.
Here is the content to be displayed:
<ul id="mainnav"> <li class="page_item">Home</li> <li class="page_item"><a href="/services">Services</a></li> <li class="page_item"><a href="/projects">Projects</a></li> <li class="page_item"><a href="/demos">Demos</a></li> <li class="page_item"><a href="/about-us">About us</a></li> <li class="page_item"><a href="/contact-us">Contact us</a></li> <li class="page_item"><a href="/links">Links</a></li> </ul>
Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}In this example, mouse and keyboard focus indicators have been applied to the form input element. CSS has been used to apply a background color and border when the input element receives focus.
Here is the content to be displayed:
<input type="text" size="20" id="search" name="searchtext"/>
Here is the CSS that changes the background color and border for the above input element when it receives mouse or keyboard focus:
input:hover, input:focus {
background-color: #FEFF7F;
border: 1px solid #FF0000;
color:#000000;
}No resources available for this technique.
(none currently listed)
For each element able to attain focus:
Using a mouse, hover over the element
Check that the background or border changes color
Move the mouse away from the object before atempting keyboard focus.
Using a keyboard, tab to the element
Check that the background or border changes color
#2 and #5 are true
(X)HTML, CSS
This technique relates to:
The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.
Text-based form controls include input boxes (text and textarea) as well as buttons.
A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way. This includes specifying a font size for the form controls themselves because the font size is not inherited in Internet Explorer.
The XHTML component:
<h1>Contact Us</h1> <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p> <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br /> <label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br /> <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br /> <label for="email">Email</label><input type="text" name="email" id="email" /><br /> <input type="submit" name="Submit" value="Submit" id="Submit" />
The CSS component:
h1 { font-size: 2em; }
p, label, input { font-size: 1em; }Here is a working example of this code: Example of resizing input with CSS.
This example works in IE with its text size feature. However, it doesn't scale in Firefox 2.0.
The XHTML component:
<input type="radio" name="r1" value="r1" id="r1" class="geomsize" /> <input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />
The CSS component:
input.geomsize {
width: 1.2em;
height: 1.2em;}Here is a working example of this code: Example of resizing radio buttons and checkboxes with CSS.
Enter some text into text-based form controls that receive user entered text.
Increase the text size of the content by 200%.
Check that the text in text-based form controls has increased by 200%.
#3 is true.
All technologies that support CSS
This technique relates to:
On the Microsoft Windows platform, Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 in "quirks mode" and Internet Explorer 7 in "quirks mode" use a box model that deviates from the W3C CSS specification: in these browser versions, right and left padding, and right and left borders do not increase the total width of an element, so the space for the content inside such an element will be narrower. (This behavior is known as the "box model bug".) Internet Explorer 5.5 on Mac OS, and Internet Explorer 6 and 7 on Windows in "standards compliant mode" use the box model defined in the W3C CSS specification.
Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
Resources are for information purposes only, no endorsement implied.
No tests available for this technique.
All technologies that support CSS
This technique relates to:
This technique describes how to align blocks of text either left or right by setting the CSS text-align property.
In the following example, text is aligned left. In the style sheet, define the class:
p.left {text-align: left}In the content call the up the class.
<p class="left"> Lorem ipsum dolor sit …</p>
In the following example, text is aligned right.
p.right {text-align: right}In the content call the up the class.
<p class="right"> Lorem ipsum dolor sit …</p>
Check that the text is aligned either left or right.
Check #1 is true.
CSS
This technique relates to:
The purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less. This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently. This technique also allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases..
Note that this technique does not require authors to use CSS to limit the width of lines of text to less than 80 characters in the default view. Rather, the recommendation to use relative measurements in CSS layouts helps to ensure that authors do not set column widths in such a way that makes it impossible for users to view content with line lengths of 80 characters or less.
In this example the div width is set in ems in the stylesheet.
Note: The CSS property max-width is not supported in versions of Internet Explorer 6 and below.
#main_content {max-width: 70em}And the text block would be placed inside the div in the content
<div id="main_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p> </div>
In this example the div width is set in percent in the stylesheet
#main_content {width: 90%}And the text block would be placed inside the div in the content
<div id="main_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p> </div>
Resources are for information purposes only, no endorsement implied.
Test to see that the columns are defined in relative units.
Check to see that line length can be set to 80 characters or less by resizing the browser window.
Checks #1 and #2 are true.
All technologies that support CSS
This technique relates to:
Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.
Setting the element to 1.5 line height. In the style sheet set the characteristics of the element.
p { line-height: 150%; }In the content the element will now be 1.5 line height, throughout the document.
<p> Lorem ipsum dolor sit … </p>
Setting a class to 1.5 line height. In the stylesheet, define the class.
p.tall {line-height:150%}In the content, call up the class.
<p class="tall"> Lorem ipsum dolor sit … </p>
Setting a class to double-spaced line height. In the stylesheet, define the class.
p.tall {line-height:200%}In the content, call up the class.
<p class="tall"> Lorem ipsum dolor sit … </p>
Open content in a browser.
Check that the spacing between lines in blocks of text is between 1.5 and 2.
Test Procedure #2 is true.