Using WCAG Success Criteria 1.3.1

Back to blog

Using WCAG Success Criteria 1.3.1 to Improve Accessibility for Individuals with Cognitive Disabilities

Posted February 16, 2025

AudioEye

Posted February 16, 2025

Abstract image showing WCAG 1.3.1 Success Criterion: Info and Relationships.
Abstract image showing WCAG 1.3.1 Success Criterion: Info and Relationships.

Ready to see AudioEye in action?

Watch Demo

WCAG 1.3.1: Info and Relationships helps ensure digital content is structured in a way that improves navigation and usability, something that’s particularly beneficial for those with cognitive disabilities. Discover how to apply the success criterion to your content creation process and what mistakes to avoid below.

Have you ever landed on a webpage that felt cluttered and confusing? Imagine experiencing that on a daily basis because the content isn’t structured properly. For individuals with cognitive disabilities, including Autism Spectrum Disorder (ASD), poor website organization can make navigation frustrating and confusing, if not outright impossible.

That’s where the Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1: Info and Relationships comes in. The success criterion ensures that content structure — everything from headings and lists to form labels — is clear and programmatically conveyed, which makes content more accessible for users.

What exactly is WCAG Success Criterion 1.3.1? We’ll explore that in more detail below — and how applying the guideline benefits users with cognitive disabilities. We’ll also review how content creators (including designers, developers, and copywriters) can implement it effectively.

What is WCAG Success Criterion 1.3.1: Info and Relationships?

WCAG Success Criterion 1.3.1: Info and Relationships is part of WCAG 2.0 Level A requirements under the ‘Perceivable’ category. It ensures that the structure and meaning of content are preserved and conveyed in a way that assistive technologies, including screen readers, can understand. More simply, it means that when you create any type of user interface, you need to use proper semantic markup so that screen readers and other types of assistive technologies can accurately interpret the content.

Think of it like this: A well-structured website is like a well-organized book. Headers are the chapter titles, lists help break down the key points, and form controls and labels provide clear instructions. If these elements aren’t coded correctly, assistive technology users might experience a jumbled mess instead of a meaningful sequence of information. 

It’s important to note that the success criterion goes beyond just visual organization. 1.3.1 aims to ensure the relationships between elements are built into code so they make sense regardless of how someone accesses the content. We’ll cover exactly how to apply these practices in your digital content in more detail below.

Illustration of a website and a pulley system leading to a person's head

How WCAG 1.3.1 Supports Individuals with Cognitive Disabilities

Now that you understand Success Criterion 1.3.1 let’s examine how it specifically benefits those with cognitive disabilities. 

However, before we get into that, let’s examine common cognitive disabilities and how each affects an individual’s ability to interact with digital content.

Common Cognitive Disabilities and Digital Challenges

Cognitive disabilities affect how people process, understand, and interact with information. Different cognitive disabilities present unique challenges when interacting or navigating online content. Here are a few examples:

ADHD (Attention Deficit Hyperactivity Disorder)

ADHD is a neurodevelopmental condition that affects focus, impulse control, and working memory. People with ADHD may struggle to stay on task when faced with long paragraphs, cluttered pages, or inconsistent layouts. Websites with poor structure or excessive distractions can make it difficult to find information or complete a task without frustration.

Autism (Autism Spectrum Disorder, ASD)

Autism is a spectrum condition that affects communication, social interaction, and sensory processing. Many autistic individuals rely on predictable patterns and clear organization to process information. Disorganized content, sudden layout changes, or missing headings and labels can create confusion and frustration. Sensory sensitivities may also make it difficult to focus on a page overloaded with unnecessary animations, pop-ups, or inconsistent formatting.

Dyslexia

Dyslexia is a learning disability that primarily affects reading and language processing. Individuals with dyslexia may struggle with decoding words, recognizing letter patterns, or tracking lines of text. Large blocks of unstructured content can be overwhelming, while inconsistent formatting can disrupt the reading flow. Clear headings, bullet points, and properly structured text help improve comprehension and navigation.

How Properly Structured Content Improves Accessibility

To improve the online experience for individuals with cognitive disabilities (and others as well), it’s important your digital content is well-organized, predictable, and easy to navigate. WCAG 1.3.1 provides that consistency and predictability by:

  • Keeping navigation and layout consistent and in predictable places helps users feel more in control.
  • Creating a clear visual hierarchy to break content into digestible sections allows users to scan for key information rather than getting lost in a wall of text. 
  • Breaking down complex content into logical steps or sections for easier processing.
  • Using landmarks and labels to make it easier for users to understand what each element does, reducing guesswork and frustration.
Man sitting at a disk writing code; a large accessibility symbol is to his left.

Practical Steps to Apply WCAG 1.3.1 for Better Accessibility

Applying WCAG 1.3.1 isn’t just about writing good content — it’s about structuring it in a way that makes sense both visually and programmatically. Organizing content this way improves navigation for everyone, including users with cognitive disabilities and those relying on assistive technology. 

