AW: Names for ARIA menu and menubar

Hi David,

Thanks a lot for testing and improving my code snippet. This improvement hack with <nav> around helps a bit if you use menu in a web page environment, though, but tabbing only you don’t get the name set on the <nav> through aria-label either: NVDA reads also here only the name of the submenu in focus. My problem is doubled through our approach to make a pure single-page web app putting role=application on the <body> tag. In this apporoach the landmarks are useles because in the form mode the screen reader user has no virtual cursor at his/her disposal.

But in my understandnig of ARIA, Screen readers must announce a menu or menubar’s name set by author by aria-label at entering the menu. That is the same as announcing a toolbar’s name—something thea works.

Ciao     Mario

Von: David MacDonald [mailto:david100@sympatico.ca]
Gesendet: Dienstag, 14. Juni 2016 17:00
An: Batusic, Mario <mario.batusic@fabasoft.com>
Cc: ALAN SMITH <alands289@gmail.com>; w3c-wai-ig@w3.org
Betreff: Re: Names for ARIA menu and menubar

Thanks for the explanation... that is ambitious... and a lot of work <smile>.

I actually quite like the home menu on your web site, with tab key operating the upper row, and enter/spacebar to open the menu, meanwhile mouse users get the menu on hover.

It's a little unorthodox, not to do the same thing on focus as on mouse hover, but wait for the key activation instead, but I think it makes sense in this situation. Perhaps some for the aria team would want to see the arrow keys engaged, but I'm not sure in this situation it would make it more accessible.

Anyway
I wrapped it in a <nav aria-label="service"> and it seems to work fine.

http://www.davidmacd.com/test/label-on-menu.html


Cheers,
David MacDonald



CanAdapt Solutions Inc.
Tel:  613.235.4902

LinkedIn
<http://www.linkedin.com/in/davidmacdonald100>

twitter.com/davidmacd<http://twitter.com/davidmacd>

GitHub<https://github.com/DavidMacDonald>

www.Can-Adapt.com<http://www.can-adapt.com/>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>

On Tue, Jun 14, 2016 at 9:29 AM, Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>> wrote:
Hi David,

The whole app is a single-page web application, that means, we get the look and feel of a desktop GUI also for the blind users. They (better we, because I am also blind) can use the application similar as the Windows Explorer and can forget that we use a browser. Browser is here only kind of operating system.

Ciao     Mario

Von: David MacDonald [mailto:david100@sympatico.ca<mailto:david100@sympatico.ca>]
Gesendet: Dienstag, 14. Juni 2016 15:22
An: Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>>
Cc: ALAN SMITH <alands289@gmail.com<mailto:alands289@gmail.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Betreff: Re: Names for ARIA menu and menubar

Hey Mario

Why is there an Application role on the <body> tag?

Cheers,
David MacDonald



CanAdapt Solutions Inc.
Tel:  613.235.4902<tel:613.235.4902>

LinkedIn
<http://www.linkedin.com/in/davidmacdonald100>

twitter.com/davidmacd<http://twitter.com/davidmacd>

GitHub<https://github.com/DavidMacDonald>

www.Can-Adapt.com<http://www.can-adapt.com/>



  Adapting the web to all users
            Including those with disabilities

If you are not the intended recipient, please review our privacy policy<http://www.davidmacd.com/disclaimer.html>

On Tue, Jun 14, 2016 at 8:53 AM, Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>> wrote:
Hello Alan,

Here is a sample code—similar to what we use:
-----Code-----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body role="application">
  <div
    role="menubar"
    aria-label="Service">
    <a
      href=""
      role="menuitem"
      tabindex="0"> <img
      lang="en"
      alt="Home"
      title="Home"
      src="">
    </a> <span
      tabindex="0"
      role="menuitem">Webbrowserstatus</span>&nbsp;<span
      tabindex="0"
      role="menuitem"
      aria-haspopup="true">Benutzername </span>&nbsp; <span
      tabindex="0"
      role="menuitem"
      aria-haspopup="true">Lokation</span> &nbsp; <span
      tabindex="0"
      role="menuitem"
      lang="en">Support</span> &nbsp; <span
      tabindex="0"
      role="menuitem">Abmelden</span>
  </div>
</body>
</html>
-----Code end-----

I have put tabindex=0 everywhere to make it easy for testing without any Javascript. Both JAWS and NVDA don’t speak the name of the Menu.
Thanks in advance.

Ciao     Mario

Von: ALAN SMITH [mailto:alands289@gmail.com<mailto:alands289@gmail.com>]
Gesendet: Dienstag, 14. Juni 2016 14:23
An: Batusic, Mario <mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Betreff: RE: Names for ARIA menu and menubar

Mario,

We would have to look at the specific code as there are so many variables.

Here are some things to remember when using aria labeling techniques..

Aria-label overrides or takes precedence over other labels or span text used for labels.
Aria-labelledby overrides or takes precedence over aria-label.

So you may be seeing some of this behavior with your menus.

Please send out a code snippet for review.

Regards

Alan

Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows 10

From: Batusic, Mario<mailto:mario.batusic@fabasoft.com>
Sent: Tuesday, June 14, 2016 3:40 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Names for ARIA menu and menubar

Dear Colleagues,

I am perplex about Screen Readers treatment of ARIA menu and menubar names applied by aria-label on the corresponding element. Both JAWS and NVDA do not announce the menu name when focussing on menu items. We have in our product, that we implement as a single-page web app at the same time up to 3 menus and it is very important for the user to know in which widget is the item he/she focuses on.

Does somebody know what is the reason the screen readers ignore the menu names? Or is it undisputed a bug? Thanks.

Mario

Mario Batusic
Fabasoft Accessibility
Fabasoft Cloud UI Team

www.fabasoft.com<https://www.fabasoft.com/>

m   +43 664 606162 255
t     +43 732 606162<tel:%2B43%20732%20606162> 255
e    mario.batusic@fabasoft.com<mailto:mario.batusic@fabasoft.com>

[Fabasoft    Generalpartner des Europäischen Forums Alpbach 2015]<https://www.fabasoft.com/>

Twitter<https://twitter.com/FabasoftCloud> | Facebook<https://www.facebook.com/FabasoftCloud> | Google+<https://plus.google.com/115324165929447332621> | YouTube<https://www.youtube.com/user/FabasoftCloud>

Fabasoft Cloud GmbH, Honauerstrasse 4,
4020 Linz, Austria  |  Handelsgericht Linz, FN 294084b

Attachments

Received on Wednesday, 15 June 2016 05:49:26 UTC