Re: Custom control and accessibility

I would avoid using aria-haspopup on anything except a menu button because although it is semantically correct it means that the button will be announced by JAWS as a “menu” and by NVDA as a “sub menu”, regardless of the value of aria-haspopup – “true”, “dialog”, or “listbox”.

Mark

From: Marc Haunschild <haunschild@mhis.onmicrosoft.de>

Hi Ginger,

I’m not sure, if I understand, what your UI element looks like, but if I have to make a guess, you might be looking for aria-haspopup (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) and aria-expanded (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)?!

Marc




Am 16.02.2023 um 17:18 schrieb Ginger Claassen <ginger.claassen@gmx.de<mailto:ginger.claassen@gmx.de>>:

Hello folks,


I have an issue with a custom control where I do not yet know how to
make that accessible beside using an aria-live-message.


The component is currently implemented as a TabBar with expandable
buttons. However, using arrow-keys does not work and is not supposed to
work for keyboard users because as a sighted person you can use the
arrow-keys to go through the TabBar and see what elements are in the bar
(there are quite a lot and it should also work on small screens). When
moving the arrow-keys the bar scrolls but the first element still keeps
the focus. When selecting an item contents below the component is updated.

Therefore my idea is to use an aria-live-message to announce to screen
reader users that, when expanding a button, the contents below has been
updated.

In case anyone has a better idea I would be delighted to read about it :-)


Solong


   Ginger