Table of Contents

    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.

    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.

    Related to Info and relationships (A)

    Useful resources for 1.3.1 Info and relationships (A)

    Leave a Reply

    Your email address will not be published. Required fields are marked *