Giter Club home page Giter Club logo

Comments (2)

jscholes avatar jscholes commented on September 25, 2024

@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.

mbgower avatar mbgower commented on September 25, 2024

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?

  1. The test is named "menu" because as you note 'it looks like a menu'
  2. 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
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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.