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.
Accessibility Requirements For 1.3.1 Info and relationships (A)
- 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 for 1.3.1 Info and relationships (A)
- 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.
Techniques for 1.3.1 Info and relationships (A)
HTML Technique
H49: Using semantic markup to mark emphasized or special text
H51: Using table markup to present tabular information
H39: Using caption elements to associate data table captions with data tables
H73: Using the summary attribute of the table element to give an overview of data tables
H63: Using the scope attribute to associate header cells and data cells in data tables
H43: Using id and headers attributes to associate data cells with header cells in data tables
H44: Using label elements to associate text labels with form controls
H65: Using the title attribute to identify form controls when the label element cannot be used
H71: Providing a description for groups of form controls using fieldset and legend elements
H85: Using OPTGROUP to group OPTION elements inside a SELECT
H48: Using ol, ul and dl for lists or groups of links
H42: Using h1-h6 to identify headings
H97: Grouping related links using the nav element
CSS Techniques
Your site doesn’t include support for the Accordion Item block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.
Common Failures for 1.3.1 Info and relationships (A)
The following are common mistakes that are considered failures of Success Criterion 1.3.1 by the WCAG Working Group.
- F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
- F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links
- F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information
- F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
- F87: Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS
- F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes
- F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers
- F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
FAQs about Info and relationships (A)
How Info and relationships play important role to convey important information to the users.
Using bold, italic or underlined text to convey important information,
Using large font and bold content to convey headings,
Using asterisk (*) to indicate mandatory fields,
Positioning labels to convey the relation between form elements and labels,
Using group level headings to indicate grouped form elements,
Using tables to convey relation between the content that are of similar type,
Bullets or indention to mark list of items.
Who Benefits with this information?
Blind people who use screen readers benefit with programmatic associations and textual information.
Deaf-blind users who use refreshable braille machines benefit.