Re: Custom control and accessibility

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>:

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