WCAG (Level A) SC 1.3.1 Info and Relationships (W3.org)
Issue description
WCAG 1.3.1, “Info and Relationships” is about ensuring that the way information is structured on a web page is clear and understandable, even for people who can’t see the page or rely on assistive technologies like screen readers. It requires that any information, structure, or relationships conveyed through visual presentation can also be programmatically determined.
Many websites rely solely on visual cues to convey structure and relationships. For example:
- Headings: Using larger, bold text to indicate headings without using proper heading tags (
<h1>to<h6>). - Lists: Presenting lists using visual bullet points or hyphens without using list tags (
<ul>,<ol>). - Tables: Creating tables using visual layout techniques instead of proper table markup (
<table>,<tr>,<th>,<td>).
When visual structure isn’t coded properly, assistive technologies may not be able to interpret and convey the information’s organization to users. This can make it difficult for people with disabilities to:
- Understand the content: They might miss out on key information about how the content is organized and related.
- Navigate the page: They might struggle to find specific information or understand the overall page structure.
Essentially, this guideline ensures that the meaning and organization of content are not lost on users who rely on assistive technologies to access the web. It promotes a more inclusive online experience where everyone can understand and navigate web content regardless of their abilities.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 1.3.2 Meaningful Sequence
- WCAG (Level AA) SC 2.4.6 Headings and Labels
- WCAG (Level AAA) SC 2.4.10 Section Headings
- WCAG (Level A) SC 2.5.3 Label in Name
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.3.1, “Info and Relationships” involves ensuring that the structural information conveyed visually is also programmatically available to assistive technologies. Here’s how:
Use semantic HTML
- Headings: Use heading tags (
<h1>to<h6>) to structure content hierarchically. Don’t just style text to look like headings. Example: Instead of<span style="font-size: 24px; font-weight: bold;">Important Information</span>, use<h2>Important Information</h2>. - Lists: Use list elements (
<ul>,<ol>,<li>) for lists of items. Avoid presenting lists using visual cues only (e.g., hyphens or bullet points). Example: Instead of<p> - Item 1</p><p> - Item 2</p>, use<ul><li>Item 1</li><li>Item 2</li></ul>. - Tables: Use table elements (
<table>,<tr>,<th>,<td>) to structure tabular data. Ensure proper use of table headers (<th>) with scope attribute to associate data cells with the correct row and column headers. - Labels: Use <label> elements to associate labels with form controls (
<input>,<textarea>,<select>). - Emphasis and quotes: Use
<em>for emphasis and<strong>for strong importance instead of just bolding text. Use<blockquote>for quotations.
ARIA attributes (when necessary)
- ARIA landmarks: Use ARIA landmarks (e.g.,
role="navigation",role="main",role="complementary") to define major page sections for assistive technologies. - ARIA labels and descriptions: Use
aria-labelandaria-describedbyto provide labels and descriptions for elements that don’t have them in the HTML. - Live regions: Use ARIA live regions (e.g.,
aria-live) to indicate areas of the page that update dynamically, so assistive technologies can announce those updates.
CSS for visual presentation
- Separate structure from presentation: Use CSS to control the visual appearance of elements. Don’t rely solely on visual formatting to convey structure.
Testing
- Use assistive technologies: Test your website with screen readers and other assistive technologies to ensure the structural information is correctly conveyed.
- Keyboard navigation: Check that the reading order and navigation using the keyboard follow the logical structure of the content.
By following these practices, you ensure that the information and relationships in your content are accessible to everyone, regardless of how they access the web.
