ContentStructureSeparationProgrammatic

From W3C Wiki

This is work in progress for WCAG. It is one of a series of GuideDocDrafts that are being considered as part of a "guide to the guidelines" for WCAG 2.0.

Guide to 1.3 L1 SC1

On this page:

1.3 L1 SC1: Structures within the content can be programmatically determined.

Understanding 1.3 L1 SC1

Key terms and important concepts

structure
  1. The way the parts of an authored unit are organized in relation to each other and;
  2. The way a collection of authored units is organized in relation to a delivery unit and;
  3. The way a collection of delivery units is organized

Examples: Editorial Note: Examples still need work. [Issue #506]

  1. 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.
  2. 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
programmatically determined means that the specific value can be determined in a standard, machine or software readable form .

@@ [BBC] do we also want to create a definition for relationships here? Michael proposed:

Relationships
the way the structural components of content are organized in relation to each other.

Intent of this success criterion

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.

Applicability: When does 1.3 L1 SC1 apply?

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.

Additional details

Techniques for meeting 1.3 L1 SC1

Technology-Independent techniques for 1.3 L1 SC1 (sufficient)

Technology-Specific Techniques for 1.3 L1 SC1

HTML Techniques (sufficient)
CSS Techniques (sufficient)

Advisory technology independent techniques: going beyond 1.3 L1 SC1

Advisory technology-specific techniques: going beyond 1.3 L1 SC1

HTML Techniques (optional)
CSS Techniques (optional)

Benefits and Examples

Benefits: How 1.3 L1 SC1 Helps People with Disabilities

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.

Examples of 1.3 L1 SC1

  • 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.

Related resources

  1. Semantic Structure - an article that discusses the importance of structure and semantics in HTML. Retrieved from teh web April 8, 2005 from http://webaim.org/techniques/structure/.
  2. Separation of semantic and presentational markup, to the extent possible, is architecturally sound - an analysis of the interactions between content , presentation adn interaction from the W3C Technical Architecture Group. Retrieved from the web April 8, 2005 from http://www.w3.org/2001/tag/doc/contentPresentation-26.html.
  3. Articles: Semantics, HTML, XHTML, and Structure
  4. Graphics and Structural Markup: Keeping "pretties" out of content???
  5. @@ others?
  6. Table of Contents
  7. Top