ContentStructureSeparationProgrammatic
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
- 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
- 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)
- Separating structure from presentation
- Identifying lists and list-items
- Identifying forms and form-controls
- Identifying data tables
- Using structure to display images
- Associating form controls with their labels
- Identifying relationships between data cells and header cells in data tables
- Separating functionality from presentation in online forms
Technology-Specific Techniques for 1.3 L1 SC1
HTML Techniques (sufficient)
- 3.1: Section headings
- 5.7: Long quotations
- 5.13: Inline structural elements to identify citations, code fragments, deleted text, etc.
- 6.1: Ordered lists
- 7.6: Specifying the set of data cells for which each header cell provides header information OR 7.7: Associating header cells with data cells OR 7.8: Categorizing data cells
- 7.10: Row and column headings
- 12.1: Markup and style sheets rather than images: the example of math
CSS Techniques (sufficient)
- 5.2: Creating layout, positioning, layering, and alignment
- 9.1: Creating stylized text with CSS rather than using raster images
- 9.3: Indenting text
Advisory technology independent techniques: going beyond 1.3 L1 SC1
- Using text alternatives to identify structures within images
- Using alternative views to highlight image structure
- Providing alternative views of mathematical expressions
- Identifying structure in mathematical expressions
Advisory technology-specific techniques: going beyond 1.3 L1 SC1
HTML Techniques (optional)
- 1.3: The address element
- 5.6: Short Quotations (future)
- 7.1: The caption element (optional)
- 7.4: Identifying groups of rows (optional)
- 7.5: Identifying groups of columns (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
- 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/.
- 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.
- Articles: Semantics, HTML, XHTML, and Structure
- Graphics and Structural Markup: Keeping "pretties" out of content???
- @@ others?
- Table of Contents
- Top