• Table of Contents
  • Next Section

Guideline 1.3 Ensure that information, functionality, and structure are separable from presentation.

  • Previous Guideline
  • Next Guideline

Visual design often provides important cues to the structure of Web content -- that is, to the parts into which it is organized and the way those parts are related to each other. 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 people who are blind if screen readers are not able to identify structures and relationships within the content.

In other words, visual cues alone can not give sufficient indication of the structure or organization of Web content and the relationships within it to meet the needs of users who have disabilities. This is why it is necessary to ensure that information, structure, and functionality can be separated from presentation (the way the content looks or sounds). Using structural markup correctly ensures that standards-compliant user agents can determine how 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 that are not related to the organization and meaning of the content-may create unintended obstacles for users with disabilities. Using Cascading Style Sheets to control the appearance and placement of content allows designers to create visually appealing presentations that "transform gracefully" (to borrow a phrase from WCAG 1.0) when adapted to meet the needs of users with disabilities. Designers can retain control of the presentation under different circumstances by creating alternate style sheets to support users with different needs, for example by offering a high-contrast option with enlarged fonts and icons or alternative color-schemes. Thus structural markup and Cascading Style Sheets are two sides of one coin.

It is best to approach accessibility as an integral aspect of design instead of something "added" to a finished product. Content, structure, functionality, and visual design may then be considered together as parts of a complex whole that meets the needs of the largest possible number of users.

The following sections discuss general techniques for:

  • using structural markup to identify individual parts of the content and relationships among those parts; and

  • using markup to clearly define sections of the document or other resource.

    Editorial Note: is this more appropriate for 2.4?

The Technology-Specific Techniques documents provide detailed information about implementing these techniques in several W3C technologies, including (X)HTML, CSS, SVG, Scripting, and others.

Structures within Web content

The list below names some (but not all) of the parts of Web documents or types of content that may be identified through structural markup. Note that some items in this list may include other structural markup.

  • paragraphs

  • lists

  • forms

  • data tables

  • images

  • mathematical expressions

  • etc.

The techniques described below focus primarily on enabling user agents to identify structures and relationships within Web content. This is because actual users depend on what the user agent renders; in other words, users can only perceive what user agents can identify and present.

Success Criteria and Techniques for this guideline

  • 1.3 L1 SC1: Structures and relationships within the content can be programmatically determined.
    • Separating structure from presentation
    • Identifying lists and list-items
    • Identifying forms and form-controls
    • Identifying data tables
    • Identifying images
    • Using text alternatives to identify structures within images
    • Using alternative views to highlight image structure
    • Alternative views of mathematical expressions
    • Structure of mathematical expressions
    • Forms and labels
    • Header cells and data cells
    • Functionality and presentation
  • 1.3 L1 SC2: Emphasis can be programmatically determined.
    • Emphasis
  • 1.3 L1 SC3: Any information presented through color is also available without color (for example, through context or markup or coding that does not depend on color).
    • Using color to convey information
  • 1.3 L2 SC1: Information presented using color is also available without color and without having to interpret markup (for example through context or text coding).
    • Tactile graphics
  • Table of Contents
  • Top