Understanding WCAG SC 1.3.1 Info and Relationship
Information, structure, and relationships conveyed through presentation can be
programmatically determined or are available in text. (Level A)
This success criterion requires that presentation cannot alone show the information, structure and relationship. Also, it stresses that the information, relationship and the presentation must be separated when creating websites.
What do we mean by presentation?
A large text which is bolded says “Chapter 1: Introduction to Algebra” followed by a blank line and then texts. What does this signify here? The answer is, the text “Chapter 1: Introduction to Algebra” is visually styled as the section heading of the succeeding paragraphs. Does the screen reader user know this information and relationship?
On the left side, the label reads “User Name” and on the right side, there is an input field. Sighted users understand the purpose or the name of the field as “User Name” through the position. While tabbing to the same field, would a blind screen reader user know this?
This is the same case with a group of same type of elements or links that constitute a visual list or a group of fields that have a common purpose or an arrangement of data that constitutes a visual table.
What do we do now?
All that we need to do is while styling the contents visually to convey info and relationship, we must add the semantic markup that is available in the technology that we work on. To break it further:
Mark the headings that visually look like headings using either h1 to h6 tags in HTML or use ARIA role to do so. Where the data is arranged to indicate a tabular format, ensure appropriate table markup is used and row header and column header are properly marked up to establish the information and relationship between cells. Where there are visual lists of elements or contents, use ordered or unordered list markup respectively. Where there are group of related form controls, provide semantic grouping and label that is programmatically associated. Where there are form controls, programmatically associate their visible labels with them. Where there are quotations or highlighted texts, use appropriate semantic markup.
