Accessibility rule: Role not inside the required context, explained

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.
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>

Who is impacted by this barrier?

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 does the check work?

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.

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. 

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