1.3.1 Info and Relationships (A)

Definition for WCAG 2.0 success criterion 1.3.1

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

The intent of this Success Criterion is to ensure that information and relationships that are implied by visual formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.

Sighted users perceive structure and relationships through various visual cues - headings are often in a larger, bold font separated from paragraphs by blank lines; words that have special status are indicated by changing the font family and /or bolding. Having these structures and these relationships programmatically determined or available in text ensures that information important for comprehension will be perceivable to all.

At a high level, this success criterion requires that correct / appropriate semantic HTML markup be used to structure the page.

Common constructs

This success criterion includes, but is not limited to, common constructs such as:

  • Headings are correctly marked up as <h1>-<h6>, and that their level reflect their relative order in the hierarchy; missing/skipping heading levels (e.g. having an <h1> followed by an <h3>, or not having an <h1> on the page and starting the hierarchy with an <h2>) are not necessarily failures, but should nonetheless be noted.
  • Lists are correctly marked up as unordered <ul> or ordered <ol> lists, with appropriate <li> list items; nested lists (with two or more levels of hierarchy) are correctly marked up.
  • Definition lists (lists where a series of terms are listed, followed by their definition or additional information relating to them) are appropriately marked up using <dl>, <dt>, <dd> elements.
  • In forms, sets of radio buttons, checkboxes, or similar grouped controls with an overarching piece of text acting as a label for the group are wrapped with a <fieldset> and the overarching label denoted with a <legend> element.
  • Acronyms and abbreviations are marked up (where appropriate) using <acronym> or <abbr>.
  • Quotations are correctly marked up using <blockquote> (for large standalone quotation blocks) or <q> (for shorter, often inline, quotes).
  • Where HTML5 section elements (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) are used, they are used appropriately (a failure to use these elements is not a failure of this criterion, but an incorrect use of them is).
  • Data tables are marked up as <table> structures, with correct usage of <th> table headers, appropriate scope attribute for headers, use of headers attribute in the case of complex tables (where more than two headers apply to a data cell).
  • Tables are not used for layout, unless their nature as a data table has been suppressed using role="presentation".

Note: through the use of WAI ARIA, it is possible to use arbitrary HTML elements but provide the correct role and additional relationships (e.g. replicating a table with columns, rows, headers). In the context of this success criterion, evaluate these structures as you would their native counterparts. For instance, note if a "faked" ARIA-based table lacks correct table headers.

Note: this criterion overlaps slightly with success criterion 4.1.2 Name, role, value (level A). However, 4.1.2 is specifically about user interface components, i.e. interactive content. Generally, criterion 1.3.1 is concerned with how the document's "static" (non-interactive) content is marked up and structured. Areas of clear overlap, such as whether or not <label for="..."> element and attributes are used and point to the correct form control, should be noted primarily under 4.1.2, but cross-referenced from 1.3.1, to avoid duplication/confusion of issues. Similarly, structural associations that are only possible through WAI ARIA (such as connecting additional instructions/information to a form control through the use of aria-describedby) should also be noted in 4.1.2 and cross-referenced from 1.3.1.

Testing success criterion 1.3.1

Perform each of the following test procedures to evaluate the semantics of the page:

Input into spreadsheet

Fail
Some text that look like headings have not been marked up as headings.
Pass
All headings are programmatically marked up as headings.
N/A
The sample contains no heading text.

How to test

Before using the "Outline" functions in the Web Developer Toolbar, ensure that Outline > Show Element Tag Names is checked.

Use Outline > Outline Headings to get a visual representation of which elements are marked up as HTML headings.

The following screenshot shows the headings on a page after using the "Outline Headings" function.

WDT headings
Headings displayed on page

Use Information > View Document Outline to ensure that the page has an appropriate outline (logical sequence of headings, correct relative order of heading levels).

The following screenshot shows the structure of headings after using the "Outline Headings" function.

Heading structure
List of headings
  • Use H to cycle through headings on the page.
  • Use 1 to navigate to the main heading.
  • Use keys 2 - 6 to navigate through sub-headings, ensuring heading levels are not skipped.
  • Press control + option + U to bring up the web rotor.
  • Use ← or → to display the headings menu.
  • Use up and down cursor keys to move between headings. The heading level is listed before each heading item.
