Comments (2)
@mbgower Thanks for your feedback. This example is not semantically marked up as a menu; the word "menu" is used more as a recognisable human-readable construct relating to navigation. The actual mark-up only uses disclosure buttons and lists of links, and as such, the focus management applicable to semantic menus is not implemented.
You can also see this in action on the original Authoring Practices example at:
https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html
If you believe that the underlying Authoring Practices example, which these tests are based on, should be modified in some way, you can file an issue at:
https://github.com/w3c/aria-practices
As the ARIA-AT tests and demo test case are working as expected, I'll be closing this issue.
from aria-at.
the word "menu" is used more as a recognisable human-readable construct relating to navigation. The actual mark-up only uses disclosure buttons and lists of links, and as such, the focus management applicable to semantic menus is not implemented.
I find that a little unusual.
I will take this up with the APG issue, but that is somewhat nonsensical from a design perspective. Isn't the purpose here to create a universal experience?
- The test is named "menu" because as you note 'it looks like a menu'
- You create a button that opens something and is visually cued that way for sighted users
If we imagine a sighted designer requesting a menu construct, the convention is that the first item in the menu takes focus on open. That is what they will request/expect from their developer.
These conventions are not just restricted to the first item taking focus. Another is that a menu collapses when focus leaves it, either due to activation or to a user navigating past it.
One of the consequences of using a disclosure to mimic a menu is that you no longer have a requirement to auto-close it. But when replicating a menu, that is expected behaviour. It can lead to unexpected/unintended issues. Here, your 'menu' is not collapsing when a menu item is activated. The result is that the menu persists and visually obscures the content brought into focus by its activation.
Image showing the Admissions menu open with the main content showing the heading Tuition. Even though the main content has focus, it cannot be read by a sighted user because it is obscured by the still open Admissions menu.
from aria-at.
Related Issues (20)
- Feedback: "Increment a slider by one step" (Color Viewer Slider, Test 4, V24.06.26) HOT 2
- Feedback: "Decrement a slider by one step" (Color Viewer Slider, Test 5, V24.06.26) HOT 1
- Reduce duplication between v1 and v2 `process-test-directory` builders
- Feedback: "Increment a slider to the maximum value" (Color Viewer Slider, Test 9, V24.06.26) HOT 3
- JAWS Feedback: "Request information about an unchecked radio button" (Radio Group Example Using aria-activedescendant, Test 14, V24.03.13) HOT 2
- Feedback: "Navigate from a collapsed disclosure button to a link in a dropdown" (Disclosure Navigation Menu Example, Test 12, V24.07.31) HOT 1
- Feedback: "Navigate backwards to a collapsed disclosure button" (Disclosure Navigation Menu Example, Test 2, V24.07.31)
- Feedback: "Navigate to an expanded disclosure button from a link in the associated dropdown" (Disclosure Navigation Menu Example, Test 11, V24.07.31)
- Feedback: "Activate a link in a dropdown" (Disclosure Navigation Menu Example, Test 15, V24.07.31)
- Feedback: "Navigate backwards to a menu button" (Action Menu Button Example Using aria-activedescendant, Test 2, V24.08.08) HOT 1
- Feedback: "Navigate to an item in a menu by typing a character" (Action Menu Button Example Using aria-activedescendant, Test 9, V24.08.08)
- Feedback: "Navigate forwards to an expanded disclosure button" (Disclosure Navigation Menu Example, Test 3, V24.08.12) HOT 1
- Feedback: "Request information about a menu item" (Action Menu Button Example Using aria-activedescendant, Test 6, V24.08.12) HOT 1
- Feedback: "Activate a menu item" (Action Menu Button Example Using aria-activedescendant, Test 10, V24.08.12)
- Feedback: "Request information about a collapsed disclosure button" (Disclosure Navigation Menu Example, Test 5, V24.08.12)
- Feedback: "Request information about a collapsed disclosure button" (Disclosure Navigation Menu Example, Test 5, V24.08.12) HOT 1
- Feedback: "Request information about an expanded disclosure button" (Disclosure Navigation Menu Example, Test 6, V24.08.12)
- Feedback: "Navigate from a collapsed disclosure button to a link in a dropdown" (Disclosure Navigation Menu Example, Test 12, V24.08.12) HOT 1
- Feedback: "Navigate backwards to a menu button" (Action Menu Button Example Using aria-activedescendant, Test 2, V24.08.12)
- Feedback: "Activate a link in a dropdown" (Disclosure Navigation Menu Example, Test 15, V24.08.12)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aria-at.