Ensure that information, structure, and functionality are separable from presentation.
1.Structures and relationships within the content can be programmatically determined. [I]
When content is organized in a specific order that affects the meaning of the content, enable user agents to present the content in that order.
Visual design provides important cues to the content's organization-its structure. However, complex layouts may be difficult to interpret for people who have learning disabilities or cognitive impairments and for older users. A page that appears well organized visually may be difficult to understand for someone who is blind.
These difficulties may be reduced or avoided by
To summarize, correct use of structural markup ensures that standards-compliant user agents can determine the order in which the content should be presented, even when the user agent must adapt the presentation to meet the needs of people with disabilities. Conversely, incorrect use of structural markup-for example, to create visual effects unrelated to the organization and meaning of the content-may create unintended obstacles for users with disabilities.
[Editor's note: There are no techniques for <ul> or <dl>, and the techniques for nested lists are discussed only under ordered lists. JAWS supports <ol>,<ul>, and <dl>; announces the beginning and end of each list; announces nesting level; reports list bullets and automatically generated list-item numbering via <ol>; indicates <dd> by saying "equals" allows jumping from list to list by pressing the letter "L" and allows users to bypass lists with a single keystroke.]
[Editor's note: CSS Technique 6.2 has important user agent issues; the :before and :after pseudoclasses are not supported by IE, so this technique should not be used to provide really important structural information.]
Use visual design to make clear how the content is organized.
The visual layout of Web pages may be quite complex. For example, it is common for Web pages to include
Effective visual design is an important tool in helping users perceive the organization of the page.
Note that use of HTML tables to control layout is deprecated in WCAG 2.0. The Working Group recognizes that it may be some time before Web designers can completely eliminate use of layout tables, developers are strongly encouraged to control layout with Cascading Style Sheets (CSS).
5.12 CSS instead of presentational markup
5.13 Use non-deprecated presentational markup
5.8 Misuse of blockquote
6.2 Abuse of list markup
8.1 Layout tables (deprecated)
8.2 Table elements allowed in layout tables
8.3 Summaries of layout tables
7.2 Specifying colors
8.2 Specifying font characteristics
9.1 Creating stylized text with CSS rather than using raster images
13.3 Conveying semantics via presentation
Use structural markup to identify the sections of long or complex documents, collections, and applications, and to indicate where each section fits in the logical organization of the document.
Users can take advantage of functionality built into user agents (including assistive technology) to gain an overview of the document's organization and to navigate easily from section to section.
If you are updating an existing document, you may wish to make an outline of the content, or use a tool such as the Accessibility Toolbar to display the heading structure of the document. The heading structure should serve as an outline of the content, showing what the document contains and how it is organized. If the outline does not appear to serve this purpose, it may be necessary
When planning new Web documents, determine the sections into which content will be organized, and use the appropriate markup to identify the sections. Make an outline to define the logical organization or hierarchy of the sections; ensure that all the content is included in the appropriate place in the outline. If you find that your page includes content that does not seem to fit within the outline, you may wish either to revise the outline so that it includes the proper headings-or put the "outlying" content in a more appropriate place on the site.
In online forms, enable user agents to recognize the following:
form controls (such as input fields of various types, buttons, pulldown menus, etc.);
relationships between form controls and their identifying text;
groups of form controls (such as a question with several possible answers);
etc.
Forms are structural elements (in HTML). They also contain structural elements. Some of these structural components are functional: they accept user input. These include (again in HTML) input elements of various types (text, radio, checkbox, submit, reset, image), textareas, and lists of options (select, option, and optgroup elements).
Other form components define relationships, such as the relationship between an input element and the text that labels it (the label element) or a question and a set of possible answers indicated by radio buttons (fieldset and legend elements).
15.1 Explicit form labels
15.1 Explicit form labels
Task:
Use the label element to associate form elements with their labels.
For each form control, provide an explicit label in a label element. 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.
Reset and submit buttons (<input type="reset"/> or <input type="submit"/>), image buttons (<input type="img"/>), and script buttons (<button></button>)
do not need explicit labels since they have labels implicitly associated via their value or alt attributes or via element content for button.
Example:
The following text field has the explicit label of "First name:". Note that the label for matches the id attribute. The id sometimes shares the same value
as the name but both must be provided, and the id must be unique on the page.
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" tabindex="1" />
Resources:
HTML 4.01 form labels
15.2 Implicit labels for form controls (deprecated)
Task:
Do not use the label element implicitly.
According to the HTML 4.01 specification, the label element can be wrapped around both the form control and its label text to create an "implicit label",
as in
<label>First name: <input type="text" name="firstname" /></label>
. In practice this is not supported by user agents and should not be used. Use explicit labels as described in
Explicit form labels.
15.3 The title attribute to label form controls
15.4 Grouping form controls
15.5 Grouping options of select elements
15.6 Tab order in forms
15.9 Tabular forms
5.2 Creating layout, positioning, layering, and alignment
5.3 Positioning (float, position)
7.2 Specifying colors
8.2 Specifying font characteristics
8.3 Specifying font sizes using xx-small to xx-large
When data are presented in a table, allow user agents to recognize relationships within the table, including groups of cells and associations between data cells and header cells.
Tables are widely used to present structured data such as schedules, prices, tax rates, population figures, and so on. Typically, the table consists of some data cells plus at least one set of headers. The headers are used to determine the meaning of the data in the cells.
It may be helpful to think of each cell as a character in a very short (one-sentence) "story," as Alan Cantor has suggested. For example, we can write a little story about Column 2, Row 4 of the first table at http://www.cwrl.utexas.edu/~slatin/webaccess/2002/schedule.htm. We'll use the data cell as the grammatical subject of our sentence, then use the column and row headers to tell its "story," like this: "Encountering Barriers was the topic for September 5."
This might seem obvious. But suppose the table did not have any column headers-readers might be able to figure out what the phrase "Encountering Barriers" meant, but they might not-and in a larger table with dozens or even hundreds of rows of data cells, confusion would probably set in quickly.
7.1 The caption element
7.3 Summarizing tables
7.7 Specifying the set of data cells for which each header cell provides header information
7.8 Associating header cells with data cells
7.11 Row and column headings
10.1 Displaying empty table cells
Provide information about the structure of visual images.
Images are structural elements in their own right, in HTML and other W3C languages. However, images also exhibit structure.
For example, flowcharts, wiring diagrams, architectural blueprints, scientific illustrations, etc., often include clearly defined structural components. Photographs and works of visual art may also be said to to exhibit structure. However, most graphics formats in use on the Web in 2004 do not provide means to directly identify structural components within an image. The following paragraphs suggest different techniques that may be appropriate to different technologies.
Information about the structure of complex images may be included in a long description satisfying Guideline 1.1 Level 1. In some cases, it may also be possible to use an image map or image-"slicing" technique together with short text alternatives (also required by Guideline 1.1 Level 1) to represent the structural components of a larger image. The following examples suggest how these techniques might be applied:
Example 1: A flowchart converted into an image map. Each shape on the flowchart is a selectable area whose function and content are identified by its alt attribute.
Example 2. An architectural blueprint presented as a set of "image slices." What most users perceive as a single image is actually composed of many small images. Each of these small images represents a structural component of the blueprint (such as a doorway, a room, etc.). Each image is identified by an appropriate text alternative.
10.6 Long descriptions of images
11.1 Use client-side image map
11.4 Provide text alternatives for selectable areas of client-side image maps
5.2 Creating layout, positioning, layering, and alignment
5.3 Positioning (float, position)
Represent the structure of complex images in tactile form.
Technologies exist for converting visual images into tactile form. For example, the images in the examples above could be printed as detailed reliefs using a specialized adaptation of Braille. Alternatively, the images could be printed on special paper and converted into raised-line drawings and used as overlays on a digitizing tablet. With the aid of additional software, the image would become a "touch screen" and provide spoken output as the user pressed different areas. The University of North Carolina's BATS project produces maps that use both tactile and auditory cues to provide information about locations and the distances between them. (Mark Tosczak "A New Way to Read, Not See, Maps." Wired News September 25, 2002. Available at http://www.wired.com/news/school/0,1383,54916,00.html. Accessed August 26, 2004.)
Use markup to identify structural aspects of visual content.
Another approach would be to encode complex images above using the W3C's Scalable Vector Graphics (SVG) format. SVG provides the ability to identify the structural components of graphics, and provides additional accessibility benefits as well:
[SVG's g]rouping constructs, when used in conjunction with the "desc" and "title" elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.
Provide alternative views of complex images.
Graphics can be made more accessible to users with low vision by providing enlarged images or "zooming" in for close-up examination of specific details. Such functionality is often provided by museum Web sites and sites that offer maps and driving directions .
The SVG specification includes built-in support for magnifying and panning across images, and many other features that make SVG an appropriate technology for presenting maps, geospatial data, and other complex images that are accessible to users with disabilities.
It is important that the zoom functions can be operated from the keyboard or a keyboard interface as well as a pointing device, as required by Guideline 2.1 Level 1.
Vaingo and Pulsifer (2002) provided an extensive rationale for using SVG to deliver geospatial data interactively. This technical report included a comprehensive survey of OpenSource applications for creating and viewing such data (see "Internet Mapping for the Visually Impaired with Scalable Vector Graphics," at http://tactile.nrcan.gc.ca/page.cgi?url=recherche_research/svg_rpt_e.html. Accessed August 27, 2004.). Campin and McCurdy (2003) described other techniques for making maps accessible to blind users by combining SVG and Javascript to yield tactile and audio feedback as well as visual information (available at http://www.svgopen.org/2003/papers/svgmappingforpeoplewithvisualimpairments/; accessed August 27, 2004). Rotard and Ertl (2003) described a transformation schema which transforms SVG into a tactile representation while also providing Braille and speech output(Rotard and Ertl, Tactile access to scalable vector graphics. Available at http://www.svgopen.org/2004/papers/TactileAccessToSVG/. Accessed August 27, 2004.). The Canadian government's Maps for the Visually Impaired project has also produced example maps and research data (see http://tactile.nrcan.gc.ca/page.cgi?url=index_e.html; accessed August 27, 2004)
The Tate Gallery of London (England) used Macromedia Flash to help users with low vision understand the visual structure of complex works by the modern artists Pablo Picasso and Henri Matisse. For each work shown in the IMAP project, the designers created a sequence of simplified, high-contrast drawings based on the painting. Some of the drawings are in color and others are black-and-white. Each drawing highlights a specific aspect of the work, which is described in accompanying text, as required by Guideline 1.1 Level 1. The images and text descriptions appear in separate frames. Users can move through the sequence using either the mouse or a keyboard interface developed for the project. A separate page (without frames) enables users to download the images for printing on special "swell paper" that can be heat-treated to produce relief drawings. (The text descriptions can also be read independently.) (See "Text and Animations." Available at http://www.tate.org.uk/imap/pages/animated/pairs_ani.htm. Accessed August 26, 2004.)
[Editor's note: 10.7 Long description of images is not appropriate here-it would work only in cases where the Flash player was not installed on the end-user's system. If the Flash player is installed on the user's system, descriptions and links included in the body of the object element will not be rendered. Technique 12.2 alt content for embed is inappropriate for the same reason. 12.3 alt text for embed should probably be included in Gateway Techniques for Guideline 1.1. Note that the titles of techniques 12.2 and 12.3 are confusingly similar.]
10.9 Describe images without longdesc
14.1 Providing a frame title
14.2 Frame name
[Editor's note: The title attribute for the frame element is supported by JAWS, Window-Eyes, and Home Page Reader, and possibly other screen readers. Is it still necessary to require the name attribute as well as title?]
Represent the structure of mathematical expressions.
The National Center for Accessible Media (NCAM) recommends providing a method for allowing users with low vision to "zoom" in on mathematical expressions. As with maps and other complex images, this can be done using the W3C's Scalable Vector Graphics (SVG) format. It is important that the zooming function can be operated from the keyboard or a keyboard interface, as required by Guideline 2.1 Level 1.
Providing a "zoomable" view of mathematical expressions is valuable for users with low vision, including many users who are older, but it is not sufficient to enable users who are blind or deaf-blind to access mathematical expressions. Enabling such access requires support for screen reading software, which can render the equation either as synthetic speech output or in tactile form on a refreshable Braille display. The preferred method for representing the structure of mathematical expressions is to use the W3C's Mathematics Markup Language, or MathML. "MathML is an XML application for describing mathematical notation and capturing both its structure and content" (http://www.w3.org/TR/MathML/).
User agent issues
MathML is directly supported only by the Mozilla and Netscape browsers (get version numbers). Assistive technology so far provides limited support for MathML. However, MathPlayer 2.0, a plug-in for Internet Explorer 6.0 and higher released in April 2004, supports screen readers including Window-Eyes, HAL, and JAWS.
5.11 Markup and CSS rather than images: the example of math
National Center for Accessible Media, Making educational software and Web sites accessible: Design guidelines including math and science solutions. Guideline 8: Provide access to scientific and mathematical expressions for all users with disabilities. Available at http://ncam.wgbh.org/cdrom/guideline/guideline8.html#skip. Includes an appendix listing resources on spoken mathematics as well as a link to a demonstration project that includes numerous examples of accessible equations.
The W3C Math Home Page lists numerous resources, including software for creating, editing, and rendering MathML. Available at http://www.w3.org/Math/.
The Texas School for the Blind and Visually Impaired maintains a Web site on Teaching Math to Visually Impaired Students that includes many resources and strategies for making mathematics accessible. Available at http://www.tsbvi.edu/math/.
Level 1 Success Criteria for Guideline 1.3 Ensure that information, structure, and functionality are separable from presentation.
Make it possible for user agents to determine when specific content such as a word or phrase is to be emphasized.
In written documents, emphasis can be created through grammar, syntax, and writing style. Emphasis can also be indicated through markup and by setting visual and/or auditory properties in an associated style sheet.
5.1 Emphasis
3.Any information presented through color is also available without color (for example, through context or markup or coding that does not depend on color).
When color is used to convey information, the same information should be available in a form that does not depend on the ability to perceive color.
Color is an important asset in Web design, enhancing usability and aesthetic appeal. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only and monochrome displays will be unable to access information that is presented only in color. The solution is to include the information in the source document while setting presentation properties in a style sheet.
7.2 Specifying color
When using color to provide information, provide the same information to people who cannot perceive color or additional markup.