1.3.1 Info and Relationships (A)
Understanding 1.3.1 Info and Relationships (A)
When content structures like tables, lists and headings are communicated visually, they must also be communicated in ways that assistive technologies can understand. This ensures that content structures are available to screen reader, screen magnifier and speech recognition tool users.
Requirements / What to do?
- Tabular data is presented using proper HTML markup (
<table>,<tr>,<th>, and<td>elements); - Lists of items are presented using proper HTML markup (
<ul>,<ol>, and<li>elements); - Headings are presented using proper HTML markup (
<h1>through<h6>elements); - Form fields have properly associated
<label>elements; - Sets of radio buttons or checkboxes have a
<fieldset>element to group them together, and a<legend>element to provide a label for the group; - Form fields with format requirements or other additional information have properly associated hints.
Common mistakes
- Tabular data is displayed using CSS to present the appearance of a table, but the proper HTML markup has not been used;
- A list of items is presented using line breaks to separate each item, and the proper HTML markup has not been used;
- Headings are text styled with CSS, and the proper HTML markup has not been used;
- Headings use the proper HTML markup, but do not accurately represent the hierarchy of content on the page (starting with
<h1>, then<h2>for each section,<h3>for each sub-section and so on); - Form fields do not have labels;
- Form fields have labels but they are not properly associated with their corresponding fields;
- Sets of radio buttons or checkboxes are not grouped inside a
<fieldset>element, and do not have a<legend>element to provide a label for the group; - Form fields have format requirements or additional information, but it is not properly associated with the corresponding field.