HTML and XHTML
This technique relates to Success Criterion 1.3.1: Info and Relationships (Failure).
The objective of this technique is to describe a failure that occurs when structural markup is used to achieve a presentational effect, but indicates relationships that do not exist in the content. This is disorienting to users who are depending on those relationships to navigate the content or to understand the relationship of one piece of the content to another. Note that the use of HTML tables for layout is not an example of this failure as long as the layout table does not include improper structural markup such as <th> or <caption> elements.
Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation
role can be used to suppress the native semantics of an element so that they are not
mapped to the accessibility API. Setting an element's
role to presentation may avoid this failure by hiding that element's semantics from the
Example 1: A heading used only for visual effect
In this example, a heading element is used to display an address in a large, bold font. The address does not identify a new section of the document, however, so it should not be marked as a heading.
<p>Interested in learning more? Write to us at</p> <h4>3333 Third Avenue, Suite 300 · New York City</h4> <p>And we'll send you the complete informational packet absolutely Free!</p>
Example 2: Using heading elements for presentational effect
In this example, heading markup is used in two different ways: to convey document structure and to create visual effects. The h1 and h2 elements are used appropriately to mark the beginning of the document as a whole and the beginning of the abstract. However, the h3 and h4 elements between the title and the abstract are used only for visual effect — to control the fonts used to display the authors' names and the date.
<h1>Study on the Use of Heading Elements in Web Pages</h1> <h3>Joe Jones and Mary Smith<h3> <h4>March 14, 2006</h4> <h2>Abstract</h2> <p>A study was conducted in early 2006 ... </p>
Example 3: Using
blockquote elements to provide additional
The following example uses blockquote for text that is not a quotation to give it prominence by indenting it when displayed in graphical browsers.
<p>After extensive study of the company Web site, the task force identified the following common problem.</p> <blockquote> <p>The use of markup for presentational effects made Web pages confusing to screen reader users.</p> </blockquote> <p>The committee lists particular examples of the problems introduced by this practice below.</p>
Example 4: Using the fieldset and legend elements to give a border to text
<fieldset> <legend>Bargain Corner</legend> <p>Buy today, and save 20%</p> </fieldset>
- Check that the element's semantic meaning is exposed to assistive technology and appropriate for the content of the element.
- If check #1 is false then this failure condition applies.