Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Allow repeated nested group labels

See original GitHub issue

What tool(s) are you using?

accessibility-checker-engine
accessibility-checker
karma-accessibility-checker
rule-server
boilerplates
other

Detailed description

Node version:

N/A

Platform:

Chrome 90.

Describe in detail the issue you’re having.

In the sample below, there are two groups with unique labels. Each group contains two sub-groups. The sub-groups have unique labels within their parent group.

But EAAC throws an error because every group is considered in a global context. I don’t think it should throw an error.

The same reasoning applies if the parent container is a role=form or role=search. You should be able to have two fieldsets (or role=group) with the same name if they are in different forms.

<div role="group" aria-labelledby="groupLabel1">
	<strong id="groupLabel1">group 1 label</strong>
	<span id="label1">From</span>
	<div role="group" aria-labelledby="label1">...</div>
	<span id="label2">To</span>
	<div role="group" aria-labelledby="label2">...</div>
</div>

<div role="group" aria-labelledby="groupLabel2">
	<strong id="groupLabel2">group 2 label</strong>
	<span id="label3">From</span>
	<div role="group" aria-labelledby="label3">...</div>
	<span id="label4">To</span>
	<div role="group" aria-labelledby="label4">...</div>
</div>

Additional information

Here’s the full test case:

<html lang="en">
<head>
	<title>Test for spurious EAAC warning</title>
</head>
<body>
<main>
	<div role="group" aria-labelledby="groupLabel1">
		<strong id="groupLabel1">group 1 label</strong>
		<div>
			<span id="label1">From</span>
			<div role="group" aria-labelledby="label1">
				<input aria-label="month">/<input aria-label="day">/<input aria-label="year">
			</div>
			<span id="label2">To</span>
			<div role="group" aria-labelledby="label2">
				<input aria-label="month">/<input aria-label="day">/<input aria-label="year">
			</div>
		</div>
	</div>

	<div role="group" aria-labelledby="groupLabel2">
		<strong id="groupLabel2">group 2 label</strong>
		<div>
			<span id="label3">From</span>
			<div role="group" aria-labelledby="label3">
				<input aria-label="month">/<input aria-label="day">/<input aria-label="year">
			</div>
			<span id="label4">To</span>
			<div role="group" aria-labelledby="label4">
				<input aria-label="month">/<input aria-label="day">/<input aria-label="year">
			</div>
		</div>
	</div>

</main>
</body>
</html>

EXPECTED OUTPUT:

No errors.

ACTUAL OUTPUT:

Multiple elements with “group” role do not have unique labels.

Issue Analytics

State:
Created 2 years ago
Comments:10 (9 by maintainers)

Top GitHub Comments

1reaction

tombrunetcommented, Oct 14, 2021

We’ve had a fair amount of debate on this. Short story is, you’re right. Where I think we’ve settled:

In the IBM ruleset:

group will flag as violation if a peer group/radiogroup within a form/group hierarchy has the same label.
landmarks will flag as a violation if a peer of the same role within a landmark hierarchy has the same label.

These will flag as recommendations in the WCAG rulesets.

0reactions

aliunwalacommented, Feb 17, 2022

This now works on the chrome store plugin. To replicate this you must use the preview ruleset by doing: