This Web page lists HTML and XHTML Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.
HTML and XHTML documents that contain links.
This technique relates to:
This objective of this technique is to avoid unnecessary duplication that occurs when adjacent text and iconic versions of a link are contained in a document.
Many kinds of links have both a text and iconic link adjacent to each other. Often the text and the icon link are rendered in separate links, in part to create a slight visual separation from each other. Visually they appear to be the same link, but they are experienced by many people as two identical links and this can be confusing. To avoid this, some authors omit alternative text from the image, but this would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text.
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.
<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.
<a href="foo.htm"> <img src="house.gif" alt="home page icon"/> Go to the home page </a>
This example demonstrates a failure to apply this technique. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a "stutter" effect as the link is read twice.
<a href="products.html"> <img src="icon.gif" alt="Products page" /> </a> <a href="products.html"> Products page </a>
This example demonstrates a failure to apply this technique. An icon and text link are side by side. In an attempt to remove the "stutter" the text alternative for the image is null. However, now one of the links has an unknown destination, which is its own link text problem.
<a href="products.html"> <img src="icon.gif" alt="" /> </a> <a href="products.html"> Products page </a>
This example demonstrates an incorrect implementation of this technique. The icon and text are contained in the same a element. However, the text alternative for the icon is a duplicate of the link text, leading to a "stutter" effect as the description is read twice.
<a href="products.html">
<img src="products.gif" alt="Products page"/>
Products page
</a>
Resources are for information purposes only, no endorsement implied.
For each a in the content that contains an img element:
Check that there is no adjacent a element that has the same
href attribute and the same description
For each a in the content that is contained in a table:
Check that there is no a element in an adjacent table cell that has
the same href attribute and the same description
All checks above are true.
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.
<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. So in the following example, the tab order would be one, three,
two, four.
<a href="" tabindex="1">one</a> <a href="" tabindex="2">two</a> <a href="" tabindex="1">three</a> <a href="" tabindex="2">four</a>
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.
<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.
area elements of image maps HTML and XHTML Documents that contain area elements.
This technique relates to:
The HTML 4.01 specification explains that the text of the alt attribute
is to be displayed when the element cannot be rendered normally. User Agents will
display the alt attribute text when images are not displayed. However,
currently, visual User Agents do not display the alt attribute text for area elements
of image maps when accessed by keyboard or when images are not displayed, and may clip
the area elements if the intrinsic size of the image is not used. In addition, the
display of alt attribute text in response to mouse-hover does not display in the font
size or color combination set in the User Agent.
The title attribute is meant to provide additional information. However,
current implementation in User Agents is access to either the title or alt attribute,
but not both. User Agents generally will display the title attribute text
when the mouse is placed over the element containing the title attribute.
For example, Internet Explorer will display the alt text on mouse-over if
there is no title text, Firefox and Opera only display the
title text on mouse-over and do not use the alt attribute
text for this purpose. Thus, to ensure the alt attribute text is visible on
mouse-over, the same text should be used on the title attribute.
Therefore, when using image maps, successful implementation of this technique would require either:
Ensuring the area element alt attribute value is displayed in response to attaining focus (including keyboard focus), and that this applies both to situations where images are loaded and not loaded. OR
A redundant mechanism serving the same purpose as the area elements is present in the Web Page.
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.
<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.
HTML and XHTML
This technique relates to:
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.
<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.
object
Documents that load media with the object element, when the media format is
not an accessibility-supported content technology.
This technique relates to:
If object is used, provide a text
alternative in the content of the element:
This example shows a text alternative for a Java applet using the object
element.
<object classid="java:Press.class" width="500" height="500"> As temperature increases, the molecules in the balloon... </object>
This example takes advantage of the fact the object elements may be nested
to provide for alternative representations of information.
<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.
HTML and XHTML
This technique relates to:
Most graphical user agents render text enclosed within an abbr or
acronym element with a dotted line below or surrounding it. In
addition, when the mouse hovers over the element, the expansion is displayed as a tool
tip.
In Internet Explorer 6 and below, items marked using the abbr element
are not displayed with any additional formatting nor does the expanded version display
as a tooltip when the mouse hovers over the item. Future versions are expected to
provide these features for the abbr element.
JAWS 6.2 and WindowEyes 5.0 support the abbr and acronym elements.
They can all be set to speak the title attribute when these elements are encountered.
Within a given product the abbr and acronym elements are rendered
the same way.
The objective of this technique is to provide expansions or definitions for
abbreviations by using the abbr and acronym elements.
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. XHTML
2.0 proposes eliminating the acronym element in favor of the more general
abbr element.
<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>
<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>
<p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p>
<p><acronym title="World Wide Web">WWW</acronym></p>
Resources are for information purposes only, no endorsement implied.
Check that an expansion or definition is provided for each abbreviation via
abbr or acronym.
Check #1 is true.
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 H67: Using null alt text and no title attribute on img elements for images that AT should ignore (HTML) .) 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 HMTL in the text content of the a
element.
<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.
<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.
<a href="routes.html"> <img src="topo.gif" alt="" /> Current routes at Boulders Climbing Gym </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.
<a href="foo.htm"> <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 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.
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.
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.
<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")
#2 is true
HTML and XHTML
This technique relates to:
Current user agents and assistive technology provide no feedback to the user
when links have title attribute content available.
Some graphical user agents will display a tool tip when the mouse hovers above
an anchor element containing a title attribute. However, current user
agents do not provide access to title attribute content via the
keyboard.
The tool tip in some common user agents disappears after a short period of time
(approximately 5 seconds). This can cause difficulty accessing title
attribute content for those users who can use a mouse but have fine motor skill
impairment, and may result in difficulties for users who need more time to read
the tool tip.
Current graphical user agents do not provide mechanisms to control the
presentation of title attribute content. The user cannot resize the
tool tip text or control the foreground and background colors. The placement and
location of the tool tip cannot be controlled by users, causing some screen
magnifier users to be unable to access meaningful portions of the
title attribute content because the tool tip cannot be fully
displayed within the viewport.
Some user agents allow access to supplementary information through the context
menu. For example, the keystroke combination Shift+F10 followed by P will display
the title attribute content, along with other supplementary
information in Mozilla/Firefox.
The HTML 4.01 specification explains that the text of the alt
attribute is to be displayed when the element cannot be rendered normally. Thus,
visual User Agents will display the alt attribute text when images
are not displayed. The title attribute is meant to provide additional
information. User Agents generally will display the title attribute
text when the mouse is placed over the element containing the title
attribute. Internet Explorer will display the alt text on mouse-over
if there is no title text. The Firefox and Opera browsers only
display the title text on mouse-over and do not use the
alt attribute text for this purpose. Thus, if you want the
alt attribute text visible on mouse-over, also include the text using
the title attribute.
Assistive technologies provide different levels of support for speaking the
title attribute for an anchor element.
JAWS 7.0 will speak either the link text or the title attribute
for a link depending upon a JAWS setting. This setting can be changed
temporarily or permanently within JAWS. However, it is awkward to read both
the link text and the title attribute for a link.
WindowEyes 5.5 has a hot key, ins-E, that will speak additional information,
including the title attribute, for the item with focus.
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.
<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>
In HTML 4.01 the target="_blank" attribute can be used on an anchor
element to indicate that the URI specified by the href attribute will be opened in a
new window. This example shows using the title attribute of the anchor
element to provide information that the link will be opened in a new window.
<a href="http://example.com/subscribe.html"
target="_blank"
title="link opens in new window">
Subscribe to email notifications about breaking news
</a>No resources available for this technique.
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.
HTML and XHTML
This technique relates to:
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.
applet elements HTML and XHTML Documents that load Java applets where applet is not deprecated.
This technique relates to:
IE 6 for Windows and Firefox 1.5 and Opera 9 on Windows treat alternative text for the applet element differently. IE will display the body text of the applet element and not the alt attribute. Firefox and Opera will display the alt attribute but not the body text.
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. Both mechanisms are required due to the varying support of the alt attribute and applet body text by user agents.
<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game"> tic-tac-toe game </applet>
Resources are for information purposes only, no endorsement implied.
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.
Applies 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
<form action="http://example.com/prog/text"> 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
alt attributes on img elementsDocuments that load images, when the image format is not an accessibility-supported content technology.
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. If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a longdesc should be provided as well with the complete text.
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.
<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.
Check #2 is true. If the non-text content contains words that are important to understanding the content, Check #3 is also true.
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 caption should not duplicate
information in the summary.
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
tableelements 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.
<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
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.
If the table is a layout table, check that the table does not include a
caption element.
If the table is a data table and it includes a caption element, check
that the caption identifies the table
If both a summary attribute and a caption element are present
for this data table, check that the summary does not duplicate the
caption.
For layout tables, #2 is true.
For data tables, #3 and #4 are true.
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.
<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.
HTML and XHTML
This technique relates to:
The objective of this technique is to use HTML and XHTML heading markup to convey the structure of the content. Heading markup can be used to:
distinguish the main content from navigation bars, graphical banners, footers, etc.
show the organization of material within the main content
In HTML and XHTML, heading markup is designed to convey logical hierarchy, and
heading elements include numbers (h1 through h6). 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. Cascading Style Sheets
(CSS) can be used to change the way headings look or sound.
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.
Using headings merely to change the appearance of text does not convey the organization of the content, and may confuse users who use headings to perceive structure or rely on them for navigation. Conversely, while applying bold format, or even "class=heading", can result in the visual display of a heading, assistive technologies will not recognize such text as headings.
In this example, heading markup is used to make the navigation and main content sections perceivable.
<!-- 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 and XHTML heading elements only mark the beginning of sections; they do not contain them as element content.
<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>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.
<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.
Pick a Heading Eric Meyer
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.
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.
<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.1, #3.2, and #3.3 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.
HTML and XHTML controls that use external labels
This technique relates to:
The HTML and XHTML specifications allow both implicit and explicit labels. However, some
assistive technologies do not correctly handle implicit labels (for example,
<label>First name <input type="text"
name="firstname"></label>).
JAWS 7.10 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It reads the label for explicit and implicit labels for text fields in both virtual PC cursor and forms reading mode. In forms mode it does not read the label for implicit labels on checkboxes and radio fields.
Window-Eyes 5.5 was tested on Windows XP with Internet Explorer 6.0 and Firefox 1.5. It will always speak the label for an explicitly labelled form field. It does not speak the label for the implicitly labelled form control in browse on mode but will speak the implicit label when navigating from control to control in browse off mode.
User agents will display a tool tip when the mouse hovers above an input
element containing a title attribute. Title attributes are exposed to
assistive technology and are displayed as tooltips in many graphical browsers.
Tooltips can't be opened via the keyboard, so this information may not be available to
sighted keyboard users.
If no label is available, JAWS and Window-Eyes speak the
title attribute when the form control receives focus
JAWS 6.0 and later can be set to speak both label and
title when the two items are different; however, very few users are
aware of this setting.
WindowEyes 5.5 has a hot key, ins-E, that will display additional information, including the title attribute, for the item with focus.
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.
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.
<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
<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.
<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="checkbox" name="flavor" id="choc" value="chocolate" />
<label for="choc">Chocolate</label><br/>
<input type="checkbox" name="flavor" id="cream" value="cream"/>
<label for="cream">Cream Filled</label><br/>
<input type="checkbox" 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 element
Check that the for attribute of the label element
matches the id of the input element
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
All checks above are true.
HTML and XHTML documents that include images that cannot be described in a short text alternative.
This technique relates to:
Some older assistive technologies do not support the longdesc attribute.
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.
<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>
Check that a longdesc attribute exists.
Check that the link in the longdesc attribute is valid
Check that the long description describes the original non-text content associated with it.
#1 through #3 are all true
noembed with embed
Documents that load plugins with the embed element.
This technique relates to:
Note: Although embed is widely supported in user agents - it is not a valid part
of HTML or XHTML.
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.
<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><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
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.