This Web page lists HTML and XHTML Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. Technology-specific techniques do not replace the general techniques: content developers should consider both general techniques and technology-specific techniques as they work toward conformance.
Publication of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0 success criteria and conformance requirements. Developers need to be aware of the limitations of specific technologies and provide content in a way that is accessible to people with disabilities.
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.
HTML4, HTML5, and XHTML documents that contain links.
This technique relates to:
This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.
Many links have both a text and iconic representation adjacent to each other, but rendered in separate a
elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.
If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.
This technique provides such links by putting the text and image together in one a
element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.
Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.
The icon and text are contained in the same a
element. (HTML4 / HTML5)
Example Code:
<a href="products.html">
<img src="icon.gif" alt="">
Products page
</a>
A link contains an icon and text, and the site help refers to the icon. The
img
has a text alternative which is the name used for the icon in the
site help, which describes clicking the home page icon. (HTML4 / HTML5)
Example Code:
<a href="home.html">
<img src="house.gif" alt="home page icon">
Go to the home page
</a>
Resources are for information purposes only, no endorsement implied.
For each a
applying this technique:
Check that every img
element contained within the a
element has a null value set for its alt
attribute.
Check that the a
element contains an img
element that has either a null alt
attribute value or a value that supplements the link text and describes the image
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide a logical tab order when the default tab order does not suffice. Often, G59: Placing the interactive elements in an order that follows sequences and relationships within the content is sufficient and this technique is not necessary. It can be very easy to introduce usability bugs when setting the tab order explicitly.
In some cases, the author may want to specify a tab order that follows relationships in
the content without following the order of the interactive elements in the code. In
these cases, an alternative order can be specified using the tabindex
attribute of the interactive element. The tabindex
is given a value between
0 and 32767.
When the interactive elements are navigated using the tab key, the elements are given
focus in increasing order of the value of their tabindex
attribute.
Elements that have a tabindex
value higher than zero will receive focus
before elements without a tabindex
or a tabindex
of 0. After
all of the elements with a tabindex higher than 0 have received focus, the rest of the
interactive elements are given focus in the order in which they appear in the Web
page.
A genealogical search form searches for marriage records. The search form includes
several input fields for the bride and the groom. The form is marked up using a data
table that includes the fields of the groom in the first column and the fields of
the bride in the second column. The order in the content is row by row but the
author feels it is more logical to navigate the form column by column. This way, all
the groom's criteria can be filled in before moving on to the bride's criteria. The
tabindex
attributes of the input fields are used to specify a tab
order that navigates column by column.
Example Code:
<form action="#" method="post">
<table summary="the first column contains the search criteria
of the groom, the second column the search criteria of
of the bride">
<caption>Search for marriage records</caption>
<tr>
<th>Search criteria</th>
<th>Groom</th>
<th>Bride</th>
</tr>
<tr>
<th>First name</th>
<td><input type="text" size="30" value="" name="groomfirst"
title="First name of the groom" tabindex="1"></td>
<td><input type="text" size="30" value="" name="bridefirst"
title="First name of the bride" tabindex="4"></td>
</tr>
<tr>
<th>Last name</th>
<td><input type="text" size="30" value="" name="groomlast"
title="Last name of the groom" tabindex="2"></td>
<td><input type="text" size="30" value="" name="bridelast"
title="Last name of the bride" tabindex="5"></td>
</tr>
<tr>
<th>Place of birth</th>
<td><input type="text" size="30" value="" name="groombirth"
title="Place of birth of the groom" tabindex="3"></td>
<td><input type="text" size="30" value="" name="bridebirth"
title="Place of birth of the bride" tabindex="6"></td>
</tr>
</table>
</form>
A Web page contains a search field in the upper right corner. The field is given tabindex="1" so that it will occur first in the tab order, even though it is not first in the content order.
Tabindex
values need not be sequential nor must they begin with any
particular value. The values do not have to be unique. Elements that have identical
tabindex
values are navigated in the order they appear in the
character stream.
In sections of the content where the tab order follows the content order, it can be less error prone to give all elements the same tabindex value rather than specifying a different number for each element. Then it is easy to rearrange those elements or add new elements and maintain a logical tab order.
Example Code:
<a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long
after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
...
<a href="xxx" tabindex = "1">Twentieth link in list</a>
Resources are for information purposes only, no endorsement implied.
Check if tabindex
is used
If tabindex
is used, check that the tab order specified by the
tabindex
attributes follows relationships in the content.
Check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
area
elements of image maps HTML and XHTML Documents that contain area
elements.
This technique relates to:
The objective of this technique is to provide text alternatives that serve the same
purpose as the selectable regions of an image map. An image map is an image divided into
selectable regions defined by area
elements. Each area is a link to another
Web page or another part of the current Web page. The alt
attribute of each
area
element serves the same purpose as the selectable area of the
image.
This example uses the alt
attribute of the area
element
to provide text that describes the purpose of the image map areas.
Example Code:
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for
more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map>
Resources are for information purposes only, no endorsement implied.
For each area
element in an image map:
Check that the area
element has an alt
attribute.
Check that the text alternative specified by the alt
attribute serves the same
purpose as the part of image map image referenced by the area
element
of the imagemap.
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 2.4.2. See Understanding SC 2.4.2 for details.
All HTML and XHTML documents, including those in individual frames in
a frameset, have a title
element in the head
section that
defines in a simple phrase the purpose of the document. This helps users to orient
themselves within the site quickly without having to search for orientation information
in the body of the page.
Note that the (mandatory) title
element, which only appears once in a
document, is different from the title
attribute, which may be applied to
almost every HTML and XHTML element.
This example defines a document's title.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The World Wide Web Consortium</title>
</head>
<body>
...
</body>
</html>
Resources are for information purposes only, no endorsement implied.
Examine the source code of the HTML or XHTML document and check that a non-empty
title
element appears in the head
section.
Check that the title
element describes the document.
Checks 1 and 2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide expansions or definitions for
abbreviations by using the abbr
element
It is always appropriate to use the abbr
element for any abbreviation,
including acronyms and initialisms. When using HTML and XHTML,
initialisms and acronyms may be marked up using the acronym
element.
Versions of HTML after HTML 4 eliminate the acronym
element in favor of the more general
abbr
element.
Example Code:
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
Example Code:
<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit
brought by members of the National Writers Union against ......</p>
Example Code:
<p>The use of <abbr title="Keep It Simple Stupid">KISS</abbr> became popular in ...</p>
Example Code:
<p><abbr title="World Wide Web">WWW</abbr></p>
Resources are for information purposes only, no endorsement implied.
Check that an expansion or definition is provided for each abbreviation via
abbr
.
Check #1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML documents that contain links, (<a href> elements)
This technique relates to:
The objective of this technique is to describe the purpose of a link by providing
descriptive text as the content of the a
element. The description lets a
user distinguish this link from other links in the Web page and helps the user determine
whether to follow the link. The URI of the destination is generally not sufficiently
descriptive.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
When the content of a link contains both text and one or more images, if the text is sufficient to describe the purpose of the link, the images may have an empty text alternative. (See Using null alt text and no title attribute on img elements for images that assistive technology should ignore.) When the images convey information beyond the purpose of the link, they must also have appropriate alt text.
Describing the purpose of a link in HTML in the text content of the a
element.
Example Code:
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>
Using the alt
attribute for the img
element to describe
the purpose of a graphical link.
Example Code:
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>
Using an empty alt
attribute when the anchor (a
) element contains text
that describes the purpose of the link in addition to the img
element.
Note that the link text will appear on the page next to the image.
Example Code:
<a href="routes.html">
<img src="topo.gif" alt="" />
Current routes at Boulders Climbing Gym
</a>
A site allows users to provide feedback on products, when the user is logged in, by clicking on the "Feedback" link in a product detail page. Other users or the product manufacturer are able to provide a response to any feedback. The feedback link displays an icon before the "Feedback" text when a response to the user's feedback is available. The help information describes this icon as a talking bubble containing quotation marks and includes the icon itself as an example. The icon's text alternative in the help text is "Response received icon". The same text alternative is used in the product detail pages (when a response is available) to allow identification of this icon through multiple modalities.
Example Code:
<a href="prod_123_feedback.htm">Feedback
<img src="response.gif" width="15" height="15" alt="Response received icon" /></a>
A link contains text and an icon, and the icon provides additional information about the target.
Example Code:
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>
The “MyCorp” company’s annual report is made available on the corporate website as a PDF file, and the annual corporate budget is made available as an Excel file on the web site.
Note: Many users prefer to know the file type when opening a file that results in opening a new application to view the file, so it is often regarded as useful to include this additional information. However, this is not required for compliance with this success criterion.
Example Code:
<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 Annual Report (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 Annual Budget (Excel)</a>
</p>
Using a link to wrap block level elements in HTML5.
Example Code:
<article>
<a href="news.html">
<h3>Budget Debate Continues in Parliament</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="Breaking News" height="30" width="30">Members of Parliament continued vigorous debate on three challenging issues surrounding the upcoming year's budget.</p>
<p>Read more</p>
</a>
</article>
This is shown in the working example of using a link to wrap block level elements.
Resources are for information purposes only, no endorsement implied.
For each link in the content that uses this technique:
Check that text or a text alternative for non-text content is included in the
a
element
If an img
element is the only content of the a
element,
check that its text alternative describes the purpose of the link
If the a
element contains one or more img
element(s)
and the text alternative of the img
element(s) is empty, check that
the text of the link describes the purpose of the link
If the a
element only contains text, check that the text describes
the purpose of the link
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Content that includes form controls.
This technique relates to:
The objective of this technique is to provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context.
This is a basic example of a form with a submit button.
Example Code:
<form action="http://www.example.com/cgi/subscribe/" method="post"><br />
<p>Enter your e-mail address to subscribe to our mailing list.</p><br />
<label for="address">Enter email address:</label><input type="text"
id="address" name="address" />
<input type="submit" value="Subscribe" /><br />
</form>
The following example uses a server-side script (specified in the
action
attribute) that redirects the user to the requested page.
Example Code:
<form action="http://www.example.com/cgi/redirect/" method="get"><br />
<p>Navigate the site.</p><br />
<select name="dest"><br />
<option value="/index.html">Home</option/><br />
<option value="/blog/index.html">My blog</option/><br />
<option value="/tutorials/index.html">Tutorials</option/><br />
<option value="/search.html">Search</option/><br />
</select><br />
<input type="submit" value="Go to Page" /><br />
</form>
Resources are for information purposes only, no endorsement implied.
Navigational pulldown menus in HTML by Jukka Korpela discusses a few techniques that work or do not work.
Find all forms in the content
For each form, check that it has a submit button (input type="submit", input type="image", or button type="submit")
#2 is true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to demonstrate how to use a title
attribute on an anchor element to provide additional text describing a link. The
title
attribute is used to provide additional information to help clarify
or further describe the purpose of a link. If the supplementary information provided
through the title
attribute is something the user should know before
following the link, such as a warning, then it should be provided in the link text
rather than in the title
attribute.
Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements.
Example Code:
<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html"
title="Read more about failed elephant evacuation">
Evacuation Crumbles Under Jumbo load
</a>
Resources are for information purposes only, no endorsement implied.
Examine the source code for anchor elements.
For each anchor element that has a title
attribute, check that the
title
attribute together with the link text describes the purpose
of the link.
Check #1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 1.3.2. See Understanding SC 1.3.2 for details.
The objective of this technique is to use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results. This may be necessary, for instance, when placing neutral characters such as spaces or punctuation between different directional text runs. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.
left-to-right mark: ‎ or ‎ (U+200E)
right-to-left mark: ‏ or ‏ (U+200F)
Due to the bidi algorithm, a source code editor may not display character entities or numeric character references as expected.
This example shows an Arabic phrase in the middle of an English sentence. The exclamation point is part of the Arabic phrase and should appear on its left. Because it is between an Arabic and Latin character and the overall paragraph direction is LTR, the bidirectional algorithm positions the exclamation mark to the right of the Arabic phrase.
The title is "مفتاح معايير الويب!" in Arabic.
Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):
the title is "HCTIWS SDRADNATS BEW!" in arabic.
Inserting a Unicode right-to-left mark in the code immediately after the exclamation mark positions it correctly when you view the displayed text (see below). You can use a character escape or the (invisible) control character to insert the right-to-left mark.
The title is "مفتاح معايير الويب!" in Arabic.
Visually-ordered ASCII version:
the title is "!HCTIWS SDRADNATS BEW" in arabic.
Resources are for information purposes only, no endorsement implied.
Examine the source for places where text changes direction.
When text changes direction, check whether neutral characters such as spaces or punctuation occur adjacent to text that is rendered in the non-default direction.
When #2 is true and the HTML bidirectional algorithm would produce the wrong placement of the neutral characters, check whether the neutral characters are followed by Unicode right-to-left or left-to-right marks that cause neutral characters to be placed as part of the preceding characters.
Check #3 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
applet
elements HTML and XHTML Documents that load Java applets where applet
is not deprecated.
This technique relates to:
Provide a text alternative for an applet by using the alt
attribute to label an applet
and providing the text alternative in the body of the applet element. In this technique, both mechanisms
are required due to the varying support of the alt
attribute and applet body text by
user agents.
Example Code:
<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
tic-tac-toe game
</applet>
View the source code of the applet element
Check that the applet element contains an alt
attribute with a text alternative
for the applet
Check that the applet element contains a text alternative for the applet in the body of the applet element
Checks #2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
alt
attributes on images used as submit buttonsApplies to content using image-based submit buttons.
This technique relates to:
For input elements of type 'image', the alt
attribute of the
input
element is used to provide a functional label. This label indicates
the button's function, but does not attempt to describe the image. The label is
especially important if there are multiple submit buttons on the page that each lead to
different results.
The input
element is used to create many kinds of form controls. Although
the HTML and XHTML DTDs permits the alt
attribute on all of these, it should be used
only on image submit buttons. User agent support for this attribute on other types of
form controls is not well defined, and other mechanisms are used to label these
controls.
An input
element with an alt
attribute
Example Code:
<form action="http://example.com/prog/text-read" method="post">
<input type="image" name="submit" src="button.gif" alt="Submit" />
</form>
Resources are for information purposes only, no endorsement implied.
For all input
elements that have a type attribute value of "image", check for
the presence of an alt
attribute.
Check that the alt
attribute indicates the
button's function.
#1 and #2 are true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
alt
attributes on img
elementsImages used within HTML documents.
This technique relates to:
When using the img
element, specify a short text alternative with the
alt
attribute. Note. The value of this attribute is referred to as "alt
text".
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
An image on a Website provides a link to a free newsletter. The image contains the text "Free newsletter. Get free recipes, news, and more. Learn more." The alt text matches the text in the image.
Example Code:
<img src="newsletter.gif" alt="Free newsletter.
Get free recipes, news, and more. Learn more." />
An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.
Resources are for information purposes only, no endorsement implied.
Examine each img
element in the content
Check that each img
element which conveys meaning contains an
alt
attribute.
If the image contains words that are important to understanding the content, the words are included in the text alternative.
Checks #2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML data tables
This technique relates to:
The objective of this technique is to programmatically associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.
The caption
element is the appropriate markup for such text and it ensures
that the table identifier remains associated with the table, including visually (by
default). In addition, using the caption
element allows screen reading software
to navigate directly to the caption for a table if one is present.
The caption
element may be used whether or not the table includes a
summary
attribute. The caption
element identifies the table
whereas the summary
attribute gives an overview of the purpose or explains
how to navigate the table. If both are used, the summary
should not duplicate
information in the caption
.
Note: Although WCAG 2.0 does not prohibit the use of layout tables, CSS-based layouts are
recommended in order to retain the defined semantic meaning of the HTML and XHTML
table
elements and to conform to the coding practice of separating
presentation from content. If a table is used for layout, the caption
element
is not used. The purpose of a layout table is simply to control the placement of
content; the table itself is “transparent" to the user. A caption
would "break"
this transparency by calling attention to the table. See F46: Failure of Success Criterion 1.3.1 due to using th elements,
caption elements, or non-empty summary attributes in
layout tables for details..
Example Code:
<table>
<caption>Schedule for the week of March 6</caption>
...</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 Table Captions: The CAPTION element
For each data table:
Check that the table includes a caption
element.
Check that the content of the caption
element identifies the table.
#1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide the definitions of words or phrases by
presenting them in a definition list. The list is marked up using the dl
element. Within the list, each term is put in a separate dt
element, and
its definition goes in the dd
element directly following it. The
title
attribute can be used to provide additional information about the
definition list.
Using dl
, dt
, and dd
ensures that relationships
between terms and their definitions are preserved if the presentation format changes and
that the list of terms and definitions is treated as a unit.
Definition lists are easiest to use when the definitions are put in alphabetical order. Definition lists are typically used in a glossary.
A list of definitions of nautical terms used on a Website about sailing.
Example Code:
<dl title="Nautical terms">
<dt>Knot</dt>
<dd>
<p>A <em>knot</em> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).</p>
</dd>
<dt>Port</dt>
<dd>
<p><em>Port</em> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).</p>
</dd>
<dt>Starboard</dt>
<dd>
<p><em>Starboard</em> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).</p>
</dd>
</dl>
Resources are for information purposes only, no endorsement implied.
For any set of words and their definitions that have the appearance of a list:
Check that the list is contained within a dl
element.
Check that each word defined in the list is contained within a dt
element.
Check that the definition for each word appears in the dd
element
immediately following the word's dt
element .
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.
In the following example, headings are used in a hierarchical layout with h3
as a subsection of h2
, which is a subsection of h1
.
Example Code:
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods...</p>
In this example, the main content of the page is in the middle column of a 3-column
page. The title of the main content matches the title of the page, and is marked as
h1
, even though it is not the first thing on the page. The content in
the first and third columns is less important, and marked with h2
.
Note: It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.
Example Code:
<head>
<title>Stock Market Up Today</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>Site Navigation</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>Stock Market up today</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>Related links</h2>
<!-- content here -->
</div>
</body>
Resources are for information purposes only, no endorsement implied.
Check that heading markup is used when content is a heading.
Check that heading markup is not used when content is not a heading.
Checks #1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to associate each data cell (in a data table) with
the appropriate headers. This technique adds a headers
attribute to each
data cell (td
element). It also adds an id
attribute to any
cell used as a header for other cells. The headers
attribute of a cell
contains a list of the id
attributes of the associated header cells. If
there is more than one id
, they are separated by spaces.
This technique is used when data cells are associated with more than one row and/or one
column header. This allows screen readers to speak the headers associated with each data
cell when the relationships are too complex to be identified using the th
element alone or the th
element with the scope
attribute.
Using this technique also makes these complex relationships perceivable when the
presentation format changes.
This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.
Example Code:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 header information with data cells
Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If “no," the table is a layout table. If “yes," the table is a data table.
For data tables, check that any cell that is associated with more than one row
and/or one column header contains a headers
attribute that lists the
id
for all headers associated with that cell.
For data tables where any cell contains an id
or
headers
attribute,
Check that each id
listed in the headers
attribute
of the data cell matches the id
attribute of a cell that is used
as a header element
Check that the headers
attribute of a data cell contains the
id
attribute of all headers associated with the data cell
Check that all ids are unique (that is, no two elements in the page have the same id)
If table is a layout table, no cells contain headers
or
id
attributes
If table is a data table and any cell contains an id
attribute,
checks #3.a, #3.b, and #3.c are true.
If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML controls that use external labels
This technique relates to:
The objective of this technique is to use the label
element to explicitly
associate a form control with a label. A label
is attached to a specific
form control through the use of the for
attribute. The value of the
for
attribute must be the same as the value of the id
attribute of the form control.
The id
attribute may have the same value as the name
attribute, but both must be provided, and the id
must be unique in the Web
page.
This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label
element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label
element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
An additional benefit of this technique is a larger clickable area for the control, since clicking on the label or the control will activate the control. This can be helpful for users with impaired motor control.
Note that the label
is positioned after input
elements of
type="checkbox"
and
type="radio"
.
Note 1: Elements that use explicitly associated labels are:
input
type="text"
input
type="checkbox"
input
type="radio"
input
type="file"
input
type="password"
textarea
select
Note 2:
The label
element is not used for the following
because labels for these elements are provided via the value attribute (for Submit and
Reset buttons), the alt
attribute (for image buttons), or element content itself
(button).
Submit and Reset buttons (
input
type="submit"
or
input
type="reset"
)
Image buttons (
input
type="image"
)
Hidden input fields (
input
type="hidden"
)
Script buttons (button
elements or <input
type="button">
)
The text field in the example below has the explicit label of "First name:". The
label
element's for
attribute matches the
id
attribute of the input
element.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
Example Code:
<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>
A small, related group of radio buttons with a clear description and labels for each individual element.
Note: To provide clear associations and instructions for a large set of related radio buttons H71: Providing a description for groups of form controls using fieldset and legend elements , should be considered.
Example Code:
<h1>Donut Selection</h1>
<p>Choose the type of donut(s) you would like then select
the "purchase donuts" button.</p>
<form action="http://example.com/donut" method="post">
<p>
<input type="radio" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="radio" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="radio" name="flavor" id="honey" value="honey"/>
<label for="honey">Honey Glazed</label><br/>
<input type="submit" value="Purchase Donuts"/>
</p>
</form>
Resources are for information purposes only, no endorsement implied.
For all input
elements of type text
, file
or
password
, for all textareas
and for all
select
elements in the Web page:
Check that there is a label
element that identifies the purpose of
the control before the input
, textarea
, or select
element
Check that the for
attribute of the label
element
matches the id of the input
, textarea
, or select
element
Check that the label
element is visible.
For all input
elements of type checkbox or radio in the Web page::
Check that there is a label
element that identifies the purpose of
the control after the input
element
Check that the for
attribute of the label
element
matches the id
of the input
element
Check that the label
element is visible.
Checks #1 and #2 are true. For Success Criterion 3.3.2, Check #3 is also true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML documents that include images that cannot be described in a short text alternative.
This technique relates to:
The objective of this technique is to provide information in a file designated by the
longdesc
attribute when a short text alternative does not adequately convey the function
or information provided in the image. The longdesc
attribute is a URI, the target of
which contains a long description of the non-text content.
Authors can provide a description for an image by including text in a separate resource or within the text of the page containing the image. An advantage of using a separate resource for the description is that it is easily reusable for multiple instances of the same image, it does not add on-page visual clutter to the original document, and the description's end-point is apparent to the user. An advantage of providing the description within the same page as the image is that all users can access the description. A limitation of the on-page method, as well as in providing multiple descriptions on a single separate page, is that current implementations supporting longdesc do not identify the long description's end-point. Authors can solve this by providing a well-formed description, which identifies the where the description ends.
Example Code:
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>
Example Code:
<img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
<div id="desc">
<h3>Long Description: Line graph of the number of subscribers</h3>
<!-- Full Description of Graph -->
<p>Long description ends.</p>
<div>
Resources are for information purposes only, no endorsement implied.
Check that the img
element has a longdesc attribute.
Check that the value of the longdesc
attribute is a valid URI of an existing resource.
Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.
#1 through #3 are all true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
noembed
with embed
Documents that load plugins with the embed
element.
This technique relates to:
The objective of this technique is to provide alternative content for the
embed
element in a noembed
element. The noembed
is rendered
only if the embed
is not supported. While it can be positioned anywhere on the
page, it is a good idea to include it as a child element of embed
so that it is
clear to assistive technologies that a text alternative is associated with the
embed
element it describes.
Example Code:
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>
Example Code:
<embed src="moviename.swf" width="100" height="80"
pluginspage="http://example.com/shockwave/download/" />
<noembed>
<img alt="Still from Movie" src="moviename.gif"
width="100" height="80" />
</noembed>;
No resources available for this technique.
(none currently listed)
Check if embed
element has a child noembed
element
Check if embed
element has a noembed
element that
immediately follows it.
#1 is true or #2 is true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML, XHTML
This technique relates to:
The objective of this technique is to create lists of related items using list elements
appropriate for their purposes. The ol
element is used when the list is
ordered and the ul
element is used when the list is unordered. Definition
lists (dl
) are used to group terms with their definitions. Although the use
of this markup can make lists more readable, not all lists need markup. For instance,
sentences that contain comma-separated lists may not need list markup.
When markup is used that visually formats items as a list but does not indicate the
list relationship, users may have difficulty in navigating the information. An example
of such visual formatting is including asterisks in the content at the beginning of each
list item and using <br>
elements to separate the list items.
Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
The list structure (ul
/ol
) is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.
This example uses an ordered list to show the sequence of steps in a process.
Example Code:
<ol>
<li>Mix eggs and milk in a bowl.</li>
<li>Add salt and pepper.</li>
</ol>
This example shows an unordered list of items to buy at the store.
Example Code:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
This example uses a definition list to group a definition with the term that is being defined.
Example Code:
<dl>
<dt>blink</dt>
<dd>turn on and off between .5 and 3 times per second
</dd>
</dl>
This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required:
<dl>
<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>
The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout:
dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}
This is shown in the working example of Contact information using a definition list
In this example the links are grouped using the ul
and li
elements.
Example Code:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><a href="kitchen.html">Kitchen</a></li>
<li><a href="bedbath.html">Bed & Bath</a></li>
<li><a href="dining.html">Fine Dining</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="storage.html">Storage</a><li>
</ul>
CSS can be used to style the list elements, so this technique can be used with a variety of visual appearances.
Here is a style that removes the list bullets and the left padding that creates the indent and flows the individual list elements horizontally.
Example Code:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: inline;
}
This style removes the list bullets and the left padding and displays the items in a floating block.
Example Code:
ul.navigation {
list-style: none;
padding: 0;
}
ul.navigation li {
display: block;
float: left;
}
Resources are for information purposes only, no endorsement implied.
Check that content that has the visual appearance of a list (with or without bullets) is marked as an unordered list.
Check that content that has the visual appearance of a numbered list is marked as an ordered list.
Check that content is marked as a definition list when terms and their definitions are presented in the form of a list.
All the checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 1.3.1. See Understanding SC 1.3.1 for details.
The objective of this technique is to demonstrate how semantic markup can be used to mark emphasized or special text so that it can be programmatically determined. Using semantic markup to mark emphasized or special text also provides structure to the document. User agents can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.
Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.
See rendered examples of semantic text.
This example shows how to use the em
and strong
elements
to emphasize text. The em
and strong
elements were
designed to indicate structural emphasis that may be rendered in a variety of ways
(font style changes, speech inflection changes, etc.).
Example Code:
...What she <em>really</em> meant to say was, "This is not ok,
it is <strong>excellent</strong>"!...
This example shows using the blockquote
element to mark up long
quotations which may require paragraph breaks. It also demonstrates the use of the
cite
element to specify a reference.
Example Code:
<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
<blockquote>
<p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
hedges, and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot face
in the cool leaves and grass.</p>
</blockquote>
Here is the use of the q
element to mark up a shorter quotation.
Quotes are provided around the q
element, because many user agents do
not support this element yet and therefore do not display it properly (see UA
notes). CSS rules to suppress automatic generation of quotes are provided for those
user agents that do support the q
element, to prevent them from
generating quotes automatically in addition to the quotes provided by the author,
resulting in double-quoted content. In the future, when the q
element
is more broadly supported, the need to provide quotes and suppress browser-generated
quotes will go away.
Example Code:
q:before { content: ""; }
q:after { content: ""; }
Example Code:
<p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world.</q>"</p>
Superscripts and subscripts are created using the sup
and
sub
elements.
Example Code:
<p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>
Resources are for information purposes only, no endorsement implied.
Examine the content for information that is conveyed through variations in presentation of text.
Check that appropriate semantic markup (such as em
, strong
, cite
,
blockquote
, sub
, and sup
) have been used to mark the
text that conveys information through variations in text.
Check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to present tabular information in a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed. Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.
Using the table
element with the child elements tr
,
th
, and td
makes these relationships perceivable. Techniques
such as inserting tabs to create columns or using the pre
element are
purely visual, and visually implied logical relationships are lost if the user cannot
see the table or the visual presentation is changed.
Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.
Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e. they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.
Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.
This example uses markup for a simple data table. The first row shows the days of
the week. Time intervals are shown in the first column. These cells are marked with
the th
element. This identifies the days of the week as column headers
and the time intervals as row headers.
Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.
Example Code:
<table>
<tr>
<td> </td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet with Sam</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9:00-10:00</th>
<td> </td>
<td> </td>
<td>Doctor Williams</td>
<td>Sam again</td>
<td>Leave for San Antonio</td>
</tr>
</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 Table Element
HTML 4.01 Table rows: The TR element
HTML 4.01 Table cells: The TH and TD elements
Check for the presence of tabular information.
For each occurrence of tabular information:
Check that table markup with at least the elements table
,
tr
, th
, and td
is used.
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
object
elementDocuments that load media with the object
element.
This technique relates to:
The objective of this technique is to provide a text alternative for content rendered
using the object element. The body of the object
element can be used to provide a
complete text alternative for the object, or may contain additional non-text content with
text alternatives.
Fallback content for the object
element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.
Example Code:
<object classid="http://www.example.com/analogclock.py">
<p>Here is some text that describes the object and its operation.</p>
</object>
Example Code:
<object classid="http://www.example.com/animatedlogo.py">
<img src="staticlogo.gif" alt="Company Name" />
</object>
Example Code:
<object data="companylogo.gif" type="image/gif">
<p>Company Name</p>
</object>
This example takes advantage of the fact the object
elements may be nested
to provide for alternative representations of information.
Example Code:
<object classid="java:Press.class" width="500" height="500">
<object data="Pressure.mpeg" type="video/mpeg">
<object data="Pressure.gif" type="image/gif">
As temperature increases, the molecules in the balloon...
</object>
</object>
</object>
Resources are for information purposes only, no endorsement implied.
Check that the body of each object
element contains a text alternative
for the object.
#1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
dfn
element to identify the defining instance of a wordHTML and XHTML
This technique relates to:
The objective of this technique is to use the dfn
to mark the use of a
word or phrase where it is defined. The dfn
element is used to indicate the
defining instance of the enclosed term. In other words, it marks the occurrence of the
term where the term is defined. Note that it encloses the term, not the definition. This
technique would be used in combination with G112: Using inline definitions to provide the definition.
The following code snippet demonstrates the use of the dfn
element.
Example Code:
<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 DFN Element
Identify all words that are defined inline in the text, that is, where the definition occurs in a sentence near an occurrence of the word.
Check that each word that is defined inline is contained in a dfn
element.
Check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
dir
attribute on an inline element to resolve problems
with nested directional runsHTML and XHTML
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 1.3.2. See Understanding SC 1.3.2 for details.
The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir
attribute on
inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir
attribute on an enclosing span
or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed
directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
This example defines the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left. Because the whole quote is in Hebrew, and therefore runs right to left, the text "W3C" and the comma should appear to the left of (i.e., after) the Hebrew text, like this:
The title is "פעילות הבינאום, W3C" in Hebrew.
Visually-ordered ASCII version (RTL text in uppercase, LTR in lower):
the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.
The Unicode bidirection algorithm alone is insufficient to achieve the right result, and leaves the text 'W3C' on the right side of the quote:
The title is "פעילות הבינאום, W3C" in Hebrew.
Visually-ordered ASCII version:
the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.
The following markup will produce the expected result:
Example Code:
<p>The title says "<span lang="he"
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>
Resources are for information purposes only, no endorsement implied.
Examine the text direction of text in the document
If the text direction is right-to-left, check that for the ancestor element that
has a dir
attribute, the attribute has the value "rtl"
If the text direction is left-to-right, check that there is no ancestor element
with a dir
attribute, or that for the ancestor element that has a
dir
attribute, the attribute has the value "ltr"
Checks #2 and #3 are true for all text.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to identify the default language of a document by
providing the lang
and/or xml:lang
attribute on the html
element.
Identifying the language of the document is important for a number of reasons:
It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.
Speech synthesizers that support multiple languages will be able to orient and adapt to the pronunciation and syntax that are specific to the language of the page, speaking the text in the appropriate accent with proper pronunciation.
Marking the language can benefit future developments in technology, for example users who are unable to translate between languages themselves will be able to use machines to translate unfamiliar languages.
Marking the language can also assist user agents in providing definitions using a dictionary.
HTML 4.01 uses the lang
attribute of the html
element. XHTML served
as text/html uses the lang
attribute and the xml:lang
attribute of
the html
element, in order to meet the requirements of XHTML and provide
backward compatibility with HTML. XHTML served as application/xhtml+xml uses the
xml:lang
attribute of the html
element. Both the lang
and the xml:lang
attributes can take only one value.
Note 1:
HTML only offers the use of the lang
attribute, while XHTML 1.0 (as a
transitional measure) allows both attributes, and XHTML 1.1 allows only
xml:lang
.
Note 2: Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.
This example defines the content of an HTML document to be in the French language.
Example Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
This example defines the content of an XHTML 1.0 document with content type of
text/html to be in the French language. Both the lang
and
xml:lang
attributes are specified in order to meet the requirements of
XHTML and provide backward compatibility with HTML.
Example Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
This example defines the content of an XHTML 1.1 document with content type of
application/xhtml+xml to be in the French language. Only the xml:lang
attribute is specified.
Example Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
Resources are for information purposes only, no endorsement implied.
Examine the html
element of the document.
Check that the html
element has a lang
and/or
xml:lang
attribute.
Check that the value of the lang
attribute conforms to BCP 47: Tags for the
Identification of Languages or its successor and reflects the primary language used by the Web page.
The above checks are all true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to clearly identify any changes in language on a
page by using the lang
or xml:lang
attribute, as appropriate
for the HTML or XHTML version you use.
HTML 4.01 uses the lang
attribute on elements. XHTML served as text/html
uses the lang
attribute and the xml:lang
attribute on
elements, in order to meet the requirements of XHTML and provide backward compatibility
with HTML. XHTML served as application/xhtml+xml uses the xml:lang
attribute on elements.
Note: HTML only offers the use of the lang
attribute, while XHTML 1.0 (as a
transitional measure) allows both attributes, and XHTML 1.1 allows only
xml:lang
.
Allowed values for the lang and xml:lang attributes are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional subcodes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of subcodes is optional but may be helpful in certain circumstances.
This example demonstrates the use of the xml:lang
attribute defining a
quote written in German. This snippet could be included by an XHTML 1.1 document
where lang
is not allowed.
Example Code:
<blockquote xml:lang="de">
<p>
Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
aber der Esel merkte, daß kein guter Wind wehte, lief fort
und machte sich auf den Weg nach Bremen: dort, meinte er,
könnte er ja Stadtmusikant werden.
</p>
</blockquote>
Resources are for information purposes only, no endorsement implied.
For each element in the document:
Check that the human language of the content of the element is the same as the inherited language for the element as specified in HTML 4.01, Inheritance of language codes
For each lang
attribute in the document:
Check that the value of the lang
attribute conforms to BCP 47: Tags for the
Identification of Languages or its successor
For each xml:lang attribute in the document:
Check that the value of the xml:lang
attribute conforms to BCP 47: Tags for the
Identification of Languages or its successor
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to describe how the link
element can
provide metadata about the position of an HTML page within a set of Web pages or can
assist in locating content with a set of Web pages. The value of the rel
attributes indicates what type of relation is being described, and the href
attribute provides a link to the document having that relation. Multiple
link
elements can provide multiple relationships. Several values of
rel
are useful:
Start: Refers to the first document in a collection of documents.
Next: Refers to the next document in a linear sequence of documents.
Prev: Refers to the previous document in an ordered series of documents.
Contents: Refers to a document serving as a table of contents.
Index: Refers to a document providing an index for the current document.
A Web page for Chapter 2 of an on-line book might contain the following links
within the head
section.
Example Code:
<link rel="Contents" href="Contents.html" title="Table of Contents" />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />
Resources are for information purposes only, no endorsement implied.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
For a Web page that is within a sequence or collection of Web pages:
Check that all link
elements pertaining to navigation occur in the
head
section of the document.
For each link
element in the head
section of the
document which pertains to navigation, check that it contains at least:
a rel
attribute identifying the link type
a valid href
attribute to locate the appropriate resource
All of the checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide a mechanism for locating a glossary. When
terms in the content are defined on a separate glossary page, the glossary is referenced
using a link
element in the head
element of the document that
uses the glossary. The rel
attribute of the link
element is
set to "glossary", and the href
attribute contains the URI of the glossary
page. User agents can then assist users in accessing the glossary quickly and
easily.
Example Code:
<link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">
Resources are for information purposes only, no endorsement implied.
Use <link>s in your document from W3C's Quality Web Tips
LINK - Document Relationship from Web Design Group
(none currently listed)
For any set of words and their definitions that are meant to serve as a glossary:
Check that the head
section of the Web page that contains words,
phrases or abbreviations defined in a glossary contains a link
element
Check that the link
element has attribute
rel="glossary"
Check that the href
attribute of the link
element
refers to the glossary page.
All checks above are true.
Note: The definition of abbreviation used in WCAG is : "shortened form of a word, phrase, or name where the original expansion has not been rejected by the organization that it refers to and where the abbreviation has not become part of the language."
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
XHTML 1.1
This technique relates to:
The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.
There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.
Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages. Ruby Annotation is defined as a module for XHTML 1.1.
There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a
run of text such as a complete word or phrase. This is known as the "base" text
(rb
element). The Ruby annotation that indicates how to pronounce the term (the
rt
element, or Ruby text) is shown in a smaller font. (The term "Ruby" is
derived from a small font used for this purpose in printed texts.) The Ruby text is
usually rendered above or immediately before the base text, that is, immediately above
horizontal text or immediately to the right of vertical text. Sometimes Japanese uses
Ruby to provide the meaning of text on the other side of the base text (visually) from
the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user
agents that do not support Ruby markup (that is, user agents that do not support XHTML
1.1).
Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.
Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.
Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.
This example uses Ruby annotation to give the pronunciation of the initialism
(acronym) formed by the first letters of the words Web Content Accessibility
Guidelines. The letters WCAG are the base (the rb element), and the pronunciation
information is shown by the Ruby text (the rt element). The Ruby parenthesis element
rp
is used for user agents that do not support Ruby annotations to
indicate that the text in the rt
element provides the pronunciation
information. The pronunciation information is rendered in parentheses immediately
following the base text. (User agents that support Ruby do not show the
parentheses.)
Example Code:
<p>When we talk about these guidelines, we often just call them
<ruby>
<rb>WCAG</rb>
<rp>(</rp>
<rt>Wuh-KAG</rt>
<rp>)</rp>
</ruby>.
</p>
The following is an example in Japanese. For Japanese, the Ruby is used to give
the reading of Han characters(Kanji). the Ruby parenthesis element rp
is
used for user agents that do not support Ruby annotations to indicate that the text
in the rt
element provides the pronunciation information. The pronunciation
information is rendered in parentheses immediately following the base text. (User
agents that support Ruby do not show the parentheses.)
Example Code:
<p>
<ruby>
<rb>慶應大学</rb>
<rp>(</rp>
<rt>けいおうだいがく</rt>
<rp>)</rp>
</ruby>
</p>
Resources are for information purposes only, no endorsement implied.
For each run of text where a Ruby annotation is used to provide pronunciation information:
Check that a rt
element contains pronunciation information for each
run of text defined by the rb
element.
If simple Ruby markup is used, check that the rp
element is present
to indicate to user agents that do not support Ruby annotations that the text in
the rt element provides the pronunciation information. .
Checks #1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to associate header cells with data cells in complex tables using the
scope
attribute. The scope
attribute may be used to clarify
the scope of any cell used as a header. The scope identifies whether the cell is a
header for a row, column, or group of rows or columns. The values row
,
col
, rowgroup
, and colgroup
identify these
possible scopes respectively.
For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables:
data cells marked up with td
that also function as row header or column
header
header cells marked up with td
instead of th
. Sometimes, authors
use this to avoid the display characteristics associated with th
and also
do not choose to use CSS to control the display for th
.
Note 1: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.
Note 2: For complex tables use ids and headers as in H43: Using id and headers attributes to associate data cells with header cells in data tables.
Note 3: Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.
In the following example, column #1 contains serial numbers for rows in the table
and the second column contains the key value for the row. The cells in the second
column may then use
scope="row"
. The cells in the first row too are
marked up with td
and use
scope="col"
.
Example Code:
<table border="1">
<caption>Contact Information</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone#</th>
<th scope="col">Fax#</th>
<th scope="col">City</th>
</tr><tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<th scope="row">Clive Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr><tr>
<td>3.</td>
<th scope="row">Gordon Greenidge</th>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table>
Resources are for information purposes only, no endorsement implied.
For each data table:
Check that all th
elements have a scope
attribute.
Check that all td
elements that act as headers for other elements
have a scope
attribute.
Check that all scope
attributes have the value row
,
col
, rowgroup
, or colgroup
.
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
title
attribute of the frame
and iframe
elementsHTML and XHTML documents that use frames or iframes
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 2.4.1. See Understanding SC 2.4.1 for details.
The objective of this technique is to demonstrate the use of the title
attribute of the frame
or iframe
element to describe the contents
of each frame. This provides a label for the frame so users can determine which frame to
enter and explore in detail. It does not label the individual page (frame) or inline
frame (iframe) in the frameset.
Note that the title
attribute labels frames, and is different from the
title
element which labels documents. Both should be provided, since the
first facilitates navigation among frames and the second clarifies the user's current
location.
The title
attribute is not interchangeable with the name
attribute. The title
labels the frame for users; the name
labels it for scripting and window targeting. The name
is not presented to
the user, only the title
is.
This example shows how to use the title
attribute with
frame
to describe the frames containing the navigation bar and the
document.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A simple frameset document</title>
</head>
<frameset cols="10%, 90%">
<frame src="nav.html" title="Main menu" />
<frame src="doc.html" title="Documents" />
<noframes>
<body>
<a href="lib.html" title="Library link">Select to
go to the electronic library</a>
</body>
</noframes>
</frameset>
</html>
This example shows how to use the title attribute with iframe
to
describe the contents of an inline frame. The example also includes an alternative
link to the page included by the iframe element for older browsers, which may not
understand the iframe
element.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A document using iframe</title>
</head>
...
<iframe src="banner-ad.html" id="testiframe"
name="testiframe" title="Advertisement">
<a href="banner-ad.html">Advertisement</a>
</iframe>
...
</html>
Resources are for information purposes only, no endorsement implied.
Check each frame and iframe element in the HTML or XHTML source code for the presence of a title attribute.
Check that the title attribute contains text that identifies the frame.
Checks #1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML form controls that are not identified using value
,
alt
, or element content
This technique relates to:
The objective of this technique is to use the title
attribute to label
form controls when the visual design cannot accommodate the label (for example, if there
is no text on the screen that can be identified as a label) or where it might be
confusing to display a label. User agents, including assistive technology, can speak the
title
attribute.
A search form uses a pulldown menu to limit the scope of the search. The pulldown
menu is immediately adjacent to the text field used to enter the search term. The
relationship between the search field and the pulldown menu is clear to users who
can see the visual design, which does not have room for a visible label. The
title
attribute is used to identify the select
menu. The
title
attribute can be spoken by screen readers or displayed as a
tool tip for people using screen magnifiers.
Example Code:
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select>
A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.
Example Code:
<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code"
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number"
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number"
type="text" size="4" value="" >
</fieldset>
A Web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title
attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
Example Code:
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non-visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.
For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.
Resources are for information purposes only, no endorsement implied.
Identify each form control that is not associated with a label
element
Check that the control has a title
attribute
Check that the title
attribute identifies the purpose of the
control
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML documents that load images.
This technique relates to:
The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.
If no title attribute is used, and the alt text is set to null (i.e.
alt=""
) it indicates to assistive technology that the image can be safely
ignored.
Note: Have a "null" alt
attribute is not the same as having no alt
attribute.
The following image is used to insert a decorative image on a Web page.
Example Code:
<img src="squiggle.gif" width="20" height="20" alt="" />
No resources available for this technique.
(none currently listed)
For each image that should be ignored:
Check that title
attribute is either absent or empty.
Check that alt
attribute is present and empty.
#1 and #2 are true
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:
to indicate start of main content
to mark up section headings within the main content area
to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation
to mark up images of text that are used as headings
to allow users the ability to navigate a page by sections or skip repeated blocks of information
Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.
Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.
Note: All of our techniques assume that people needing special user agents (including AT or special plug-ins) will get and be using that type user agent (eg screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc).
This example organizes the sections of a search page by marking each section
heading using h2
elements.
Example Code:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ...
In this example, heading markup is used to make the navigation and main content sections perceivable.
Example Code:
<!-- Logo, banner graphic, search form, etc. -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- Text, images, other material making up the main content... -->
Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of sections. Because there is no markup to associate a heading element with the section content explicitly, users will assume that the heading applies to all following content until the next heading element is encountered.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</body>
</html>
Resources are for information purposes only, no endorsement implied.
Pick a Heading Eric Meyer
For Firefox, the following plugins provide header navigation via the keyboard:
Check that the content is divided into separate sections
Check that each section on the page starts with a heading.
For 2.4.1 check #2 is true.
For 2.4.10 checks #1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML documents that use frames
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 2.4.1. See Understanding SC 2.4.1 for details.
The objective of this technique is to demonstrate how framesets can be used to group blocks of repeated material. Since most user agents and assistive technology provide a way to navigate from frame to frame, using frames to organize elements can provide a mechanism for easily bypassing blocks of repeated content. If the site uses framesets, organize the blocks of content into separate frames. Make certain that the repeated blocks of content appear in the same frame within the frameset of each Web page. In addition, each frame element must have a title attribute to describe the content of the frame. When frames are properly titled, users can use frame navigation to easily navigate between blocks of content.
This technique is appropriate when framesets are already used to organize the content of the page; other techniques are preferred for pages that are not already using framesets, because many people using assistive technology have trouble with frames . An advisory technique about using noframes is available in Success Criterion 1.1.1.
The following example shows the use of two frames to organize content. The source of the first frame is the Web page, navigation.html, which contains the HTML for the navigation. This frame has a title attribute which identifies it as a navigation bar. The second frame contains the main content of the site as indicated by the source parameter of main.html and the title attribute, "Main News Content" which identifies its function.
Example Code:
<frameset cols="20%, *">
<frame src="navigation.html" name="navbar" title="Navigation Bar" />
<frame src="main.html" name="maincontent" title="Main News Content" />
<noframes>
<p>View <a href="noframe.html">no frame version</a>.</p>
</noframes>
</frameset>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 The FRAMESET element
HTML 4.01 The FRAME element
If the Web page uses frames to organize content:
Check if repeated blocks of content are organized into separate frames.
Check that the frames with repeated content appear in the same location within each frameset.
Checks #1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
Form controls can be grouped by enclosing them within the fieldset
element. All controls within a given fieldset
are then related. The first element inside the fieldset
must be a legend
element, which provides a label or description for the group. Authors should avoid nesting fieldsets
unnecessarily, as this can lead to confusion.
Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend
before the label of each control to provide this description, as well as to remind users that they are part of the same group.
It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e. where the individual label associated with each particular control provides a sufficient description), the use of the fieldset
and legend
elements is not required.
H44: Using label elements to associate text labels with form controls is sufficient in this case.
Authors sometimes avoid using the fieldset
element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the fieldset
and the "position" property of the legend
.
This example shows a test item with one question and five possible answers. Each
answer is represented by a radio button (
input
type="radio"
). The radio
buttons are contained within a fieldset
. The test question is tagged
with the legend
element.
Example Code:
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
<input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
<label for="shakesp">William Shakespeare</label><br />
<input type="radio" id="kipling" name="hamlet" value="b">
<label for="kipling">Rudyard Kipling</label><br />
<input type="radio" id="gbshaw" name="hamlet" value="c">
<label for="gbshaw">George Bernard Shaw</label><br />
<input type="radio" id="hem" name="hamlet" value="d">
<label for="hem">Ernest Hemingway</label><br />
<input type="radio" id="dickens" name="hamlet" value="e">
<label for="dickens">Charles Dickens</label>
</fieldset>
The User Profile page for a Web site allows users to indicate their interests by
selecting multiple checkboxes. Each checkbox (
input
type="checkbox"
)
has a label
. The checkboxes are contained within a
fieldset
, and the legend
element contains the prompt for
the entire group of checkboxes.
Example Code:
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label><br />
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label><br />
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
This example requests the user to choose a single philosopher. Note that each field has the same "name
" attribute, indicating these radio buttons are related (they all submit the same field), and should be grouped as shown. Also note that while the "name
" attributes are the same, the "id
" attributes must be unique.
Example Code:
<form action="http://example.com/vote" method="post">
<fieldset>
<legend>Your preferred philosopher</legend>
<input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
<label for="philosopher_socrates">Socrates</label>
<input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
<label for="philosopher_plato">Plato</label>
<input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
<label for="philosopher_aristotle">Aristotle</label>
</fieldset>
</form>
Note: Groups of related checkboxes work in the same way, except the user is allowed to express more than one preference for the field.
In this example, form fields for residential and postal addresses are distinguished by the value of the legend
in each fieldset
grouping.
Example Code:
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddress">Address: </label>
<input type="text" id="raddress" name="raddress" />
<label for="rzip">Postal/Zip Code: </label>
<input type="text" id="rzip" name="rzip" />
...more residential address information...
</fieldset>
<fieldset>
<legend>Postal Address</legend>
<label for="paddress">Address: </label>
<input type="text" id="paddress" name="paddress" />
<label for="pzip">Postal/Zip Code: </label>
<input type="text" id="pzip" name="pzip" />
...more postal address information...
</fieldset>
</form>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 Checkboxes
For groups of related controls where the individual labels for each control do not provide a sufficient description, and an additional group level description is needed,
Check that the group of logically related input
or select
elements are contained within fieldset
elements.
Check that each fieldset
has a legend
element that includes a description for that group.
All of the above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML 4.01, XHTML 1.x
This technique relates to:
The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary
attribute of the table
element makes this information available to people who use screen readers; the information is not displayed visually.
The summary
is useful when the table has a complex structure (for example,
when there are several sets of row or column headers, or when there are multiple groups
of columns or rows). The summary
may also be helpful for simple data tables
that contain many columns or rows of data.
The summary
attribute may be used whether or not the table includes a
caption
element. If both are used, the summary
should not
duplicate the caption
.
Note: Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are
recommended in order to retain the defined semantic meaning of the HTML table
elements and to conform to the coding practice of separating presentation from content.
However, if a layout table is used, then the summary
attribute is not used or
is null. The purpose of a layout table is simply to control the placement of content;
the table itself is “transparent" to the user. A summary
would “break" this
transparency by calling attention to the table. A null summary
(summary=""
) on layout tables is acceptable. See F46: Failure of Success Criterion 1.3.1 due to using th elements,
caption elements, or non-empty summary attributes in
layout tables for details.
This example shows a bus schedule. The route number and direction are included in
the summary
along with information on how to use the schedule.
Example Code:
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
Find the intersection closest to your starting point or destination, then read
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table>
In this example both a summary
attribute and a caption
element are used. The caption
identifies the bus route. The
summary
helps users who are blind understand how to use the schedule.
Screen readers read the caption
, followed by the
summary
.
Example Code:
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
or destination, then read down that column to find
out what time the bus leaves that intersection.
Service begins at 4:00 AM and ends at midnight.">
<caption>Route 7 Downtown (Weekdays)</caption>
…
</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 summary attribute
For each data table:
If a summary
is present, check that the summary
attribute describes the table's organization or explains how
to use the table
If both a summary
attribute and a caption
element are present
for the data table, check that the summary
does not
duplicate the caption
.
#1 and #2 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 4.1.1. See Understanding SC 4.1.1 for details.
The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content which involve having opening and closing tags that are not used according to specification. These errors can be avoided by using the HTML or XHTML mechanism to specify the technology and technology version, and making sure the Web page does not have these types of errors in it. There are several validators that the developer can use: validation reports generally mention these types of errors. This technique deals only with errors related to incorrectly formed opening and closing tags. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.
HTML pages include a document type declaration (sometimes referred to as
!DOCTYPE
statement). The developer can use offline or online
validators (see Resources below) to check that all id attribute values are unique
and that opening and closing tags are used according to the specification.
Note: The specification for which tags require closing elements has changed with the introduction of HTML5.
Like other other XML-based documents, XHTML documents reference a Document Type Definition (DTD) or other type of XML schema. The developer can use online or offline validators (including validation tools built into editors) to check that opening and closing tags are used according to the specification.
When a Website generates HTML or XHTML dynamically instead of serving only static pages, a developer can use XHTMLUnit, XML Test Suite or a similar framework to test the generated XHTML code.
Resources are for information purposes only, no endorsement implied.
Do not forget to add a doctype by the W3C Quality Assurance Initiative explains what doctypes are and why you should use them.
Recommended DTDs to use in your Web document by the W3C Quality Assurance Initiative is a list of commonly used declarations.
How do I validate my code or check for possible errors? describes the tools in the free editor HTML-Kit for checking HTML, CSS and XML.
For other resources, see G134: Validating Web pages.
(none currently listed)
Check that there are closing tags for all elements with required closing tags.
Check that there are no closing tags for all elements where closing tags are forbidden.
Check that opening and closing tags for all elements are correctly nested.
Steps 1, 2, and 3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Any XML-based markup languages.
This technique relates to:
The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse contents. Well-formedness is checked by parsing the document with a conforming XML parser and checking if the validation report mentions well-formedness errors. Every conforming XML parser is required to check well-formedness and stop normal processing when a well-formedness error is found (a conforming XML parser does not need to support validation).
XML files include a document type declaration, a xsi:schemaLocation attribute or other type of reference to a schema. The developer can use off-line or online validators, an XML editor or an IDE with XML support (see Resources below) to check well-formedness.
When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the relevant schema is specified by a command line instruction, a user dialog or a configuration file, and the XML files are checked against the schema.
When XML files do not include a document type declaration, a xsi:schemaLocation attribute or a processing instruction referencing a schema even though there is a schema for them, the namespace is dereferenced to retrieve a schema document or resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the schema.
When a Website generates XML dynamically instead of serving only static documents, a developer can use XMLUnit, XML Test Suite or a similar framework to test the generated XML code.
Resources are for information purposes only, no endorsement implied.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.0 (Third Edition), W3C Recommendation 04 February 2004.
Well-Formed XML Documents in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
4.3.2 Well-Formed Parsed Entities in Extensible Markup Language (XML) 1.1, W3C Recommendation 04 February 2004.
For other resources, see G134: Validating Web pages.
(none currently listed)
Load each file into a validating XML parser.
Check that there are no well-formedness errors.
Step 2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to enable redirects on the client side without confusing the user. Redirects are preferably implemented on the server side (see SVR1: Implementing automatic redirects on the server side instead of on the client side (SERVER) ), but authors do not always have control over server-side technologies.
In HTML and XHTML, one can use the meta
element with the value of
the http-equiv
attribute set to "Refresh
" and the value of the
content
attribute set to "0" (meaning zero seconds), followed by the URI
that the browser should request. It is important that the time-out is set to zero, to
avoid that content is displayed before the new page is loaded. The page containing the
redirect code should only contain information related to the redirect.
Example Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Tudors</title>
<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />
</head>
<body>
<p>This page has moved to a <a href="http://thetudors.example.com/">
theTudors.example.com</a>.</p>
</body>
</html>
Resources are for information purposes only, no endorsement implied.
Find all meta
elements in the document.
For each meta element, check if it contains the attribute
http-equiv
with value "refresh
" (case-insensitive) and the
content
attribute with a number greater than 0 followed by
;'URL=anyURL'
(where anyURL stands for the URI that should replace
the current page).
Step 2 is false.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
All technologies that contain links.
This technique relates to:
The objective of this technique is to identify the purpose of a link from the link and its list item context. The list item enclosing the link provides context for an otherwise unclear link when the list item is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.
Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).
Example Code:
<ul>
<li>
Check out the video report for last year's
<a href="festival.htm">National Folk Festival</a>.
</li>
<li>
<a href="listen.htm">Listen to the instruments</a>
</li>
<li>
Guitar Man: George Golden talks about
<a href="mkguitars.htm">making guitars</a>.
</li>
</ul>
Example Code:
<ul>
<li>
<a href="tomb_raider.htm">Tomb Raider: Legend</a>
<a href="tomb_raider_images.htm">See Images</a>
<a href="tomb_raider.mpeg">(Download Demo)</a>
</li>
<li>
<a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
<a href="fear_extraction_images.htm">See Images</a>
<a href="fear_extraction.mpeg">(Download Demo)</a>
</li>
<li>
<a href="call_of_duty.htm">Call of Duty 2</a>
<a href="call_of_duty_images.htm">See Images</a>
<a href="call_of_duty.mpeg">(Download Demo)</a>
</li>
<li>
<a href="Warhammer 40K.htm">Warhammer 40K</a>
<a href="warhammer_40k_images.htm">See Images</a>
<a href="Warhammer_40k.mpeg">(Download Demo)</a>
</li>
</ul>
No resources available for this technique.
For each link in the content that uses this technique:
Check that the link is part of a list item.
Check that text of the link combined with the text of its enclosing list item describes the purpose of the link.
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
All technologies that contain links.
This technique relates to:
The objective of this technique is to identify the purpose of a link from the link in its paragraph context. The paragraph enclosing the link provides context for an otherwise unclear link when the paragraph is the nearest enclosing block-level ancestor element. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is generally not sufficiently descriptive.
Note: These descriptions will be most useful to the user if the additional information needed to understand the link precedes the link. If the additional information follows the link, there can be confusion and difficulty for screen reader users who are reading through the page in order (top to bottom).
Announcements column on a Folk Festival Web page.
Example Code:
<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>
<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive
National Heritage Fellowships.
<a href="nheritage.html">[Read more...]</a>
</p>
…
No resources available for this technique.
For each link in the content that uses this technique:
Check that the link is part of a paragraph.
Check that text of the link combined with the text of its enclosing paragraph describes the purpose of the link.
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
All technologies that contain links.
This technique relates to:
The objective of this technique is to identify the purpose of a link from the link in its data table context. This context is the table cell enclosing the link and the cell's associated table header cells. The data table context provides the purpose for an otherwise unclear link when the table cell is the nearest enclosing block-level ancestor element. It lets a user distinguish this link from other links in the Web page that lead to other destinations and helps the user determine whether to follow the link. Note that simply providing the URI of the destination is not sufficiently descriptive for people with disabilities, especially those with cognitive disabilities.
Example Code:
<table>
<tr>
<th></th>
<th scope="col">Alamo</th>
<th scope="col">Budget</th>
<th scope="col">National</th>
<th scope="col">Avis</th>
<th scope="col">Hertz</th>
</tr>
<tr>
<th scope="row">Economy cars</th>
<td><a href="econ_ala.htm">$67/day</a></td>
<td><a href="econ_bud.htm">$68/day</a></td>
<td><a href="econ_nat.htm">$72/day</a></td>
<td><a href="econ_av.htm">$74/day</a></td>
<td><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
<th scope="row">Compact cars</th>
<td><a href="comp_ala.htm">$68/day</a></td>
<td><a href="comp_bud.htm">$69/day</a></td>
<td><a href="comp_nat.htm">$74/day</a></td>
<td><a href="comp_av.htm">$76/day</a></td>
<td><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
<th scope="row">Mid-sized cars</th>
<td><a href="mid_ala.htm">$79/day</a></td>
<td><a href="mid_bud.htm">$80/day</a></td>
<td><a href="mid_nat.htm">$83/day</a></td>
<td><a href="mid_av.htm">$85/day</a></td>
<td><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
<th scope="row">Full-sized cars</th>
<td><a href="full_ala.htm">$82/day</a></td>
<td><a href="full_bud.htm">$83/day</a></td>
<td><a href="full_nat.htm">$89/day</a></td>
<td><a href="full_av.htm">$91/day</a></td>
<td><a href="full_hz.htm">$91/day</a></td>
</tr>
</table>
No resources available for this technique.
For each link in the content that uses this technique:
Check that the link is in a table cell.
Check that text of the link combined with the text of the associated table header cells describes the purpose of the link.
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to describe the purpose of a link from the context provided by its heading context. The preceding heading provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.
Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.
The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.
Example Code:
<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
Example Code:
<h2>Annual Report 2006-2007</h2>
<p>
<a href="annrep0607.html">(HTML)</a>
<a href="annrep0607.pdf">(PDF)</a>
<a href="annrep0607.rtf">(RTF)</a>
</p>
Example Code:
<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%.
<a href="Stockmarket_05052007.htm>More here</a></p>
No resources available for this technique.
For each link in the content that uses this technique:
Find the heading element that precedes the link
Check that the text of the link combined with the text of that heading describes the purpose of the link.
#2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to describe the purpose of a link in a nested list from the context provided by the list item under which the list is nested. This list item provides context for an otherwise unclear link. The description lets a user distinguish this link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.
Because current assistive technologies do not include commands to query contextual information provided by parent list items, use of this technique requires users to navigate the list one item at a time. Therefore, this technique may not be appropriate for very long or deeply nested lists.
Note: Whenever possible, provide link text that identifies the purpose of the link without needing additional context.
Example Code:
<ul>
<li>Annual Report 2005-2006
<ul>
<li><a href="annrep0506.html">(HTML)</a></li>
<li><a href="annrep0506.pdf">(PDF)</a></li>
<li><a href="annrep0506.rtf">(RTF)</a></li>
</ul>
</li>
<li>Annual Report 2006-2007
<ul>
<li><a href="annrep0607.html">(HTML)</a></li>
<li><a href="annrep0607.pdf">(PDF)</a></li>
<li><a href="annrep0607.rtf">(RTF)</a></li>
</ul>
</li>
</ul>
The information for each hotel consists of the hotel name, a description and a series of links to a map, photos, directions, guest reviews and a booking form.
Example Code:
<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
<ul class="horizontal">
<li><a href="royal_palm_hotel_map.html">Map</a></li>
<li><a href="royal_palm_hotel_photos.html">Photos</a></li>
<li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
<li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
<li><a href="royal_palm_hotel_book.html">Book now</a></li>
</ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
<ul class="horizontal">
<li><a href="hotel_three_rivers_map.html">Map</a></li>
<li><a href="hotel_three_rivers_photos.html">Photos</a></li>
<li><a href="hotel_three_rivers_directions.html">Directions</a></li>
<li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
<li><a href="hotel_three_rivers_book.html">Book now</a></li>
</ul>
</li>
</ul>
No resources available for this technique.
For each link in the content that uses this technique:
Find the ul
or ol element that contains the link
Check that this list element (ul
, ol
) is a descendant of an
li
element
Check that the text of the link combined with the text of that li element describes the purpose of the link.
The above checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML 4.01 Transitional and XHTML 1.0 Transitional
This technique relates to:
The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorientate or be missed completely by some users. In HTML 4.01 Transitional and XHTML 1.0 Transitional, the target
attribute can be used to open a new window, instead of automatic pop-ups. (The target
attribute is deleted from HTML 4.01 Strict and XHTML 1.0 Strict.) Note that not using the target
allows the user to decide whether a new window should be opened or not. Use of the target
attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.
The following example illustrates the use of the target
attribute in a link that indicates it will open in a new window.
Example Code:
<a href="help.html" target="_blank">Show Help (opens new window)</a>
Activate each link in the document to check if it opens a new window.
For each link that opens a new window, check that it uses the target
attribute.
Check that the link text contains information indicating that the link will open in a new window.
Checks #2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select
element. The user may inspect the different values of the select
element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.
This is particularly important for users who are choosing the value of the select
element via the keyboard, since navigating through the options of the select
element changes the value of the control.
A Web page lets the user choose any month of any year and display the calendar for that month. After the user has set the month and year, he displays the calendar by pressing the "Show" button. This example relies on client-side scripting to implement the action.
Example Code:
<label for="month">Month:</label>
<select name="month" id="month">
<option value="1">January</option>
<option value="2"> February</option>
...
<option value="12">December</option>
</select>
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">
A select
element contains a list of possible actions. The action is not performed until the user presses the "Do it" button.
Example Code:
<form action="http://somesite.com/action" method="post">
<label for="action">Options:</label>
<select name="action" id="action">
<option value="help">Help</option>
<option value="reset">Reset</option>
<option value="submit">Submit</option>
</select>
<button type="submit" name="submit" value="submit">Do It </button>
</form>
Resources are for information purposes only, no endorsement implied.
For each select
element/button element combination:
Check that focus (including keyboard focus) on an option in the select
element does not result in any actions
Check that selecting the button performs the action associated with the current select
value
All checks are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML pages that collect user input.
This technique relates to:
The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than simply delimiting the groups with "dummy" list entries. This allows user agents to collapse the options by group to support quicker skimming of the options, and to indicate in what group an option of interest is located. It also helps to visually break up long lists so that users can more easily locate the option(s) they are interested in.
In HTML, the select
element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option
elements. To group options together, use the optgroup
element, with the related option
elements inside that element. Label the group with the "label" attribute so users will know what to expect inside the group.
The optgroup
element should be directly inside the select
element, and the option
elements directly inside the optgroup
. It is possible for a select
element to contain both single option
elements and optgroup
groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup
element, so only one level of grouping can be done within a select
.
If grouping information is essential to understanding the list, authors may define option
labels that can be understood even when the screen reader does not present the grouping information provided by optgroup
.
The following combo box collects data about favorite foods. Grouping by type allows users to select their preference more quickly.
Example Code:
<form action="http://example.com/prog/someprog" method="post">
<label for="food">What is your favorite food?</label>
<select id="food" name="food">
<optgroup label="Fruits">
<option value="1">Apples</option>
<option value="3">Bananas</option>
<option value="4">Peaches</option>
<option value="5">...</option>
</optgroup>
<optgroup label="Vegetables">
<option value="2">Carrots</option>
<option value="6">Cucumbers</option>
<option value="7">...</option>
</optgroup>
<optgroup label="Baked Goods">
<option value="8">Apple Pie</option>
<option value="9">Chocolate Cake</option>
<option value="10">...</option>
</optgroup>
</select>
</form>
The following example shows how a multi-select box can make use of the optrgroup
element.
Example Code:
<form action="http://example.com/prog/someprog" method="post">
<label for="related_techniques"><strong>Related Techniques:</strong></label>
<select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
<optgroup label="General Techniques">
<option value="G1">G1: Adding a link at the top of each page ... </option>
<option value="G4">G4: Allowing the content to be paused and restarted ... </option>
<option value="G5">G5: Allowing users to complete an activity without any time... </option>
<option value="G8">G8: Creating an extended audio description for the ... </option>
<option value="G9">G9: Creating captions for live synchronized media... </option>
<option value="G10">G10: Creating components using a technology that ... </option>
</optgroup>
<optgroup label="HTML Techniques">
<option value="H2">H2: Combining adjacent image and text links for the same ... </option>
<option value="H4">H4: Creating a logical tab order through links, form ... </option>
<option value="H24">H24: Providing text alternatives for the area ... </option>
</optgroup>
<optgroup label="CSS Techniques">
<option value="C6">C6: Positioning content based on structural markup... </option>
<option value="C7">C7: Using CSS to hide a portion of the link text... </option>
</optgroup>
<optgroup label="SMIL Techniques">
<option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
<option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
<option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
</optgroup>
<optgroup label="ARIA Techniques">
<option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
<option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
<option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
</optgroup>
<optgroup label="Common Failures">
<option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
<option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
<option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images ... </option>
<option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
</optgroup>
</select>
</form>
Resources are for information purposes only, no endorsement implied.
Check the set of options within a selection list to see if there are groups of related options.
If there are groups of related options, they should be grouped with optgroup
.
Check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
Before graphics became widely used on the internet, ASCII characters were often arranged to form pictures or graphs. Although ASCII art is not used frequently on the Web anymore, it must be remembered that, when it is used, it is very confusing to people who are blind and accessing the internet using screen readers. If it is used it should also have a text explanation of what the picture is. It is also suggested that there be a link to skip over the ASCII art (although this is not required).
Emoticons are very popular. They include ASCII characters that form facial expressions and other ways to communicate an emotion. They can be confusing for screen reader users. When possible it is better simply to use a word like "smile" instead of an emoticon. But if emoticons are used they should have a text alternative. In some contexts, blog and forum software for example, plug-ins are available that automatically convert ASCII characters used as emoticons into HTML images with text alternatives.
Leetspeak uses various combinations of ASCII characters to replace Latinate letters. Leet has become a part of Internet culture and slang. Leet is frequently used to beat text and spam filters. It is often incomprehensible to blind people using screen readers, and therefore requires a text alternative in order to conform to Success Criteria 1.1.1.
Note: Because support for this technique is limited, it is recommended that authors provide the text alternative in text.
The following shows three options for providing alternatives for an emoticon representing "fright," which is made out of an equal sign followed by the number eight, a hyphen and the number zero.
Example Code:
=8-0 (fright)
<abbr title="fright">=8-0</abbr>
<img src="fright.gif" alt="fright"/>
Here is ASCII art with an explanation of the picture preceding it. It includes a link to skip over the ASCII art. Skip ASCII example.
Example Code:
Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII image</a>
LLLLLLLLLLL
__LLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL
_LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
L _LLLLLLLLLLLLLLLLLLLLLLL
LL LLLLLL~~~LLLLLLLLLLLLLL
_L _LLLLL LLLLLLLLLLLLL
L~ LLL~ LLLLLLLLLLLLL
LL _LLL _LL LLLLLLLL
LL LL~ ~~ ~LLLLLL
L _LLL_LLLL___ _LLLLLL
LL LLLLLLLLLLLLLL LLLLLLLL
L LLLLLLLLLLLLLLL LLLLLL
LL LLLLLLLLLLLLLLLL LLLLL~
LLLLLLLL_______ L _LLLLLLLLLLLLLLLL LLLLLLLL
~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~ LLLLLL
______________LLL LLLLLLLLLLLLLL ______LLLLLLLLL_
LLLLLLLLLLLLLLLLLLLL LLLLLLLL~~LLLLLLL~~~~~~ ~LLLLLL
___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____ _LLLLLL_
LLLLLLLLLLL~~ LLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLL ~~~LLLLL
__LLLLLLLLLLL _LLLLLLLLLLLLLLLLL_ LLLLLLLLLLLLLLLLLL_ LLLLL
LLLLLLLLLLL~ LLLLLLLLLLLLLLLLLLL ~L ~~LLLLLLLLLLLLL LLLLLL
_LLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL_ LL LLLLLLLLL LLLLLLLLL
LLLLLLLLLLLLL LLLLLLLLLLLLL~LLLLLL~L LL ~~~~~ ~LLLLLL
LLLLLLLLLLLLLLL__L LLLLLLLLLLLL_LLLLLLL LL_ LL_ _ LLLLLL
LLLLLLLLLLLLLLLLL~ ~LLLLLLLL~~LLLLLLLL ~L ~LLLL ~L LLLLLL~
LLLLLLLLLLLLLLLL _LLLLLLLLLL LL LLLLLLL___ LLLLLLLLLL
LLLLLLLLLLLLLLLL LL~LLLLLLLL~ LL LLLLLLLLLLLL LLLLLLL~
LLLLLLLLLLLLLLLL_ __L _L LLLLLLLL LLL_ LLLLLLLLLLLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLL L~ LLLLLLLL LLLLLLL~LLLLLLLLLLLLLLLL~
LLLLLLLLLLLLLLLLLLLL___L_ LL LLLLLLL LLLL LLLLLLLLLLLLLL
~~LLLLLLLLLLLLLLLLLLLLLLLL LLLLL~ LLLLL ~~~~~~~~~
LLLLLLLLLLLLLLLLLL_ _ LLL _LLLLL
~~~~~~LLLLLLLLLL~ LLLLLL
LLLLL _LLLLLL
LLLLL L L LLLLLLL
LLLLL__LL _L__LLLLLLLL
LLLLLLLLLL LLLLLLLLLLLL
LLLLLLLLLLLLLLLLLLLLLL
~LLLLLLLLLLLLLLLLL~~
LLLLLLLLLLLLL
~~~~~~~~~
<a name="skipbutterfly"></a>
The following is Leetspeak for "Austin Rocks".
Example Code:
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
Open the page in a common browser.
Check to see that the content contains ASCII art, emoticons and/or leetspeak.
Check that there is a text alternative immediately before or after all ASCII art, emoticons and/or Leetspeak.
Test procedure #3 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to use HTML and XHTML according to their respective specifications. Technology specifications define the meaning and proper handling of features of the technology. Using those features in the manner described by the specification ensures that user agents, including assistive technologies, will be able to present representations of the feature that are accurate to the author's intent and interoperable with each other.
At the time this technique was published, the appropriate versions of these technologies is HTML 4.01 and XHTML 1.0. HTML 4.01 is the latest mature version of HTML, which provides specific accessibility features and is widely supported by user agents. XHTML 1.0 provides the same features as HTML 4.01, except that it uses an XML structure, and has a more strict syntax than the HTML structure. Later versions of these technologies are not mature and / or are not widely supported by user agents at this time.
There are a few broad aspects to using HTML and XHTML according to their specification.
Using only features that are defined in the specification HTML defines sets of elements, attributes, and attribute values that may be used on Web pages. These features have specific semantic meanings and are intended to be processed by user agents in particular ways. Sometimes, however, additional features come into common authoring practice. These are usually initially supported by only one user agent. When features not in the specification are used, many user agents may not support the feature for a while or ever. Furthermore, lacking standard specifications for the use of these features, different user agents may provide varying support. This impacts accessibility because assistive technologies, developed with fewer resources than mainstream user agents, may take a long time if ever to add useful support. Therefore, authors should avoid features not defined in HTML and XHTML to prevent unexpected accessibility problems.
Using features in the manner prescribed by the specification The HTML specification provides specific guidance about how particular elements, attributes, and attribute values are to be processed and understood semantically. Sometimes, however, authors use features in a manner that is not supported by the specification, for example, using semantic elements to achieve visual effects without intending the underlying semantic message to be conveyed. This leads to confusion for user agents and assistive technologies that rely on correct semantic information to present a coherent representation of the page. It is important to use HTML features only as prescribed by the HTML specification.
Making sure the content can be parsed HTML and XHTML also define how content should be encoded in order to be correctly processed by user agents. Rules about the structure of start and end tags, attributes and values, nesting of elements, etc. ensure that user agents will parse the content in a way to achieve the intended document representation. Following the structural rules in these specifications is an important part of using these technologies according to specification.
Resources are for information purposes only, no endorsement implied.
Refer to the resources section of G134: Validating Web pages.
For each HTML or XHTML page:
Check that the page uses only elements, attributes, and attribute values that are defined in the relevant specification.
Check that elements, attributes, and values are used in the manner prescribed by the relevant specification.
Check that the page can be parsed correctly, according to the rules of the relevant specification.
Note: Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.
Checks #1, #2, and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML
This technique relates to:
The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title
attribute. The help may include format information or examples of input.
Note: Current user agents and assistive technologies do not always provide the information contained in the title
attribute to users. Avoid using this technique in isolation until the title
attribute has wide-spread support.
A mapping application provides a form consisting of a label "Address:", an input box and a submit button with value "Find map". The input box has a title
attribute value with an example of the address format the user should enter.
Example Code:
<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress"
title="Address example: 101 Collins St, Melbourne, Australia" />
A form that allows users to pay their bill online requires the user to enter their account number. The input box associated with the "Account number" label has a title
attribute providing information on locating the account number.
Example Code:
<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number
can be found in the top right-hand corner of your bill." />
Identify form controls that require text input.
Check that each form control has an explicitly associated label
Check that each form control has context-sensitive help provided in the title
attribute.
Checks #2 and #3 are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML and XHTML controls that use external labels.
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 3.3.2. See Understanding SC 3.3.2 for details.
The objective of this technique is to provide a clear indication that a specific form control in a Web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label
element, or the legend
for groups of controls associated via fieldset
. If a symbol is used, the user is advised of its meaning before the first use.
The text field in the example below has the explicit label of "First name (required):". The label
element's for
attribute matches the id
attribute of the input
element and the label
text indicates that the control is required.
Example Code:
<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />
Note: Some authors abbreviate "required" to "req." but there is anecdotal evidence that suggests that this abbreviation is confusing.
The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr
element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.
Example Code:
CSS:
.req {font-size: 150%}
HTML:
<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />
The text field in the example below has an explicit label that includes an image to indicate the control is required. It is important that the image meaning is defined at the start of the form.
Example Code:
<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...
Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend
element instead of the label
element.
Example Code:
<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>
Resources are for information purposes only, no endorsement implied.
For each required form control, check that the required status is indicated in the form control's label
or legend
.
For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.
All checks above are true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML form controls and links
This technique relates to:
The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.
User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.
In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button
element text or image 'alt
' attribute as the name. In the case of form controls, label
elements or 'title
' attributes are used. The following table describes how the role, name, value, and state are determined for HTML links and form controls.
HTML element | Role | Name | Value | State |
---|---|---|---|---|
<a> | link | 'title' attribute, text within <a> element or 'alt' attribute if image link. Concatenated if both text and image 'alt' attribute are provided | 'href' attribute | |
<button> | push button | text inside <button> element or 'title' attribute | ||
<fieldset> | grouping | text inside <legend> element within fieldset element | ||
<input type = "button", "submit", or "reset"> | push button | 'value' attribute | ||
<input type = "image"> | push button | 'alt' attribute or 'title' attribute | ||
<input type = "text"> | editable text | <label> element associated with it or 'title' attribute | 'value' attribute | |
<input type = "password"> | editable text | <label> element associated with it or 'title' attribute | value is purposefully hidden | |
<input type="file"> | editable text | <label> element associated with it or 'title' attribute | 'value' attribute | |
<input type="checkbox"> | checkbox | <label> element associated with it or 'title' attribute | 'checked' attribute | |
<input type="radio"> | radio button | <label> element associated with it or 'title' attribute | 'checked' attribute | |
<select> | list box | <label> element associated with it or 'title' attribute | <option> element with 'selected' attribute set to "selected" | |
<textarea> | editable text | <label> element associated with it or 'title' attribute | text within <textarea> element |
User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" from the <a href>. Note that <a name> does not provide a role of "link". The value is the URI in the 'href' attribute.
In example 1a, the name is the text inside the link, in this case "Example Site".
Example Code:
<a href="www.example.com">Example Site</a>
In example 1b of an image inside a link, the 'alt' attribute for the image provides the name. Some tools for viewing APIs, such as Microsoft Inspect Objects, will not surface this, but AT does.
Example Code:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
In example 1c, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
Example Code:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"> Text</a>
There are several ways to create a button in HTML, and they all map to the "push button" role.
In example 2a, the text is contained in the button
element, in this case "save", as the name. There is no value.
Example Code:
<button>Save</button>
Example 2b uses the 'value' attribute, in this case "Save", "Submit", or "Reset" as the name.
Example Code:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
Example 2c uses the 'alt' attribute, in this case "save", as the name.
Example Code:
<input type="image" src="save.gif" alt="save" />
In example 2d, there is no 'alt' attribute so the 'title' attribute, in this case "save", is used as the name.
Example Code:
<input type="image" src="save.gif" title="save" />
Example 2e clarifies how the user agent determines the name if the author specifies both the 'alt' and 'title' attributes of the input element. In this case, the user agent uses the 'alt' attribute ("Save") and ignores the 'title' attribute.
Example Code:
<input type="image" src="save.gif" alt="save" title="save the file" />
In example 3a, the input field has a role of "editable text". The label
element is associated to the input
element via the 'for' attribute which references the 'id' attribute of the input
> element. The name comes from the label
element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
Example Code:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
In example 3b, the input field has the same role as example 3a, but the value is the empty string and the field gets its name from the 'title' attribute.
Example Code:
<input id="text_1" type="text" title="Type of fruit">
Example 4 has a role of "checkbox", from the 'type' attribute of the input
element. The label
element is associated with the input
element via the 'for' attribute which refers to the 'id' attribute of the input
element. The name comes from the label
element, in this case "cheese". Its state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user's interaction with the control.
Example Code:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
Example 5 has a role of "radio button" from the 'type' attribute on the input
element. Its name comes from the label
element. The state can be "checked" or "unchecked" and comes from the 'checked' attribute. The state can be changed by the user.
Example Code:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
Example 6a has a role of "list box" from the select
element. Its name is "Numbers" from the label
element. Forgetting to give a name to the select is a common error. The value is the option
element that has the 'selected' attribute present (with a value of "selected" in XHTML). In this case, the default value is "Two".
Example Code:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Example 6b has the same name, role, and value as the above, but sets the name with the 'title' attribute on the select
element. This technique can be used when a visible label is not desirable.
Example Code:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
Example 7a has a role of "editable text" from the textarea
element. The name is "Type your speech here" from the label
element. The value is the content inside the textarea
element, in this case "Four score and seven years ago".
Example Code:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
Example 7b has the same role, the name is set using the 'title' attribute, and the value is the empty string.
Example Code:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
The radio fieldset in example 8 has a role of "grouping". The name comes from the legend
element.
Example Code:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
Resources are for information purposes only, no endorsement implied.
Inspect the HTML source code.
For each instance of links and form elements, check that the name, value, and state are specified as indicated in the table above.
Check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
id
attributes are unique on a Web pageAll HTML pages
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 4.1.1. See Understanding SC 4.1.1 for details.
The objective of this technique is to avoid key errors that are known
to cause problems for assistive technologies when they are trying to
parse content that has the same id
attribute on different elements.
These errors can be avoided by making sure the Web page does not have
duplicate id
values. This can be done manually or by using HTML's mechanism
to specify the technology and technology version, and validating the
document for this condition. There are several validators that the
developer can use; validation reports generally mention this type of
error. The document type declaration is not strictly necessary for
this type of evaluation, but specifying the document type declaration
makes it easier to use a validator.
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that id attributes values are only used once on a page. The W3C validador, for example, will report ID "X already defined" when it encounters the second use of an id value.
Resources are for information purposes only, no endorsement implied.
For other resources, see G134: Validating Web pages.
Check that all id attribute values are unique on the web page.
Check 1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
All HTML pages
This technique relates to:
Note: This technique must be combined with other techniques to meet SC 4.1.1. See Understanding SC 4.1.1 for details.
The objective of this technique is to avoid key errors that are known to cause problems for assistive technologies when they are trying to parse content that has duplicate attributes on the same element. This can be checked manually, or by using HTML's mechanism to specify the technology and technology version and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The W3C validador, for example, will report "duplicate specification of attribute X" when it encounters the second definition of the same attribute on an element.
Resources are for information purposes only, no endorsement implied.
For other resources, see G134: Validating Web pages.
Check that no attribute occurs more than once on any element
Check 1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML5
This technique relates to:
The objective of this technique is to use the HTML5 track
element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
The src
attribute of the track
element is a URL that is the address of the text track data.
The kind
attribute of the track
element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criteria.
Note: Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles
, instead of kind=captions
, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.
A video
element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
Example Code:
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
</video>
A video
element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
Example Code:
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<source src="myvideo.webm" srclang="fr" type="video/webm">
<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
<track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
</video>
Resources are for information purposes only, no endorsement implied.
For each video element used to play a video:
Check that the video contains a track
element of kind
captions in the language of the video.
Check #1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML5
This technique relates to:
The objective of this technique is to use the HTML5 track
element to specify a descriptions timed text track for a video
element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
The src
attribute of the track
element is an URL providing the text track data.
The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.
User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.
A video
element for a video in the English language. The audio descriptions are provided in the WebVTT format.
Example Code:
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
</video>
A video
element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT (vtt) file format.
Example Code:
<video poster="myvideo.png" controls>
<source src="myvideo.mp4" srclang="en" type="video/mp4">
<source src="myvideo.webm" srclang="fr" type="video/webm">
<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
</video>
A video
, "Google self-driving car". with an audio description track.
Example Code:
<video controls tabindex="1">
<source src="cdgQpa1pUUE.webm" type="video/webm">
<source src="cdgQpa1pUUE.mp4" type="video/mp4">
<track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"></track>
</video>
Resources are for information purposes only, no endorsement implied.
For each video
element used to play a video:
Check that the video contains a track
element of kind
descriptions in the language of the video.
Check #1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
HTML5 documents that contain related links.
This technique relates to:
The objective of this technique is to group navigation links using the HTML5 nav
element. The nav
element is one of several sectioning elements in HTML5. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav
element is employed more than once on a page, distinguish the navigation groups by using an aria-label
or aria-labelledby
attribute.
Not all groups of links need to use the nav
element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.
This example uses a nav
element to group navigation links in an accessibility curriculum.
Example Code:
<nav>
<a href="../webaccessibility.html">Web Accessibility</a>
<a href="../docaccessibility.html">Document Accessibility</a>
<a href="../mobileaccessibility.html">Mobile Accessibility</a>
</nav>
This example uses an nav element with an aria-label attribute to identify the navigation group when there is more than one nav element in a document.
Example Code:
<nav aria-label="Site menu">
<ul>
<li>...a list of links site navigation link here ...</li>
</ul>
</nav>
...
<article>
<nav aria-label="Related links">
...a list of related links here ...
</nav>
</article>
The following example shows a best practice of situation where there are more than two navigation menus on the same page, and there is no existing text on the page that can be referenced as the label.
Example Code:
<nav aria-label="primary">
<a href="home.html">Home</a>
<a href="about-us.html">About Us</a>
<a href="products.html">Products</a>
</nav>
<nav aria-label="secondary">
<a href="adverts.html">Our Advertisers</a>
<a href="related.html">Related Links</a>
<a href="subsidiaries.html">Subsidiaries</a>
</nav>
Resources are for information purposes only, no endorsement implied.
Check that links that are visually grouped and represent a section of the page are enclosed in a nav
element.
Check #1 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.