To apply WCAG 1.3.1 in your content creation process, follow these four best practices:

1. Use Proper HTML Markup

Think of HTML as the foundation of accessible content. Using it, particularly semantic HTML, ensures your content is structured logically, making it easier to read, navigate, and interact with. Here are a few examples of semantic markup to use when creating your content:

  • Headings (<h1> to <h6> define the hierarchy of content. Without them, screen reader users have to listen to everything in one long block instead of jumping between sections. 
  • Lists (<ul>, <ol>, <li>, etc.) provide structure for grouped content. If you manually add bullet points using dashes instead of using proper HTML lists, a screen won’t recognize these items as being related. 
  • Tables with proper markup (<th>, <caption>) make data meaningful. Without the right structure, someone using a screen reader might hear “Row 3, Column 2: 42” with no understanding of what that number represents. Be sure your data tables and data cells include the right markup to reduce confusion and maintain a good user experience.
  • Form elements with labels (<label> for <input>) clarify purpose. A properly labeled search box will tell a screen reader user: “Search for products” instead of just reading “Edit text field.”

2. Ensure Labels and Associations are Meaningful

Forms can be a major accessibility for individuals with disabilities, but following a few simple rules can make them significantly more user-friendly.

  • Use descriptive form labels: Use <label> for <input> instead of relying on placeholder text (which disappears when users start typing) as <label> elements clearly indicate what each form field is for. Labels should be concise but meaningful, like “Email Address” instead of just “Email.” All required fields should be labeled as such as well.
  • Group-related form elements: If a form has multiple sections (like billing vs. shipping information), wrapping related fields in a <fieldset> with a <legend> provides context. This makes it easier for users to understand how different fields relate.

3. Maintain Logical Reading Order

How your code's content is structured should match how it’s read visually. If the reading order doesn’t make sense, users — especially those using screen readers — can get lost or miss important information. 

  • Keep content in a natural order: Headings should precede the paragraphs they introduce, and buttons should follow the instructions that explain them. Unexpected content can confuse users.
  • Avoid using layout tables: Tables should only be used for data, not for arranging content on a page. Instead, use proper headings, lists, and sections to create a clear structure. 
  • Check that CSS doesn’t change the reading order: Some design choices, like moving elements around with CSS, can cause screen readers to read content out of order. Always test your content to make sure it flows logically when read aloud. 

A well-structured page ensures all users can follow information easily, no matter how they interact with your content.

4. Support Alternative Navigation Methods

Users don’t always interact with content in the same way. Some rely on screen readers, while others navigate exclusively with a keyboard. Ensuring your content works across different input methods is key to accessibility. 

  • Implement ARIA landmarks: ARIA (Accessible Rich Internet Applications) landmarks, like <nav>, <main>, and <aside>, help assistive technologies identify key sections of a page. If these HTML5 elements aren’t an option, use ‘role=”navigation”’ or ‘role=”main”’ to provide similar functionality. 
  • Enable keyboard accessibility: Ensure all interactive elements (like buttons, links, and form fields) can be accessed using only a keyboard. Users should be able to tab through elements in a logical order and use the Enter or Space key to activate them.

Common Mistakes to Avoid

Even with the best intentions, it’s easy to overlook certain aspects of properly structured content. Below are a few common mistakes to avoid to maintain a good user experience.

  • Using visual styling instead of semantic structure: Making text bold instead of using proper headings (<h1>, <h2>, etc.) might look fine, but it doesn’t provide screen readers or users with a clear sense of structure. Actual headings are needed to ensure users can properly navigate through content.
  • Overloading pages with too much unstructured content: Large walls of text without clear headings, lists, or sections can be overwhelming, especially for users with ADHD or dyslexia. Breaking content into smaller, more structured sections makes it easier to digest.
  • Forgetting to test with assistive technologies and individuals with disabilities: If you do not test your digital content with screen readers, keyboard users, or real users with cognitive disabilities, you may miss accessibility issues. Make sure to test your content early and often to ensure it works well for all users.
Accessibility symbol next to a series of design and development icons.

Better Structure, Better Accessibility

WCAG 1.3.1 provides the foundation you need to create well-structured and easily navigable content — especially for those with cognitive disabilities, including ASD, ADHD, and dyslexia. Structuring your content with headings, lists, labels, and a logical reading order allows you to create a better experience for all users, helping them navigate, understand, and engage with your content more easily. 

To help you on the path to creating more well-structured, accessible, and compliant content, there’s AudioEye. From our free Web Accessibility Scanner that identifies 30 WCAG violations to our Automated Accessibility Platform that automatically fixes them, AudioEye makes it easy to find and fix structural issues within your content. We also supplement our software testing with Expert Audits from accessibility experts and individuals from the disability community. With our three-pronged approach to accessibility, you’ll easily meet the requirements in WCAG 1.3.1 and every other success criterion, too.


Ready to get started? Scan your content below or schedule a demo to see AudioEye in action. 

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading