1.3.1 Info and Relationships

 

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Description

Web content is displayed on the pages in different presentational cues to convey meaning and relationship. Following are few example situations where presentation plays role to convey important information to the users.

  • Using bold, italic or underlined text to convey important information,
  • Using large font and bold content to convey headings,
  • Using asterisk (*) to indicate mandatory fields,
  • Positioning labels to convey the relation between form elements and labels,
  • Using group level headings to indicate grouped form elements,
  • Using tables to convey relation between the content that are of similar type,
  • Bullets or indention to mark list of items.

 

All the above presentational cues are available only to certain set of users. In many cases these relationships are not perceived to the assistive technology users.

The success criteria 1.3.1 info and relationships considers the problems encountered due to presentational cues available to assistive technology users programmatically determinable or described in text. When the content authors have a choice to provide relationship between content programmatically determinable and also in text description, programmatically determinable method is highly recommended.

 

Who benefits

  1. Blind people who use screen readers benefit with programmatic associations and textual information.
  2. Deaf-blind users who use refreshable braille machines benefit.

 

Additional information for 1.3.1 infor and relationships

Semantic markup

Webpages contains content conveyed through bold or italicized text. Single line quotations or large quotations, content with superscript and subscript values and abbr tag to provide abbreviations. A detailed explanation about Semantic mark-upis provided under accessibility best practices.

Heading content

The font size and bold text styles are applied to provide a heading visually. This mark-up is problematic for assistive technology users. The heading structure for accessibility under accessibility best practices explains in detailed.

Positioning labels and group level labels for forms

Labels will be positioned adjacent to their form fields to provide a relationship. The form elements that are grouped will be provided with a group level heading. Look at Form elements and accessibility under accessibility best practices to understand how the labels and group level labels can be associated with their form elements. Marking mandatory fields is another problematic situation where visual cues are provided. Read the article mandatory fields and accessibility to understand ways in which required fields can be made accessible.

Tables

Table tags are used to display the content that share common characteristic. The challenge is when the relation between the header and their corresponding data is not programmatically determined. Read data tables and accessibility to understand the ways relationship can be maintained within the header cells and data cells.

Lists

When the page consists of similar items providing HTML lists programmatically sequence the items. Marking up lists using styles will not provide the programmatic association within the items and also does not inform the start and end of the list.

In addition to few of our Maxability articles, below are some W3C WAI techniques to make web content 1.3.1 info and relationships friendly.

 

W3C WCAG techniques for 1.3.1 info and relationships

Note: All the links below navigate to external website.

 

 

 

One reply on “1.3.1 Info and Relationships”

Uncategorized

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

6366496664