`role` attribute case-sensitivity

[dd8]

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)