Understanding 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.

Points to Ponder

Emphasis – Use <em> and <strong> instead of using Italics and Bold texts to highlight important texts; use <blockquote> to mark quotations
Headings – Provide hierarchically logical heading markup for the contents
Table – Provide HTML table markup and provide column headers for simple tables and column headers and row headers for complex tables
Table – When using nested tables, consider the possibility of breaking the content into logical individual tables instead of nested tables
Forms – Provide programmatic association of visible labels or appropriate accessible names to all the form elements
Lists – Markup the contents that logically fall into list as ordered or unordered list. Do not put huge text blocks which is otherwise are paragraphs ass lists
Grouping – Provide grouping and group level labels to mark a group of form elements like radio buttons or checkboxes; use <fieldset> and legend to achieve grouping and group level association for native form elements; use ARIA to achieve the same where custom form controls are used
Use native semantic markup frequently and ARIA sparingly.