1.3.1 - Info and Relationships - A
Intent
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Who Benefits
- When content structured and organized with headings, lists, tables, forms, or other structures is implemented by semantic markup and proper relationships, the following (and much more) people benefit:
- People who use screen readers can understand and navigate through these structures since the screen reader announces their presence.
- Sighted people who have disabled CSS styles can still recognize headings, links, and other structures thanks to the browser's default styles.
- People who use screen readers benefit when information conveyed through color or other visual means is also available in text.
- People who cannot hear benefit when information conveyed through audio (such as an error sound effect) is also provided by different modalities, such as text.
Presentation
The presentation (in this context) means rendering the content in a form users can perceive, such as:
- standard browser reading
- browsing in the reader mode
- browsing with disabled CSS styles
- using a screen reader
- and more
Information and Relationships
Information and relationships implied by visual or auditory formatting must be preserved when the presentation format changes.
For instance, putting text into the <h1> element allows the browser to style the text with a bigger font size and add it to the page heading outline, so sighted users can recognize the text as a heading thanks to its styles, and screen reader users can hear "heading level one" as screen readers can programmatically determine it from the markup.
If it is not possible to preserve the formatting when the presentation format changes, supplement additional information with text.
Use HTML elements according to their meaning, not because of the way they appear visually.
Examples
Correct Usage
The following example shows the correct usage or implementation of accessibility.
Example 1: Game List
There is a headline "Our Games" followed by a list of 3 game names. Because all elements are implemented semantically, using <h3>, <ul>, and <li> elements, users using different presentation formats can understand there is a heading and a list. Also, the first game in the list, the "Castle attack - 2023", is wrapped in the <strong> tag, putting an emphasis on it. Visually, the text will normally get bold, but because some screen readers cannot properly handle emphasis, there is also a text saying "new", indicating this game is the newest addition.
<h3>Our Games</h3>
<ul>
<li><strong>Castle attack - 2023 (new)</strong></li>
<li>Speed racer - 2020</li>
<li>John's tale - 2018</li>
</ul>
Incorrect Usage
The following example shows incorrect usage or implementation of accessibility.
Example 1: Visual-only Heading
A heading is implemented as a paragraph. The paragraph has a CSS class with styles that make it visually look like a heading, but because it is a <p> and not <h1> (or other heading levels) element, it is not programmatically determinable as a heading. Screen reader users, for instance, would not be able to detect this text as a heading and navigate through it.
<style>
.h1 {
font-family: Roboto;
font-size: 200%;
font-weight: bold;
}
</style>
<p class="h1">Introduction</p>
<p>Web accessibility means that websites, tools, and technologies...</p>
Example 2: Span Link
The intention here is to re-create a link functionality by using a <span> element instead of <a> (which you should avoid!). When users click on the text, they get redirected to another page thanks to the <onclick> functionality, however, there are several issues.
First, the link is not programmatically determinable as it is not implemented as an anchor with the href attribute. Sighted users might be able to recognize the link due to a specific CSS styling but users of assistive technologies such as screen readers would not know there is a link.
Second, keyboard users have no way of activating the link as now it is not focusable and works only on the click event.
<span onclick="location.href='newpage.html'">
Read more
</span>
Example 3: Text-only Table
The following data might visually resemble a table due to the whitespaces that are used to visually format it. It might look like there are columns of days and rows of time with school subjects connected to them. With this approach, screen reader users are not able to understand the connections of the table values and can only read a word after the word, as there is no table navigation for them. Also, when custom font styles are applied to the page, even this visual format might break. The same applies to cases when the browser window is too small and words start to break to another line. You can probably find more situations when people would be unable to understand this data.
The table should be implemented as <table> element instead, with all the needed <tr>, <th>, and <td> elements.
Monday Tuesday Wednesday
------------------------------
12:00 | Math Science History
|
14:00 | Reading Writing Music
|
16:00 | Biology Physics Art
Test Your Knowledge
Using non-heading elements to create visually heading-like texts is considered a failure of this success criterion. True or false?
True, remember, use HTML elements according to their meaning, not because of the way they appear visually.
The term "programmatically determinable" refers to the ability of a computer program to automatically figure out the most likely outcome of a situation based on predefined rules and patterns, without human intervention. True or false?
False, if something is programmatically determinable, it implies that its structure, labeling, and relationships are designed in a way that allows various technologies to programmatically retrieve it and present it to users in different ways based on their presentation format.