Headings menu: VoiceOver web rotor
List of headings
  • With VoiceOver running, set the rotator to headings.
  • Use swipe down gestures to navigate through the headings.
  • Ensure that headings are included in the swipe order, and that content that is not a heading is not included in the swipe order.
Headings rotor
Headings selected in rotor

Use Structure > Headings to get a visual representation of which elements are marked up as HTML headings.

The following screenshot shows the headings on a page after using the "Headings" function.

WAT headings
Headings displayed on page

Use Structure > Heading Structure to ensure that the page has an appropriate outline (logical sequence of headings, correct relative order of heading levels).

The following screenshot shows the heading structure after using the "Heading Structure" function.

WAT heading structure
List of headings used on the page

Input into spreadsheet

Fail
Some lists have not been marked up as lists.
Pass
All lists are marked up as lists.
N/A
The sample contains no lists.

How to test

Use Outline > Outline Block Level Elements to get a visual representation of list containers.

The following screenshot shows highlighted block-level list element containers on the page after using the "Outline Block Level Elements" function.

Block level elements
List container highlighted on page
  • Use L to cycle through the lists on the page.
  • Use I to cycle through the list items in a list.
  • Press control + option + command + X to move through the lists on the page. Add shift to move backwards.
  • Press control + option + right or left to move between list items.

Use Structure > List Items to get a visual representation of which elements are marked up as ordered, unordered and definition lists.

The following screenshot shows list markup highlighted in the page after using the "List Items" function.

WAT lists
List markup highlighted in page

Input into spreadsheet

Fail
Some data tables are not marked up correctly. Record the nature of the failure:
  • Some data table relationships are not marked up using HTML data table markup.
  • Appropriate column or row headers are not identified.
Pass
All tables are marked up using HTML data table markup, and appropriate column and row headers are identified.
N/A
The sample contains no data tables.

How to test

Use Outline > Outline Table Cells to get a visual representation of any <th> table headers and <td> data cells.

The following screenshot shows the cells of a data table in the page after using the "Outline Table Cells" function.

Data table
Header and data cells highlighted in page
  • Use T to cycle through the tables on the page.
  • Use the following keystrokes to navigate through the content, listening for appropriate header information:
    • Press alt + control + right or left to move between cells in a row.
    • Press alt + control + down or up to move between cells in a column.
  • Press control + option + T to move between tables. Add shift to move backwards.
  • Use the following keystrokes to navigate through the content, listening for appropriate header information:
    • Press control + option + right or left to move between cells in a row.
    • Press control + option + down or up to move between cells in a column.

Use Tables > Show Data Tables to get a visual representation of which elements are marked up as HTML tables, their overall structure/borders, which cells are marked as <th> table headers and which are marked as <td> data cells.

The following screenshot shows the structural elements of a data table in the page after using the "Show Data Tables" function.

WAT data table
Structural table elements highlighted in page

Note: It is not a requirement of WCAG 2.0 for regions to be identified, but they are strongly encouraged as they are helpful when used correctly. If regions are used, they need to accurately reflect the content with no orphaned content.

Input into spreadsheet

Fail
Inappropriate regions are identified. Record the nature of the failure:
  • Regions have unhelpful names.
  • The region is inappropriate for the section.
  • Some regions are identified but there is orphaned content.
Pass
The correct regions are identified with helpful names where appropriate.
N/A
The sample uses a technology that does not allow regions to be specified.

How to test

  • Press Control + Insert + R to display a list of regions on the page.
  • Press D to move between regions.
  • To view all regions on a page:
    • Press Insert + F7 to display the Elements List dialog.
    • Select "Landmarks" from the "Type" fieldset.
NVDA Elements List dialog
Landmarks listed in dialog.
  • Press control + option + U to bring up the web rotor.
  • Use ← or → to display the landmarks menu.
  • Use up and down cursor keys to move between landmarks.
Landmarks menu: VoiceOver web rotor
List of landmarks

Use the Landmarks browser extension to review the structure of the regions on the page.

The following screenshot shows the structure of the regions on a page form the Landmarks browser extension.

Landmarks
Structure of landmarks on page
Use Structure > Section Elements to get a visual representation of which elements are marked up using HTML5 section elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.

