1.3.1 - Info and relationships

The intent of this success criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes.

Sighted users have many visual cues to indicate a page structure i.e. larger and bolded fonts for headers, bullets preceding lists, etc. It is necessary that the same information structure is presented programmatically for the users who rely on screen reading technology.

Expand unknown acronyms/abbreviations at first instance.

Ensure that headings:

• are provided for each section or subsection
• contain text
• have logical structure
  • use h1 through h6
  • use only one h1 per page
  • follow logical sequence h2, h3, h4, etc.
• structure is separate from style

The purpose of a list is to group related items. Use lists appropriate for their purposes:

• <ul> a.k.a. bulleted list - used when list order doesn’t matter
• <ol> a.k.a. numbered list - used when list order does matter
• <dl> - used to group terms with their respective definitions

Purpose of a table is to present tabular information to preserve the two dimensional relationship in data.  Do NOT use tables for layouts.  Use proper table markup to present information only in such a way that preserves relationships within the information even when users cannot see the table or the presentation format is changed.  Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal).

To make a table accessible, use:

• caption tag – a table identifier
  • it acts like a title or heading for the table
  • it is programmatically and visually associated with a table
• header tags on columns and/or rows
• scope attribute to associate header cells with data cells
  • scope=”col” for column headers
  • scope=”row” for row headers
• summary attribute of the table element to give an overview of data tables for those using screen readers
  • information does not display visually but is available to the screen readers

<table>
     <caption>Class schedule</caption>
     <tr>
          <th scope=”col”>Class name</th>
          <th scope=”col”>Course number</th>
          <th scope=”col”>Location</th>
     </tr>
     <tr>
          <th scope=”row”>Beginner Web Accessibility</th>
          <td>ACC101</td>
          <td>Municipal Building</td>
     </tr>
     <tr>
          <th scope=”row”>Advanced Web Accessibility</th>
          <td>ACC102</td>
          <td>Public Building</td>
     </tr>
</table>