Overview of Info and Relationships
Purpose
Using the correct markup for titles, headings, lists and labels can make them identifiable both visually and programmatically. HTML structure can allow a screen reader to provide an outline of the page, effectively allowing people that use these tools to navigate by headers. Allowing all visitors the ability to skim content to get to what is most interesting or relevant to them.
There are several YouTube videos showing how people who use screen readers navigate a web page, below is one example.
https://www.youtube.com/embed/q_ATY9gimOM
Using logical page structures also helps people with cognitive disorders understand and remember where they are.
How to Test
- Run an automated accessibility checker
- Every issue the automated testing tool points out related to landmarks, list, radio buttons / fieldset, missing table headers is a failure
- Content does not specify landmarks for major regions
- Elements visually displayed as a list are not correctly expressed as such programmatically
- Individual radio button options are not programmatically associated to a group
- Data table does not provide programmatic association between data and headers
- Data table is missing a caption
- Every issue the automated testing tool points out related to landmarks, list, radio buttons / fieldset, missing table headers is a failure
- Review the Web Developer, Document Outline for possible failures
- Manual review the page with a screen reader for possible failures
- Meaning is conveyed through an appearance that is not explained
- Elements visually displayed as a list are not correctly expressed as such programmatically
- Data table’s programmatic association between data and headers is not accurate/complete
- Information is conveyed to screen readers as a data table when it is not
- Content does not specify landmarks for major regions
- Not all text is readable by a screen reader
Best Practices
Headings
Headings make page navigation easier and more logical by breaking a page into sections. But users of assistive technology can only benefit if the headings are labeled and nested correctly. Every page should have a top-level header or title. Something that explains what the overall focus of the page is. Additional headings should be logically nested under it.
Numbered and Bulleted lists
Short, well-written lists are often easier for individuals with cognitive disabilities to read than large blocks of text. If you can see the list, you can understand if it is short or long. As you read, you know where you are within the list. For people who rely on screen readers, it is important that lists are programmatically described. This allows screen readers to announce the list with an item count, or read an individual item by its number: 1, 2, and so on.
Bulleted lists can create a text alternative for Organizational Charts
Organizational charts are rich with information. Because of the hierarchical nature of an organizational chart, bulleted lists work well. A bulleted list version of an organization chart can be provided as a text alternative to a image or on it’s own.
An amazing example of this technique is from the College Organization Chart for Bellevue College.
Data Tables
Someone who is blind should be able to move around within a data table. Hearing not only the data within a cell but also the cells column and row headers. Screen readers can provide this experience, if tables are authored to define the tables column and row headers. Modern authoring tools provide this through simple options.
Some tools also provide a way to define a short explanation, or caption, of what the data shows.
PDF Tables
Creating accessible PDF tables is less straight forward. Therefore it is advised that information be maintained in HTML, Word or Excel. If your information must be in a PDF, use the Adobe Accessibility Checker to help guide you on making your tables accessible.
Exceptions
Success Criterion 1.4.1 Use of Color needs to be followed if you are using color to convey information. It is not necessary to programmatically expose color values.
References
Info and Relationships: Understanding SC 1.3.1