• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 1.3.1 Info and Relationship

Understanding SC 1.3.1 Info and Relationship

Last Modified: October 26, 2018 by sathish kumar 1 Comment

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

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG Tagged With: accessibility, headings, labels, semantics, tables, WCAG

Reader Interactions

Trackbacks

  1. Authoring the Authors: Accessibility Best practices for Content authors • Digital A11Y says:
    February 20, 2020 at 7:07 pm

    […] to WCAG SC 1.3.1 proper info and relationships need to be provided to the content. As content authors make sure your […]

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y