Loading...
Loading content...
Loading content...
Use proper HTML elements (headings, lists, tables) so assistive technologies understand the page structure.
Why it matters: Screen readers rely on semantic HTML to navigate and understand content relationships.
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
What This Means: This success criterion requires that information, structure, and relationships that are visually apparent (like headings, lists, tables, form field groupings) must also be programmatically determinable. This means using semantic HTML elements and ARIA attributes so assistive technologies can understand and communicate the structure to users.
Why It's Important: Screen readers and other assistive technologies rely on programmatic structure, not visual appearance, to understand content. When information is only conveyed visually (like using styled divs instead of headings), assistive technology users miss critical structural information. This makes navigation difficult and content relationships unclear.
Use semantic HTML elements like <h1>-<h6> for headings, <ul>/<ol> and <li> for lists, <table> with <thead> and <th> for tables, <label> for form fields, and <fieldset> for grouped form fields. When semantic HTML isn't sufficient, use ARIA attributes to convey structure and relationships. The key is ensuring that anything visually apparent has a programmatic equivalent.
This criterion ensures that blind users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that keyboard users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Text is styled to look like headings but uses <div> or <span> instead of <h1>-<h6>.
<div style="font-size: 24px; font-weight: bold;">Main Title</div>Headings use proper <h1>-<h6> elements so screen readers can navigate by heading structure.
<h1>Main Title</h1><h2>Section Title</h2>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.3.1 Info and Relationships are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If it looks like a heading, it's fine to use a div with styling.
Screen readers rely on semantic HTML. A styled div doesn't provide heading structure, making navigation by headings impossible.
Screen readers can see visual structure, so semantic HTML isn't needed.
Screen readers are blind to visual presentation. They rely entirely on programmatic structure (HTML semantics and ARIA) to understand relationships.
I can use CSS to make anything look like a list, so I don't need <ul> or <ol>.
Visual styling doesn't convey list structure to screen readers. Use proper list elements so assistive technologies can announce list items correctly.
Using styled divs or spans instead of heading elements (<h1>-<h6>).
Use proper heading elements. Style them with CSS, but use semantic HTML for structure. Example: <h1>Title</h1> not <div class='heading'>Title</div>.
Creating lists with divs and CSS instead of <ul>/<ol> elements.
Use proper list elements. Screen readers announce list structure. Example: <ul><li>Item</li></ul> not <div>• Item</div>.
Tables without proper <thead> and <th> elements for headers.
Use <thead> for header rows and <th> for header cells. Associate data cells with headers using scope or headers attributes.
Form fields without proper label associations.
Use <label> with for attribute matching input id, or use aria-labelledby. Never rely on placeholder text as the only label.
Visual groupings without semantic structure (like form fieldsets).
Use <fieldset> and <legend> to group related form fields. This helps screen readers understand relationships.
Note: These are official W3C resources for 1.3.1. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.3.1 Info and Relationships correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.3 Adaptable