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)
Info and Relationship Transcript
Hello everyone! Today, we’re going to talk about information and relationships. We’ll also discuss its importance, requirements, learnings, and examples.Using native semantics to code the content is crucial for success criteria. Semantic coding is important because it makes it easier for screen readers and assistive technologies to decode content for users and establish relationships between content and UI controls. This also allows user agents to render the content more effectively. Additionally, machines can read and index the content easily.
Now let’s learn about what is included in semantic coding: headings, lists, tables, form label relationships, and the grouping of related form controls using semantic tags for text instead of CSS or style languages.
When it comes to headings, you should use H1 to H6 for appropriate headings instead of styling text to look like headings with CSS. It is essential to provide an appropriate hierarchy of headings so that the content structure is well understood by users. You should avoid providing heading markup for long sentences or paragraphs and try not to skip heading levels whenever possible.
For example, on a product details page, the product name should be in H1, while sections like product description, technical specifications, and reviews should be in H2. Any subsections of each section should be in H3.
Regarding lists, you should use ordered and unordered list markup for grouping the same type of elements or when providing step-by-step instructions. Avoid including long paragraphs or chunks of text in lists. For example, a group of quick links arranged vertically could be in an unordered list, or the procedural steps for making a cake recipe should be presented in an ordered list.
Tables are great for presenting data and establishing relationships, but they can be difficult for users with vision impairments who rely on screen readers, especially if CSS is used to create tables without appropriate column and row headers. You should use appropriate native HTML markup when presenting data, provide column and row headers to establish relationships between headers and data cells, and avoid using layout tables for aesthetic purposes. Always provide captions that help users understand the purpose of the tables, especially when multiple tables are present on a page. For instance, a table presenting the athletic and physical scores of cricket team members should have proper column and row headers.
Now let’s talk about form labels and grouping. Visual users can easily comprehend the relationship between form fields and their respective labels, but this is not the case for screen reader users unless the form labels and fields are programmatically associated. You should use label tags and the “for” and “ID” methods in HTML to semantically and programmatically associate input fields with their labels. For groups of checkboxes or radio buttons, use fieldsets and legends or ARIA techniques to group them. For example, in a college application form, the fields and their labels must be programmatically associated, and radio buttons or checkboxes must be grouped with relevance to the questions asked.
Other requirements include using strong and em tags for bold and italicized text, respectively, and using paragraph tags for large chunks of text. From what we’ve learned, you should not rely solely on visual styles for authoring content; instead, use proper and native semantic coding practices to ensure that assistive technologies, user agents, and other machine-reading devices can decode and render content effectively.
This is the end of the video. Thank you for joining! If you liked the video, do like and subscribe.
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.
