The way the parts of an authored unit are organized in relation to each other and;
The way a collection of authored units is organized in relation to a delivery unit and;
The way a collection of delivery units is organized
Examples:
Editorial Note: Examples still need work. [Issue #506]
A book is divided into chapters, paragraphs, lists, etc. Chapter titles help the reader anticipate the meaning of the following paragraphs. Lists clearly indicate separate, yet related ideas. All of these divisions help the reader anticipate changes in context.
A bicycle is divided into wheels and a frame. Further, a wheel is divided into a tire and a rim. In an image of the bicycle, one group of circles and lines becomes "wheel" while another group becomes "frame."
programmatically determined means that the specific value can be determined in a standard, machine or software readable form .
Using appropriate markup makes it possible for user agents, including assistive technologies, to identify the semantic meaning of structures within content, allowing them to make use of these structures as they present content to an end user. In markup languages such as HTML, there are a number of elements with semantic meaning that can be utilized by authors. Examples include (but are not limited to) markup for identifying paragraphs, quotations, abbreviations and acronyms, emphasis, headings, tabular data and lists.
When content that utilizes semantic markup is presented to end users, elements with different semantic meaning will be presented differently. Visually, headings may appear in a larger font size, lists may be rendered on individual lines preceded by bullets or numbers, emphasized text may appear in bold or italics, etc. In a nonvisual presentation, these elements may be preceded by identifying information such as the heading level of a given heading, summary information about lists (ex. list with 6 items), or changes in pitch or volume for emphasized text. Because content and the structual information within it may be rendered by a wide variety of devices operating in different modalities, it is important not to misuse markup, create artificially complex structures or mislead users as to the organization and structure of a page.
In addition to ensuring that structure can be identified, relationships within content are an important part of a users ability to understand Web content. For example, when tabular data is presented to users in the form of a data table, users must be able to be able to identify row and column information associated with each cell in order to make sense of the data they are interacting with.
This criterion applies to all Web content. For markup languages, it is particularly important to understand the semantic meaning of elements in the technology specification that is in use so that the underlying relationships and structures can be accurately conveyed to the user.
See also: Guideline 4.1 Use technologies according to specification.
@@ include another TOC here to skip to tech-specifics and advisory techniques? (this seems like a lot to skip over)
Paragraphs often appear visually as blocks of text followed by white space. User agents can sometimes "guess" where a paragraph ends based on character combinations that aren't visible to the eye. But visual formatting or special key combinations may not be enough to identify paragraphs reliably.
Structural markup, such as the HTML paragraph element (<p></p>), enables user agents to identify individual paragraphs in a reliable way. If you are using a Web technology that does not provide a paragraph element, it may be necessary to create one, or to create rules that transform specific elements into HTML paragraphs.
Use CSS to control the visual appearance of paragraphs.
Content presented in a bulleted or numbered list may be easier to read than long sentences that present the same material as a series of words or phrases separated by commas.
Example 1. A list in sentence form.
Some of the structures within Web content include paragraphs, lists, images, mathematical expressions, forms, data tables, etc.
Example 2. The same items presented in an unordered list. Some of the structures within Web content include:
Paragraphs
Lists
Forms
Data tables
Images
Mathematical expressions
Etc.
Using appropriate structural markup enables user agents to recognize lists and the items that belong to them even when the list is spoken by a screen reader or the visual presentation is adapted to meet the needs of users with low vision or other disabilities. Lists can still be formatted in visually appealing ways: there are several CSS properties that enable designers to control the visual presentation of lists and list items, including nested lists.
Online forms usually include several parts, such as text fields, radio buttons, and checkboxes. Many people can identify these items based on their visual appearance. However, it is important to separate the form and its parts from the way they look on the page, so that people who cannot see the form or do not use graphical browsers can still identify and access the form. This can be done through structural markup, which enables user agents, including assistive technology, to identify the form as well as all of its parts, and to associate each part of the form with an appropriate label. (See the section on identifying relationships between form controls and their labels for information about associating labels with controls.)
CSS may be used to enhance the visual appearance and layout of the form, improving usability for users who can take advantage of the visual presentation.
It should be noted that XForms separates the structure of form controls even more sharply from presentation. There is no <form> element in XForms, unlike HTML; and the visual appearance of controls should be specified using CSS.
Tables have been used for two purposes: to control the placement of content on the screen (layout tables) and to present data in a two-dimensional way (data tables). One way to determine whether a table is used for layout or to present data is to move the content of a cell to another cell. If the meaning of the cell's content stays the same (for example, a link to the About Us page remains the same even if it is moved to a different location in the navigation bar), the table is being used to control layout. If moving the content changes its meaning, the table is used for data.
Although the use of layout tables is likely to continue for some time, it is no longer considered good practice: Web designers are encouraged to use CSS rather than tables for positioning and layout. If tables are used for layout, structural markup for identifying column and row headers should not be used, and there should be no caption or summary.
Data tables are used to show relationships, such as the relationship between products and prices, population figures, economic data, schedules and calendars, election returns, the status of legislation, etc. Data tables may be simple or complex.
Simple tables include no more than one row of header cells plus one or more rows of data cells. The table may also include row headers and a caption or summary.
Editorial Note: The question of whether the summary attribute is required for data tables and/or forbidden for layout tables has been actively debated on the WAI-IG mailing list and is now under discussion by the Techniques Task Force. The previous paragraph will be revised as needed pending the outcome of those discussions.
Complex tables include two or more sets of column or row headers, and there may be several groups of columns or rows, each with its own headers.
A well designed table makes it easy for most users to see header cells, data cells, and groups of cells. However, if only visual techniques are used, people who cannot see the information or have difficulty seeing it will find it difficult or impossible to identify the parts of the table. Using structural markup to display tabular data makes it possible for people using a variety of user agents to identify data and header cells and their groupings. A short explanation of the table's purpose and organization may aid users with visual or cognitive impairments that make it difficult for them to see or comprehend complex visual representations.
For simple tables, Guideline 1.3 L1 SC1 can be satisfied by using structural markup to identify the table and its header and data cells. For complex tables, additional markup is required to separate the relationships between data cells and header cells from their visual appearance. A later section of this document discusses general techniques for associating data cells and header cells.
CSS can be used to control the visual appearance and auditory aspects of the table and tabular data.
Images are structural elements in their own right, in HTML and other W3C languages. Using markup such as the img or object elements in HTML or comparable elements in SVG enables user agents to identify images and treat them appropriately, for example by associating them with text alternatives as required by Guideline 1.1 L1 SC1. In HTML, an image cannot be explicitly associated with the required text alternative if the image is not defined as an element within an HTML document. That is, the image cannot simply be displayed by itself in a new window. It must be placed in an HTML document, even if that document has no other content.
Besides identifying forms and parts of forms, as discussed in the technique for Identifying forms and form controls, users and user agents must also be able to identify:
relationships between form controls and their identifying text (labels); and
groups of related form controls, such as a multiple-choice question (that is, a question with several possible answers).
Labels must be programmatically associated with form controls to ensure that users and user agents can identify form controls correctly in all presentation forms.
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. Therefore, it is essential that user agents can identify all header cells that are associated with each data cell.
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, which shows part of the schedule for a university class.
The table has four columns. In order, the column headers are: Date, Topic, Reading, and What's due. 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. users 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, especially if the table contained a great deal of numerical data.
Forms are structural elements (in HTML). They also contain structural elements. Some of these structural components are functional. These include input elements of various types (text, radio, checkbox, submit, reset, image), textareas, and lists of options (select, option, and optgroup elements).
Using appropriate markup makes it possible for user agents, including assistive technology, to identify the form controls and their status so that users know what actions are available to them (e.g., entering text, selecting a checkbox, submitting a form).
Functionality is more completely separated from presentation in XForms than in HTML. The W3C's "XForms for HTML Authors" explains:
"XForms provides equivalents of all HTML Form controls. But there is a major difference in approach: HTML mainly specifies how the control should look, while XForms specifies what the control should do. So while the HTML specification says that the select element creates a menu, and the radio type of input creates radio buttons that allow a single choice to be made, XForms has the select and select1 elements, which only specify the intent of the controls, to select zero or more, or only one, element from a list. How they are presented to the user can vary across devices, or according to a style sheet. On a mobile telephone where screen space is scarce, both might be represented with menus, while on a larger screen both might be represented with selectable buttons. You are allowed to give a hint to what you want, or you may use a stylesheet to give precise styling, but if you don't, a device, or a style sheet, may make a choice for you."The W3C's Xforms page is available at http://www.w3.org/MarkUp/Forms/
The W3C's list of XForms implementations is available at http://www.w3.org/MarkUp/Forms/#implementations
Like other types of Web content, images also have 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 exhibit structure.
However, most graphic formats in use on the Web in 2004 do not provide means to directly identify structures within an image. The following paragraphs suggest different techniques that may be appropriate to different technologies.
Editorial Note: This technique is optional, since it doesn't make it possible to determine image-structure programmatically.
Information about the structure of complex images may be included in a long description that satisfies guideline 1.1 level 1, item 2.
In some cases, it may be possible to use an image map or image-"slicing" technique together with short text alternatives (required by Guideline 1.1 Level 1 SC1.a) to represent the structural components of a larger image. The following two examples suggest how these image map and "image-slicing" 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 "sliced images."
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.
@@ See also general technique for writing long descriptions for non-text content.
Editorial Note: The following technique is optional. It uses multiple presentation modalities -- images, simplified illustrations, tactile representation, text, and animation -- to expose the structure of a complex work of visual art. But the structure of the image cannot be programmatically determined -- it is available only for human inspection -- and except for the textual presentation and the option to print simplified images on special paper, each modality depends heavily on a particular type of presentation. I would argue, though, that it goes a long way toward meeting the spirit if not the letter of Guideline 1.3.
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 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. Each drawing highlights a specific aspect of the work, which is described in accompanying text, as required by guideline 1.1 Level 1 SC3. 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.)
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 SC1.
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.
Providing a "zoomable" view of mathematical expressions is valuable for users with low vision, including many users who are older, but it does not 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/).
Editorial Note: 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. Support for MathML under Linux is possible through emacspeak , developed by T.V. Raman.
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/.
Liddy Nevile's "Accessible Mathematics" page (2002) provides an excellent and detailed overview of issues and challenges in making mathematics accessible as well as suggested techniques for meeting those challenges and links to additional resources. Available at http://www.latrobe.edu.au/webaccess/maths.html.
Separating content and structure from presentation allows Web content to be presented differently to meet the needs and constraints of different users without losing any of the information or structure. For example, information can be presented via speech or braille (text) that was originally intended to be presented visually.
A bus schedule where the headers have been associated with the cells.
A bus schedule consists of a table with the bus stops listed vertically and the different trips listed horizontally. Each cell contains the time when that bus will be at that bus stop. Structural markup has been used to associate that cell with both the corresponding bus stop and the corresponding trip.
A form where the labels for the checkboxes have been associated with the checkboxes.
In a form where users can select different options using checkboxes, the labels for the checkboxes have been associated with the checkboxes. This benefits different types of users. It allows users who are blind to determine what the checkbox is for. People with limited motor functions can check the checkbox more easily because they can click anywhere on the label instead of just on the checkbox.