Accessibility rule: Role not inside the required context, explained

Summary

This rule ensures that elements with specific semantic roles are placed within the correct parent structures so assistive technologies can interpret them properly. When required context is missing, users may receive incomplete or misleading information about page structure and functionality.

Overview

Accessibility of web content requires that widgets, structures, and behaviors are coded so, that assistive technology is able to accurately convey the right information to users. This rule is checking that any element that assistive technology can access, is associated correctly with their required context.

What This Rule Means

Example:
A list item <li>, should not exist without an appropriate context, which would be either an unordered list <ul> or an ordered list <ol>.

When a list is properly structured, assistive technology is able to correctly announce to the user, that there is an unordered list, with two list items.

<ul> 
<li>List item 1</li> 
<li>List item 2</li> 
</ul>

Why This Matters (Impact)

Who is impacted by this?

When elements, that require a context role are correctly nested, blind or low-vision screen reader users are able to easier understand the contexts and structures that are present on the website. If the content is not properly structured, navigating the website can be very confusing. Imagine, walking on a street that suddenly has a gap. You could compare the context role, with a ‘mind the gap’ sign.

How the Check Works

This rule checks that any element with a semantic role exists inside its required context. 

The list of roles can be found in the WAI-ARIA specifications. 

By searching with the role, that Siteimprove flags as missing a context role, you can find out what the required context roles are.

Common Failure Example

Example of a common failure: 

<ul role="tablist"> 
<li>Item</li> 
</ul>. 

In this example, the <li> that is flagged looks fine, but when investigating the error further, you’ll notice that the parent element has the role of a tablist. 

Additional Information

You can read more about the SIA-R42 check in the technical documentation for Alfa, Sieimprove's open-source accessibility conformance testing engine.