Accessibility devtools: landmark roles are not precisely indicated
Categories
(DevTools :: Accessibility Tools, defect)
Tracking
(Not tracked)
People
(Reporter: kantoche, Unassigned)
Details
Attachments
(1 file)
Results of a test of each landmark subclass role with the accessibility dev tools.
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0
Steps to reproduce:
Navigate to https://www.w3.org/WAI/tutorials/tables/one-header/ (this is just one example).
Open Devtools and Accessibility Panel.
Actual results:
In the roles' column, we have for the element nav[aria-label="Skip links"][role="navigation"] the (abstract) role "landmark" instead of the role "navigation"
Expected results:
Wouldn't it be more useful to indicate precisely the landmark role actually used ("navigation" in this case) rather than just indicating that it is a "landmark"?
|
||
Comment 1•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'DevTools::Accessibility Tools' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.
|
||
Updated•4 years ago
|
Yes, I find this confusing. It's interesting to note VoiceOver does report the correct landmark (so maybe it's just confusing sighted devs)
Also Chrome shows the correct navigation role for <nav>. Why can't Firefox?
|
||
Comment 3•3 years ago
|
||
This also appears to be the case for the <aside> element. It should have the "complementary" role, but the accessibility panel just shows "landmark".
I have tested the behavior of each role that is a subclass of the landmark role (I used the landmark roles as defined in the WAI-ARIA 1.1 specification).
I used Firefox version 108.0.1 (64-bits) on Windows 10.
I used this HTML document as a test case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmark roles test</title>
</head>
<body>
<main aria-label="main element"></main>
<div role="main" aria-label="div with main role"></div>
<nav aria-label="nav element"></nav>
<div role="navigation" aria-label="div with navigation role"></div>
<header aria-label="top level header element"></header>
<div role="banner" aria-label="div with banner role"></div>
<footer aria-label="footer element"></footer>
<div role="contentinfo" aria-label="div with contentinfo role"></div>
<aside aria-label="aside element"></aside>
<div role="complementary" aria-label="div with complementary role"></div>
<form aria-label="form element"></form>
<div role="form" aria-label="div element with form role"></div>
<div role="search" aria-label="div element with search role"></div>
<div role="region" aria-label="div element with region role"></div>
</body>
</html>
The results in the accessibility dev tools:
- The
main,navigation,banner,contentinfo,complementaryandsearchroles all show their superclasslandmarkrole. This happens for their respective semantic HTML elements (e.g.main, top levelheader) as well as when setting these roles explicitly. - The
formrole is shown asform. - The
regionrole is shown asregion.
So it seems to happen for all the landmark roles except for form and region.
I will add a screenshot of the results as well to this issue (if I'm able to).
Hope this helps!
|
||
Comment 7•3 years ago
|
||
having same issue, you know guys if some older version have this feature working properly?
|
||
Updated•3 years ago
|
Description
•