The following screenshot shows section elements highlighted in the page after using the "Section Elements" function.

WAT section elements
Header and nav elements highlighted in page

Use Structure > ARIA Landmark Roles to get a visual representation of WAI-ARIA landmark roles used.

The following screenshot shows the elements with landmark roles outlined after using the "ARIA Landmark Roles" function.

WAT landmark roles
Elements with landmark roles highlighted in page

Note: Issues with incorrect WAI-ARIA attributes on interface elements are reported in success criterion 4.1.2 Name, role, value (level A), but should be cross-referenced in this success criterion.

Input into spreadsheet

Fail
Incorrect WAI-ARIA semantics have been used. Record the nature of the failure:
  • Semantics not conveyed correctly due to using incorrect roles.
  • Structure incomplete or broken.
Pass
WAI-ARIA is used to provide the correct semantics for the structure.
N/A
The sample does not use WAI-ARIA to provide semantics.

How to test

Use Information > Display ARIA Roles to get a list of elements that have WAI-ARIA attributes added.

The following screenshot shows the WAI-ARIA attributes displayed on the page after using the "Show Data Tables" function.

WAI-ARIA attributes
WAI-ARIA attributes highlighted on page

Use Structure > Show Elements with ARIA Attributes to get a list of elements that have WAI-ARIA attributes added.

The following screenshot shows a list of elements along with the WAI-ARIA attributes and values after using the "Show Elements with ARIA Attributes" function.

WAT WAI-ARIA attributes
List of elements with WAI-ARIA attributes

Input into spreadsheet

Issues with form controls are reported in success criterion 4.1.2 Name, role, value (level A), but should be cross-referenced in this success criterion.

How to test

Use Forms > Display Form Details to get a visual representation of form controls.

The following screenshot shows highlighted form controls on the page after using the "Display Form Details" function.

Form controls
Form control details highlighted on page

Use F to cycle through form controls on the page.

Press control + option + command + J to move between form controls on the page. Add shift to go backwards.

  • With VoiceOver running, set the rotator to form controls.
  • Use swipe down gestures to navigate through the form controls.
  • Ensure the most appropriate role is announced, alone with an accessible name, state, and other relevant properties.
Forms rotor
Form controls selected in rotor

Use Structure > Fieldset/Labels to get a visual representation of which elements are marked up as <fieldset>, <legend>, <label>.

The following screenshot shows form markup highlighted in the page after using the "Fieldset/Labels" function.

WAT form controls
Form markup highlighted in page

Input into spreadsheet

Fail
Content is not appropriately marked up semantically.
Pass
All content is marked up using the most semantically appropriate HTML elements, accurately conveying the content's meaning, structure and relationship.

How to test

Use Outline > Outline Block Level Elements to get a visual representation of all block level elements, including headings, lists, block quotations, HTML5 section elements, tables, fieldsets.

The following screenshot shows highlighted block-level elements on the page after using the "Outline Block Level Elements" function.

Block level elements
Elements highlighted on page

While the Web Accessibility Toolbar (WAT) and the Web Developer Toolbar (WDT) are useful in visually highlighting the presence of specific HTML elements, they will not help in identifying if structures have been set up using arbitrary HTML elements with WAI ARIA role="..." and relevant attributes. For this reason, beyond the test steps above, testers should further use manual code inspection to verify appropriate structures are indeed in place. However, for complex pages, this process will be more time consuming, as it will require an analysis of the page's entire HTML markup.

Inspect the page's markup (for instance, using the browser's built-in Developer Tools/F12 Tools).

The following screenshot shows the browser's built-in developer tools to examine the structure of the markup.

Developer tools
Inspecting markup
Acronyms/abbreviations

Use Structure > Acronyms/Abbreviations to get a visual representation of which elements are marked up as <acronym> or <abbr>.

The following screenshot shows abbreviations highlighted in the page after using the "Acronyms/Abbreviations" function.

WAT abbreviations
Abbreviation markup highlighted in page
Quotations

Use Structure > Q/Blockquote to get a visual representation of which elements are marked up as inline or block quotations.

The following screenshot shows a blockquote highlighted in the page after using the "Q/Blockquote" function.

WAT blockquote
Blockquote highlighted in page