Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

role attribute case-sensitivity #2296

Open
dd8 opened this issue Feb 7, 2025 · 0 comments
Open

role attribute case-sensitivity #2296

dd8 opened this issue Feb 7, 2025 · 0 comments
Labels
accessibility support Accessibility support testing and tracking

Comments

@dd8
Copy link
Collaborator

dd8 commented Feb 7, 2025

Accessibility support

role attributes that are not entirely lowercase are handled inconsistently. Mapping role strings to the browser's internal role constant is done using case-insensitive comparisons in Chrome, Firefox and Safari (e.g. role=main and role=mAiN both map to ax::mojom::Role::kMain in Chrome)

However browsers also expose an xml-roles attribute which is exposed without lowercasing. So that role=mAiN is exposed as xml-roles=mAiN.

That causes problems in AT which have special cases for some xml-roles values and usually compare the value case-sensitively

JAWs has a special case for xml-roles=alertdialog
https://github.com/chromium/chromium/blob/28472b5d68410c6182cfdf0db09edd484e7a1824/ui/views/accessibility/view_accessibility.cc#L395C66-L395C77

NVDA special-cases xml-roles values including menu, banner, complementary, contentinfo, main, navigation, search, form
https://github.com/search?q=repo%3Anvaccess%2Fnvda+xml-roles&type=code

ACT Rules

This support item is used in glossary/explicit-role.md which is used in 18 rules including

https://www.w3.org/WAI/standards-guidelines/act/rules/ff89c9/
https://www.w3.org/WAI/standards-guidelines/act/rules/d0f69e/

Test cases

Test case 1 ...

<div role=main>lower case main</div>

<div role=MAIN>
	<div role=group aria-label="lower case">
		<button>native</button></div>

		<div role=gRoup aria-Label=custom>
		<div roLe=bUtToN tabindex=0 class=test>Mixed case</div>
			<div roLe=BUTTON tabindex=0 class=test>All uppers</div>

		<div role=button tabindex=0 class=test>lower case</div>
	</div>
</div>

Open this test case

Test Results

Chrome lowercases role in a11y tree

  • macOS maps to correct platform roles (AXButton, AXGroup, AXLandmarkMain)
    Safari lowercases role in a11y tree
  • macOS maps to correct platform roles (AXButton, AXGroup, AXLandmarkMain)
    Firefox lowercases role in a11y tree, but has a mixed-cased xml-roles attribute in accessibility inspector
  • macOS maps to correct platform roles (AXButton, AXGroup, AXLandmarkMain)
@dd8 dd8 added the accessibility support Accessibility support testing and tracking label Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility support Accessibility support testing and tracking
Projects
None yet
Development

No branches or pull requests

1 participant