6

aria-haspopup and screen readers

 1 year ago
source link: https://www.matuzo.at/blog/2023/aria-haspopup/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

aria-haspopup and screen readers

posted on August 17., 2023

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button.

Summary

The situation isn't too bad because all screen readers and browsers, except Narrator in Firefox and Chrome, at least support the attribute. Talback and NVDA don't support the grid, listbox, and tree values. NVDA also doesn't support dialog. Other than that, it works great.

I noticed some interesting details:

  • VoiceOver with Safari doesn't announce the aria-expanded attribute in combination with aria-haspopup on macOS and iOs.
  • VoiceOver on MacOS with Firefox announces aria-haspopup="true" differently than aria-haspopup="menu": Settings, menu button, group for true and Settings, menu pop-up, button for menu.
  • Talkback with Chrome doesn't support grid, listbox, and tree.
  • Jaws adds specific instructions for true and menu: “Press Space to activate the menu. Then navigate with arrow keys”, and for listbox, tree, and grid: “To activate press Enter”.
  • Jaws doesn't announce the aria-expanded attribute initially in all three browsers, but it does announce it on activation.
  • NVDA doesn't support dialogue, grid, listbox, and tree.
  • NVDA with Firefox announces aria-haspopup="true" differently than aria-haspopup="menu": Settings, menu button, subMenu for true and Settings, button, subMenu for menu.
  • NVDA with Chrome/Edge announces aria-haspopup="dialog" differently than aria-haspopup="grid|tree|listbox": Settings, button, subMenu (dialog) and Settings, menu button, subMenu (grid|tree|listbox).
  • Narrator announces “collapsed” on aria-haspopup="true|menu" even when aria-expanded isn't present.
  • Narrator with Firefox doesn't supprt the attribute.
  • Narrator with Chrome announces “menu item” instead of “menu button“, except for aria-haspopup="dialog" where it's just “button”.

Software/OS/browser

I tested using the Tab key only and I've used this CodePen.

  • VoiceOver iOS 15.7.7 with Safari
  • Talkback Android 13 with Chrome 116
  • VoiceOver macOS 13.4.1 with Safari 16.5.2
  • VoiceOver macOS 13.4.1 with Firefox 116
  • VoiceOver macOS 13.4.1 with Chrome 116
  • JAWS 2023.2307.37 with Edge 116, Chrome 116, and Firefox 116
  • NVDA 2023.1 with Firefox 116
  • NVDA 2023.1 with Chrome 116 and Edge 116
  • Narrator Windows 10 with Firefox, Chrome, and Edge 116

form role

VoiceOver (iOs) Talkback Voice Over Safari (macOS) Voice Over Firefox (macOS) Voice Over Chrome (macOS) Jaws NVDA (Firefox) NVDA (Chrome, Edge) Narrator (Edge) Narrator (Firefox) Narrator (Chrome)
aria-haspopup="true" Settings, pop-up button, menu pop-up Settings, menu pop-up button Settings, menu pop-up, button Settings, menu button, group Settings, menu pop-up, button Settings, button, menu Settings, menu button, subMenu Settings, menu button, subMenu Settings, button, collapsed, has pop-up Settings, menu item Settings, menu item
aria-haspopup="menu" Settings, pop-up button, menu pop-up Settings, menu pop-up button Settings, menu pop-up, button Settings, menu pop-up, button Settings, menu pop-up, button Settings, button, menu Settings, button, subMenu Settings, menu button, subMenu Settings, button, collapsed, has pop-up Settings, button Settings, menu item
aria-haspopup="menu"
+ aria-expanded="false"		 Settings, pop-up button, menu pop-up Collapsed, Settings, menu pop-up button Settings, menu pop-up, button Settings, menu pop-up collapsed, button Settings, menu pop-up collapsed, button Settings, button, menu Settings, button collapsed, subMenu Settings, menu button collapsed, subMenu Settings, button, collapsed, has pop-up Settings, button, collapsed Settings, menu item, collapsed
aria-haspopup="dialog" Settings, pop-up button, dialogue pop-up Settings, dialogue pop-up button Settings, dialogue pop-up, button Settings, dialogue pop-up, button Settings, dialogue pop-up, button Settings, button has pop-up dialogue Settings, button, subMenu Settings, button, subMenu Settings, button, has pop-up Settings, button Settings, button
aria-haspopup="grid" Settings, pop-up button, grid pop-up Settings, pop-up button Settings, grid pop-up, button Settings, grid pop-up, button Settings, grid pop-up, button Settings, button has pop-up grid Settings, button, subMenu Settings, menu button, subMenu Settings, button, has pop-up Settings, button Settings, menu item
aria-haspopup="listbox" Settings, pop-up button, list box pop-up Settings, pop-up button Settings, list box pop-up, button Settings, list box pop-up, button Settings, list box pop-up, button Settings, button has pop-up list box Settings, button, subMenu Settings, menu button, subMenu Settings, button, has pop-up Settings, button Settings, menu item
aria-haspopup="tree" Settings, pop-up button, tree pop-up Settings, pop-up button Settings, tree pop-up, button Settings, tree pop-up, button Settings, tree pop-up, button Settings, button has pop-up tree Settings, button, subMenu Settings, menu button, subMenu Settings, button, has pop-up Settings, button Settings, menu item

