Understanding SC 1.3.1: Info and Relationships (Level A)
In Brief
- Goal
- Information about content structure is available to more people.
- What to do
- Use code to reinforce relationships and information conveyed through presentation.
- Why it's important
- People can adapt the presentation to suit their needs while preserving the original meaning.
Success Criterion (SC)
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Intent
The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader or when a user style sheet is substituted for the style sheet provided by the author.
Sighted users perceive structure and relationships through various visual cues — headings are often in a larger, bold font separated from paragraphs by blank lines; list items are preceded by a bullet and perhaps indented; paragraphs are separated by a blank line; items that share a common characteristic are organized into tabular rows and columns; form fields may be positioned as groups that share text labels; a different background color may be used to indicate that several items are related to each other; words that have special status are indicated by changing the font family and /or bolding, italicizing, or underlining them; items that share a common characteristic are organized into a table where the relationship of cells sharing the same row or column and the relationship of each cell to its row and/or column header are necessary for understanding; and so on. Having these structures and these relationships programmatically determined or available in text ensures that information important for comprehension will be perceivable to all.
Auditory cues may be used as well. For example, a chime might indicate the beginning of a new section; a change in voice pitch or speech rate may be used to emphasize important information or to indicate quoted text; etc.
When such relationships are perceivable to one set of users, those relationships can be made to be perceivable to all. One method of determining whether or not information has been properly provided to all users is to access the information serially in different modalities.
If links to glossary items are implemented using anchor elements (or the proper link element for the technology in use) and identified using a different font face, a screen reader user will hear that the item is a link when the glossary term is encountered even though they may not receive information about the change in font face. An on-line catalog may indicate prices using a larger font colored red. A screen reader or person who cannot perceive red, still has the information about the price as long as it is preceded by the currency symbol.
Some technologies do not provide a means to programmatically determine some types of information and relationships. In that case then there should be a text description of the information and relationships. For instance, "all required fields are marked with an asterisk (*)". The text description should be near the information it is describing (when the page is linearized), such as in the parent element or in the adjacent element.
There may also be cases where it may be a judgment call as to whether the relationships should be programmatically determined or be presented in text. However, when technologies support programmatic relationships, it is strongly encouraged that information and relationships be programmatically determined rather than described in text.
Note
It is not required that color values be programmatically determined. The information conveyed by color cannot be adequately presented simply by exposing the value. Therefore, Success Criterion 1.4.1 addresses the specific case of color, rather than Success Criterion 1.3.1.
Benefits
- This Success Criterion helps people with different disabilities by allowing user agents to adapt content according to the needs of individual users.
- Users who are blind (using a screen reader) benefit when information conveyed through color is also available in text (including text alternatives for images that use color to convey information).
- Users who are deaf-blind using braille (text) refreshable displays may be unable to access color-dependent information.
Examples
- A form with required fields
- A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that "all required fields are displayed in red and marked with an asterisk *", followed by an example.
- A form that uses color and text to indicate required fields
- A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are programmatically associated with the appropriate form fields so that assistive technology users can determine the required fields.
- A bus schedule table where the headers for each cell can be programmatically determined
- A bus schedule consists of a table with the bus stops listed vertically in the first column and the different buses listed horizontally across the first row. Each cell contains the time when the bus will be at that bus stop. The bus stop and bus cells are identified as headers for their corresponding row or column so that assistive technology can programmatically determine which bus and which bus stop are associated with the time in each cell.
- A form where the labels for the checkboxes can be programmatically determined
- In a form, the labels for each checkbox can be programmatically determined by assistive technology.
- A text document
- A simple text document is formatted with double blank lines before titles, asterisks to indicate list items and other standard formatting conventions so that its structure can be programmatically determined.
Related Resources
Resources are for information purposes only, no endorsement implied.
Techniques
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
Sufficient Techniques
Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.
Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:
- ARIA11: Using ARIA landmarks to identify regions of a page
- H101: Using semantic HTML elements to identify regions of a page
- ARIA12: Using role=heading to identify headings
- ARIA13: Using aria-labelledby to name regions and landmarks
- ARIA16: Using aria-labelledby to provide a name for user interface controls
- ARIA17: Using grouping roles to identify related form controls
- ARIA20: Using the region role to identify a region of the page
- G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text
- 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
- ARIA24: Semantically identifying a font icon with role="img"
-
Making information and relationships conveyed through presentation programmatically determinable using the following techniques:
- G138: Using semantic markup whenever color cues are used
- H51: Using table markup to present tabular information
- PDF6: Using table elements for table markup in PDF Documents
- PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables
- H39: Using caption elements to associate data table captions with data tables
- H63: Using the scope attribute to associate header cells with data cells in data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H44: Using label elements to associate text labels with form controls
- H65: Using the title attribute to identify form controls when the label element cannot be used
- PDF10: Providing labels for interactive form controls in PDF documents
- PDF12: Providing name, role, value information for form fields in PDF documents
- H71: Providing a description for groups of form controls using fieldset and legend elements
- H85: Using optgroup to group option elements inside a select
- H48: Using ol, ul and dl for lists or groups of links
- H42: Using h1-h6 to identify headings
- PDF9: Providing headings by marking content with heading tags in PDF documents
- PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents
- PDF17: Specifying consistent page numbering for PDF documents
- PDF21: Using List tags for lists in PDF documents
- H97: Grouping related links using the nav element
Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:
- G117: Using text to convey information that is conveyed by variations in presentation of text
-
Making information and relationships conveyed through presentation programmatically determinable or available in text using the following techniques:
Advisory Techniques
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
- C22: Using CSS to control visual presentation of text
- G162: Positioning labels to maximize predictability of relationships
- ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
- ARIA2: Identifying a required field with the aria-required property
- G141: Organizing a page using headings
Failures
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
- F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links
- F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
- F46: Failure of Success Criterion 1.3.1 due to using th elements, … layout tables
- F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information
- F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes
- F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers
- F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
- F111: Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name
Key Terms
- assistive technology
hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents
Note
functionality provided by assistive technology includes alternative presentations (e.g., as synthesized speech or magnified content), alternative input methods (e.g., voice), additional navigation or orientation mechanisms, and content transformations (e.g., to make tables more accessible).
Note
Assistive technologies often communicate data and messages with mainstream user agents by using and monitoring APIs.
Note
The distinction between mainstream user agents and assistive technologies is not absolute. Many mainstream user agents provide some features to assist individuals with disabilities. The basic difference is that mainstream user agents target broad and diverse audiences that usually include people with and without disabilities. Assistive technologies target narrowly defined populations of users with specific disabilities. The assistance provided by an assistive technology is more specific and appropriate to the needs of its target users. The mainstream user agent may provide important functionality to assistive technologies like retrieving Web content from program objects or parsing markup into identifiable bundles.
- screen magnifiers, and other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, synchronization with speech, etc. in order to improve the visual readability of rendered text and images;
- screen readers, which are used by people who are blind to read textual information through synthesized speech or braille;
- text-to-speech software, which is used by some people with cognitive, language, and learning disabilities to convert text into synthetic speech;
- speech recognition software, which may be used by people who have some physical disabilities;
- alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard (including alternate keyboards that use head pointers, single switches, sip/puff and other special input devices.);
- alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations.
- content
information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions
- presentation
rendering of the content in a form to be perceived by users
- programmatically determined
determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities
- relationships
meaningful associations between distinct pieces of content
- structure
- user agent
any software that retrieves and presents Web content for users
- Web page
a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent
Note
Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.
Note
For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a Web page.
Test Rules
The following are Test Rules for certain aspects of this Success Criterion. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.
- ARIA attribute is defined in WAI-ARIA
- ARIA state or property has valid value
- Headers attribute specified on a cell refers to cells in the same table element
- Role attribute has valid value
- ARIA required context role
- ARIA required ID references exist
- ARIA required owned elements
- ARIA state or property is permitted
- Element with role attribute has required states and properties
- Table header cell has assigned cells