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 info, structure and relationship. Also, it stresses that the info, relationship and the presentation must be separated when creating websites.

What do we mean by presentation?

A large text which is bolded says “Chapter1: Introduction to Algebra” followed by a blank line and then texts. What does this signify here? The answer is, the text “Chapter1: Intro to Algebra” is visually styled as the section heading of the succeeding paragraphs. Does the screen reader user know this info 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 info 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.

References

Understanding Success Criterion 1.3.1

About sathish kumar

I am a Senior Accessibility Consultant, working at Deque Software PVT LTD. My experience spans for seven years across domains such as travel, education, eCommerce Healthcare etc. bringing digital accessibility into websites, mobile web, Android and iOS native apps, PDFs, Word documents and PowerPoint presentations. I have presented papers at international conferences; spoken at different meet-ups and forums and mentored teams for a11y competitions.