Ensuring that information implied by visual and auditory cues is accessible to all users
![Web browser with an eye icon and a magnifying glass icon](https://images.prismic.io/audioeye-web/38989b13-e9f4-49b1-a237-722b6f6838ba_WCAG-Success-Criterion-1.3.1-Info-Relationships-Cover.jpg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&rect=0%2C0%2C4800%2C2520&w=1160&h=609)
What does WCAG 1.3.1 say about information and relationships?
For people without visual or auditory impairments, it's easy to forget just how much information can be conveyed through visual and auditory cues. Website headings are easy to distinguish from body text because they are usually in a larger font and separated from the following paragraph by a space. Items in a list will be bulleted, and background colors can be used to group similar items. And in audio content, the pace, pitch and tone of voice are often varied to provide emphasis or indicate quoted text.
![Webpage with the header "Website Heading" showing text and a Bulleted List with an eye icon](https://images.prismic.io/audioeye-web/0830bb71-1da5-46f7-8ca7-4eb583eaa63e_WCAG-Success-Criterion-1.3.1-Info-Relationships-Information.jpg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&rect=0%2C0%2C4800%2C2520&w=1160&h=609)
The W3C’s Web Content Accessibility Guidelines (WCAG)'s guideline 1.3.1 aims to ensure that the information and relationships implied by these cues are not lost when interpreted by assistive technologies (AT). WCAG 1.3.1 calls for these elements to be programmatically represented wherever possible, or else available in text, to make sure that users of all abilities can perceive information that is important for comprehension.
![keyboard, sound icon, ear, all above a web page](https://images.prismic.io/audioeye-web/44467cc3-c96d-4d44-b072-877f6ca99044_WCAG-Success-Criterion-1.3.1-Info-Relationships-Conform.jpg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&rect=0%2C0%2C4800%2C2520&w=1160&h=609)
Why is it important to conform with WCAG 1.3.1?
When the presentation format of a web page changes — for example, when it is reinterpreted by an AT device such as a screen reader, or when a user with a disability applies a different style sheet to the content — any improperly implemented visual and auditory clues can be lost. When that happens, it can become difficult or even impossible for users to understand how the information on your website is structured.
Imagine how it would be if all bulleted lists on your website appeared to have collapsed into a single block of text. Imagine if you couldn't understand which fields required input, and which were optional, or if carefully structured and colored tables became blocks of disordered text. How would it be if you couldn't understand when different people were speaking in a video?
For hundreds of millions of web users worldwide, the loss of visual and auditory cues can render your website unusable. This could also put you at risk of lawsuits under disability legislation such as the Americans With Disabilities Act (ADA).
![Webpage showing <H1> as the main headline, <H2> as the sub-headline and <P> as the text](https://images.prismic.io/audioeye-web/249444fe-5bb7-444b-87e2-af8c4d378a23_WCAG-Success-Criterion-1.3.1-Info-Relationships-Fixes.jpg?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&rect=0%2C0%2C4800%2C2520&w=1160&h=609)
What can I do to fix the issue?
The W3C recommends the programmatic determination of all structures and relationships that are implied by visual or auditory cues. In practical terms, this means checking what information is lost when your content is accessed using AT devices, and ensuring that the constituent elements are identified correctly.
Often, you will need to provide a second way to identify the role of a piece of content. For example, ensuring that headers and sub-heads are properly marked up and ordered rather than just relying on the use of different fonts and spacing. Similarly, links that are indicated through the use of different colored text will need to be programmatically identified to screen readers.
Where your website includes tabular information, you'll need to ensure that the correct headers are applied to the rows and columns, so that AT devices can present the information correctly. In some cases, it won't be possible to represent a structure or relationship programmatically, in which case you'll need to provide a complete text description.
WCAG 1.3.1 provides numerous techniques to handle different types of content. And while some issues can be diagnosed and even resolved using software, the majority require human judgment and expertise.
AudioEye combines automated scanning and remediation technology with human-led testing and custom remediation, providing a unique hybrid service that resolves accessibility issues on an ongoing basis. By subscribing to the AudioEye service, you get the benefit of rapid identification and remediation of this and other issues. You also gain access to a team of human experts who can support your web designers in building more accessible content in the longer term.
Don’t delay — subscribe today and solve your digital accessibility issues with AudioEye.
Ready to see AudioEye in action?
Watch Demo
Ready to test your website for accessibility?
Share post