Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
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.
- Blind people who use screen readers benefit with programmatic associations and textual information.
- Deaf-blind users who use refreshable braille machines benefit.
Additional information for 1.3.1 infor and relationships
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.
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.
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.
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.
- ARIA11: Using ARIA landmarks to identify regions of a page (ARIA)
- ARIA12: Using role=heading to identify headings (ARIA)
- ARIA13: Using aria-labelledby to name regions and landmarks (ARIA)
- ARIA16: Using aria-labelledby to provide a name for user interface controls(ARIA)
- ARIA17: Using grouping roles to identify related form controls (ARIA)
- ARIA20: Using the region role to identify a region of the page (ARIA)
- G115: Using semantic elements to mark up structure
- G117: Using text to convey information that is conveyed by variations in presentation of text
- G140: Separating information and structure from presentation to enable different presentations
- G138: Using semantic markup whenever color cues are used
- H51: Using table markup to present tabular information (HTML)
- H39: Using caption elements to associate data table captions with data tables (HTML)
- H73: Using the summary attribute of the table element to give an overview of data tables (HTML)
- H63: Using the scope attribute to associate header cells and data cells in data tables (HTML)
- H43: Using id and headers attributes to associate data cells with header cells in data tables (HTML)
- H44: Using label elements to associate text labels with form controls (HTML)
- H65: Using the title attribute to identify form controls when the label element cannot be used (HTML)
- H71: Providing a description for groups of form controls using fieldset and legend elements (HTML)
- H85: Using OPTGROUP to group OPTION elements inside a SELECT (HTML)
- H48: Using ol, ul and dl for lists or groups of links (HTML)
- H42: Using h1-h6 to identify headings (HTML)
- H97: Grouping related links using the nav element (HTML)