aria-haspopup="true"

<button class="toggle" aria-haspopup="true">
    Settings
</button>

aria-haspopup="menu"

<button class="toggle" aria-haspopup="menu">
    Settings
</button>

aria-haspopup="menu" + aria-expanded="false"

<button class="toggle" aria-haspopup="menu" aria-expanded="false">
    Settings
</button>

aria-haspopup="dialog"

<button class="toggle" aria-haspopup="dialog">
    Settings
</button>

aria-haspopup="grid"

<button class="toggle" aria-haspopup="grid">
    Settings
</button>

aria-haspopup="listbox"

<button class="toggle" aria-haspopup="listbox">
    Settings
</button>

aria-haspopup="tree"

<button class="toggle" aria-haspopup="tree">
    Settings
</button>

My blog doesn't support comments yet, but you can reply via e-mail.


report

Recommend

  • 8
    • tink.uk 3 years ago
    • Cache

    How screen readers navigate data tables

    How screen readers navigate data tables28th of September 2020When a table is created using the appropriate HTML elements (or ARIA roles) screen readers can inform users about the characteristics of the table, and use...

  • 9
    • hiddedevries.nl 3 years ago
    • Cache

    ICONS: five questions about screen readers

    ICONS: five questions about screen readers 02 June 2017 ・ category: write-ups Thi...

  • 9
    • tink.uk 3 years ago
    • Cache

    Thoughts on screen readers and image recognition

    The provision of text alternatives has been a first principle of accessibility since before WCAG 1.0 made it official in 1999, but apparently not everyone has got the message. According to the...

  • 4
    • devblogs.microsoft.com 3 years ago
    • Cache

    The Journey to Accessible Apps: Screen Readers

    The Journey to Accessible Apps: Screen Readers ...

  • 6
    • uselessdivs.com 2 years ago
    • Cache

    The effect of CSS on screen readers

    The effect of CSS on screen readers02. September 2021.CSSWe can find a lot of information about how badly written HTML can affect the screen readers, but there is almost nothing about CSS.A few weeks ago I noticed that...

  • 4
    • tink.uk 2 years ago
    • Cache

    How do ARIA landmark roles help screen reader users?

    How do ARIA landmark roles help screen reader users?20 July 2011Code thingsСообщение для российских читателейThis video demonstrates how...

  • 4
    • tink.uk 2 years ago
    • Cache

    Screen Reader Support for ARIA Live Regions

    Сообщение для российских читателейRich Internet Application (RIA) websites encourage people to generate content, collaborate online and make choices about the information they receive. Unsurprisingly, RIA websites can represent a consid...

  • 4
    • tink.uk 2 years ago
    • Cache

    Screen readers, ARIA & HTML5 (too much information)

    Screen readers, ARIA & HTML5 (too much information)12 April 2013Сообщение для российских читателейMost current screen readers support ARIA to one extent or another, a...

  • 4
    • shkspr.mobi 1 year ago
    • Cache

    Unicode Roman Numerals and Screen Readers

    Unicode Roman Numerals and Screen Readers – Terence Eden’s Blog How would you read this sentence out aloud?"In Hamlet, Act Ⅳ, Scene Ⅸ..."Most people with a grasp of the interplay between English and Latin would say "In...

  • 4
    • www.matuzo.at 1 year ago
    • Cache

    the article element and screen readers

    the article element and screen readers posted on July 4., 2023 I wanted to know how and if common screen readers expose the <article> element. Here are my results...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK