Guideline 1.3: Present content in different ways

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Your website audience has very different needs and preferences, so ensure that your content is available in a way that can be perceived by all users in different ways (visually, audibly, tactilely etc.).

If there is embedded information in a way that the structure and information cannot be rendered by the assistive technology, then it cannot be rendered in other formats as needed by the user. (e.g. text in an image).

WCAG 2 refers to structure as the way the parts of a Web page are organized in relation to each other; and the way a collection of Web pages is organized; and presentation as rendering of the content in a form that can be perceived by users.

1.3.1 Info and Relationships Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Compulsory

If the technology provides semantic structure to make information and relationships conveyed:
  • Use semantic elements to mark up structure AND use semantic markup to mark emphasized or special text
  • Use text to convey information that is conveyed by variations in presentation of text
  • Separate information and structure from presentation to enable different presentations
  • Make information and relationships conveyed using:
    Web page structure
    • semantic markup whenever color cues are used
    • ol, ul and dl for lists
    • h1-h6 to identify headings
    • functions of the Document Object Model to add content to a page
    Tables
    • table markup to present tabular information
    • caption elements to associate data table captions with data tables
    • the scope attribute to associate header cells and data cells in data tables
    • the summary attribute of the table element to give an overview of data tables
    • id and headers attributes to associate data cells with header cells in data tables
    Forms
    • label elements to associate text labels with form controls
    • the title attribute to identify form controls when the label element cannot be used
    • a description for groups of form controls using fieldset and legend elements
    • OPTGROUP to group OPTION elements inside a SELECT
If the technology in use does NOT provide the semantic structure to make the information and relationships conveyed:
  • Use text to convey information that is conveyed by variations in presentation of text
  • Make information and relationships conveyed through presentation programmatically determinable or available in text using standard text formatting conventions for paragraphs, lists and headings

Recommended

  • Use CSS to control visual presentation of text
  • Use CSS rather than tables for page layout
  • Position labels to maximize predictability of relationships
  • Use ARIA to provide a descriptive, programmatically determined label
  • Use ARIA to identify form fields as required
  • Provide labels for all form controls that do not have implicit labels
  • Organize a page using headings

Failures

  • using changes in text presentation to convey information without using the appropriate markup or text
  • insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
  • using white space characters to create multiple columns in plain text content
  • using white space characters to format tables in plain text content
  • using scripting events to emulate links in a way that is not programmatically determinable
  • using structural markup in a way that does not represent relationships in the content
  • using th elements, caption elements, or non-empty summary attributes in layout tables
  • using the pre element to markup tabular information
  • insufficient information in DOM to determine specific relationships in XML
  • using changes in text presentation to convey information without using the appropriate markup or text
  • association of label and user interface controls not being programmatically determinable
  • inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS

1.3.2 Meaningful Sequence Level A

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Compulsory

  • Order the content in a meaningful sequence for all the content in the Web page
  • Mark sequences in the content as meaningful using one of the following techniques AND order the content in a meaningful sequence for those sequences:
    • Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline
    • Using the dir attribute on an inline element to resolve problems with nested directional runs
    • Positioning content based on structural markup with CSS
    • Using CSS letter-spacing to control spacing within a word
  • Make the DOM order match the visual order.

Recommended

  • Use left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left
  • Provide a link to linearized rendering
  • Provide a style switcher between style sheets that affect presentation order

Failures

  • using white space characters to format tables in plain text content
  • using white space characters to create multiple columns in plain text content
  • using white space characters to control spacing within a word
  • using an HTML layout table that does not make sense when linearized
  • changing the meaning of content by positioning information with CSS

1.3.3 Sensory Characteristics Level A

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.

Compulsory

  • Provide textual identification of items that otherwise rely only on sensory information to be understood

Recommended

  • Use an image with a text alternative for graphical symbols instead of a Unicode font glyph with the desired graphical appearance but different meaning

Failures

  • Identifying content only by its shape or location
  • Using a graphical symbol alone to convey information

More Info