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.
All technologies that support CSS.
This technique relates to:
The objective of this technique is to demonstrate how CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement.
CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the markup in their content, making it more accessible at the same time.
Text within images has several accessibility problems, including the inability to:
be scaled according to settings in the browser
be displayed in colors specified by settings in the browser or rules in user-defined style sheets
honor operating system settings, such as high contrast
It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.
The following CSS properties are useful to style text and avoid the need for text in images:
The font-family property is used to display the code aspect in a monospace font family.
The text-align property is used to display the text to the right of the viewport.
The font-size property is used to display the text in a larger size.
The font-style property is used to display text in italics.
The font-weight property is used to set how thick or thin characters in text should be displayed.
The color property is used to display the color of text or text containers.
The line-height property is used to display the line height for a block of text.
The text-transform property is used to control the case of letters in text.
The letter-spacing property is used to control the spacing of letters in text.
The background-image property can be used to display text on a non-text background.
The first-line pseudo class can be used to modify the presentation of the first line in a block of text.
The :first-letter pseudo class can be used to modify the presentation of the first letter in a block of text.
The :before and :after pseudo classes can be used to insert decorative non-text content before or after blocks of text.
The XHTML component:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
The CSS component:
code { font-family:"Courier New", Courier, monospace }
The XHTML component:
<p class="right">This text should be to the right of the viewport.</p>
The CSS component:
.right { text-align: right; }
The XHTML component:
<p>09 <strong class="largersize">March</strong> 2008</p>
The CSS component:
strong.largersize { font-size: 1.5em; }
Note: The style used in this example is not used to convey information, structure or relationships.
The XHTML component:
<p>09 <em class="highlight">March</em> 2008</p>
The CSS component:
.highlight{ color: red; }
Note: The style used in this example is not used to convey information, structure or relationships.
The XHTML component:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology Blog</a>.</p>
The CSS component:
.featuredsite{ font-style:italic; }
Note: The style used in this example is not used to convey information, structure or relationships.
The XHTML component:
<p>This deal is available <span class="highlight">now!</span></p>
The CSS component:
.highlight { font-weight:bold; color:#990000; }
Note: The style used in this example is not used to convey information, structure or relationships.
The XHTML component:
<p>09 <span class="caps">March</span> 2008</p>
The CSS component:
.caps { text-transform:uppercase; }
The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.
The XHTML component:
<p>Concern for man and his fate must always form the<br /> chief interest of all technical endeavors. <br /> Never forget this in the midst of your diagrams and equations. </p>
The CSS component:
p { line-height:2em; }
The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.
The XHTML component:
<h1 class="overlap"><span class="upper">News</span><br /> <span class="byline">today</span></h1>
The CSS component:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
The CSS letter-spacing property is used to display the letters closer together in the second line of text.
The XHTML component:
<h1 class="overlap"><span class="upper">News</span><br /> <span class="byline">today</span></h1>
The CSS component:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
The CSS letter-spacing property is used to display the letters closer together in the second line of text.
The XHTML component:
<h1 class="upper2">News</h1>
The CSS component:
.upper2 { text-transform:uppercase; letter-spacing:1em; }
The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.
The XHTML component:
<div id="banner"><span id="bannerstyle1">Welcome</span> <span id="bannerstyle2">to your local city council</span></div>
The CSS component:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}The CSS :first-line pseudo class is used to display the first line of text in a larger, red font.
The XHTML component:
<p class="startline">Once upon a time...<br /> ...in a land far, far away... </p>
The CSS component:
.startline:first-line { font-size:2em; color:#990000; }
The CSS :first-letter pseudo class is used to display the first letter in a larger font size, red and vertically aligned in the middle.
The XHTML component:
<p class="startletter">Once upon a time...</p>
The CSS component:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
Resources are for information purposes only, no endorsement implied.
Check whether CSS properties were used to control the visual presentation of text
Check #1 is true.
Pages that use CSS.
This technique relates to:
Most browsers allow the user to change the color settings to override the Web page's CSS and HTML color schemes. This is supported by all versions of Internet Explorer, Firefox, Mozilla, Netscape, and Opera after version 6.
When specified colors are overridden in Firefox and Netscape, most Javascript pop-up boxes and drop-down menus become unusable. Pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background.
Internet Explorer 6 will not override background colors unless the same background color has also been selected in the system settings.
Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.
When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.
With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience.
An HTML Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious.
A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.
Resources are for information purposes only, no endorsement implied.
Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.
Note: Do not select the option that tells the browser to ignore the colors specified in the page.
Check that the main content uses the new text, link and background colors.
Check that the colors of the text, links and backgrounds in the secondary content has not changed.
Checks #2 and #3 are true.
Pages that use CSS.
This technique relates to:
The objective of this technique is to make it possible for users who need to increase the size of text in order to read it will not have to scroll horizontally in order to read a line of text. To use this technique, an author specifies the width of text containers using percent values.
A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally.
Check that all container widths are specified as percentage values.
Increase the text size to 200%.
Check to make sure that horizontal scrolling is not required to read any line of text.
Check that all text is still visible on the page.
Checks #1, #3, and #4 are true.
Pages that use CSS.
This technique relates to:
The intent of this technique is to specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings. This allows users to view the text in the colors they require while maintaining other aspects of the layout and page design such as columns of text, borders around sections or vertical lines between a menu and main content area. It will also prevent some display issues in some browsers when pages contain Javascript pop-up boxes or drop-down menus and have the colors overridden.
Borders and layout indicators help many people with cognitive disabilities, as does flexibility over the text and background colors. Sometimes these two needs are in conflict when the user has to over-ride the author's color selection of text and background in the browser and the browser also removes the borders and the intended layout. This can mean the page is displayed in a single column with one block of content below the other, which can result in unnecessary whitespace and long lines of text. It can also mean that pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background. When a Web author does not specify the colors of any text and background, while specifying border colors and layout, it is possible, in most popular browsers, to change the text and background colors without affecting the other (author-specified) CSS declarations.
A Web page is designed using HTML. CSS is used to specify border colors around discrete areas of the page and to layout the content so that the menu floats to the left of the main content area. Neither the text color nor background is specified. The user sets their own colors in the browser. They can view the page in colors and contrasts that work well for them without disrupting the layout.
Resources are for information purposes only, no endorsement implied.
Open the Web page in a browser that allows users to change colors of HTML content.
Change the text, link and background colors in the browser settings so they are different than those currently set in the browser.
Note: Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.
Return to the page and check that it is displaying the page in the new text, link and background colors.
Check that any borders are still displayed and that the layout is retained.
Checks #3 and Check #4 are true.
Pages that use CSS.
This technique relates to:
There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology.
It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.
For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually. (i.e. scrolling is only necessary to see other columns, but not for the left or right edges of each individual column. I find it hard to formulate this in a completely unambiguous way.)
A real estate company has an online annual report that has an identical layout to that of their print version, and as such, requires horizontal scrolling to read a line of text. A control is on the page that switches the stylesheet and provides a layout that does not require horizontal scrolling.
A financial spreadsheet is online. It includes text explaining changes in the housing market in January. Off-screen to the right, there is a column with an explanation of changes to the market in September. The user can horizontally scroll to the September area and read each line of text without any further scrolling when the window size is maximized.
Open the content that requires horizontal scrolling on a full screen window.
Check that there is an option within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.
Activate the option.
Check to make sure that horizontal scrolling is not required to read any line of text.
Checks #2 and #4 are true.
CSS used with HTML and XHTML
This technique relates to:
The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.
There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.
When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.
Note: The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML or XHTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.
An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo.
Resources are for information purposes only, no endorsement implied.
Microsoft Internet Explorer Developer Toolbar. Allows examination of script-generated DOM in Microsoft Internet Explorer.
Firebug. Allows examination of script-generated DOM in Firefox.
Visually examine the order of the content in the Web page as it is presented to the end user.
Examine the elements in the DOM using a tool that allows you to see the DOM.
Ensure that the the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) "
Step #3 is true.
CSS
This technique relates to:
In Internet Explorer 6, Windows High Contrast Mode will resize percent-based fonts in nested tables to be too large. Firefox and later versions of IE do not resize fonts in High Contrast Mode, and don't have this issue.
The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.
The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.
In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with id value of "nav_list." The text size for the navigation links and the width of the container are specified in em units.
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
In this example, input elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).
input.form1 { font-size: 100%; width: 15em; }
In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.
input.pick { font-size: 100%; width: 10em; }
In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
input.choose { width: 1.2em; height: 1.2em; }
Identify containers that contain text or allow text input.
Check the container's width and/or height are specified in em units.
Check #2 is true.