This technique relates to the following sections of the guidelines:
Task:
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
using markup to clearly define the sections of the page and their purpose; and
using appropriate structural markup to identify individual components and relationships within the content. Such structural elements may include (but are not limited to) headings, forms, form controls (and groups of form controls) and their labels; data tables, lists, paragraphs, images, mathematical expressions, etc. (some of these structural components may also exhibit structural properties);
using the (HTML) structural element, DIV, to order content so that it makes sense when read aloud by a screen reader; and
using CSS to control visual and auditory presentation, including CSS positioning to create an effective visual arrangement that may be different from the spoken order of the content.
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.
HTML Techniques
Editorial 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.
CSS Techniques
Providing additional structural information
Editorial 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.
Task:
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
a header that contains graphics and text identifying the site and the organization it represents as well as multiple navigation links;
navigation links down either side of the screen;
a footer containing links to copyright information, policies, and other legal notices;
a "main" content area divided into several columns, including text and other material such as photographs, charts, decorative images, form controls, buttons, sidebars, animations, etc.
Effective visual design is an important tool in helping users perceive the organization of the page.
Use fonts, color, and positioning to identify related items (for example, a group of links, news items about related topics).
Use graphics and white space to break lengthy text into smaller, more readable units.
Use color, size, and position to draw the user's eye to important information or interface elements (for example, links or buttons that allow the user to proceed to the next step in a sequence).
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).
HTML Techniques
CSS Techniques
Task:
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
to modify the outline to reflect the document's organization more accurately; or
to add material the outline reveals to be needed; or even
to delete content which the outline shows to be unnecessary.
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.
HTML Techniques
CSS Techniques
Task:
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).
HTML Techniques
CSS Techniques
Task:
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.
Task:
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.
Task:
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.)
Task:
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."Task:
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.
Maps and SVG
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)
Using Flash animation to highlight the structure of complex images
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.)
HTML Techniques
Editorial Note: Long descriptions 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. Alt content for embed is inappropriate for the same reason. Alt text for embed should probably be included in the gateway techniques for text alternatives. 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
Editorial 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?
Task:
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.
HTML Techniques
Other resources
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/.