Re: Custom control and accessibility

Hi Ginger,
By TabBar, do you mean a list of tabs that each give you access to content on tab panels?

Are you using JAWS to access the tabs? We just found a bug in JAWS, where Jaws does not read out the name of the tab. We hope Freedom Scientific fixes that issue soon. In VoiceOver on MacOS when I move tabs, I hear “Overview, selected tab, 1 of 3” and "Visual, elected tab, 2 of 3”. I don’t think we are using ARIA Live regions for this because we using native HTML and ARI to communicate the tabs.

Regardless, we have a tabbed Preferences Menu in many of our sims where one uses the arrow keys to navigate between tabs. The Preferences Menu is a dialog that has tabs and tab panels. The pattern that we use was adapted from a pattern created by Heydon Pickering <https://inclusive-components.design/tabbed-interfaces/>.

Aside from the recent JAWS bug this pattern has worked really well for us.

You can find an example of our Preferences Menu in several sims on our website. I’ll share a link to Friction <https://phet.colorado.edu/sims/html/friction/latest/friction_en.html> since it was just published with the latest Preferences Menu. Friction is screen reader accessible on laptop and desktop platforms (NOT on iOS due to a known issue ARIA Application role). If you want to experience the sim on a touch device you can turn on the Voicing feature via the Preferences Menu, and turn off your screen reader. The Voicing feature is our latest inclusive feature. It provides a customizable interactive described experience without the need for screen reader software.

Ooops, I just meant to share about the Preferences Menu! But I am so excited about the latest version of Friction <https://phet.colorado.edu/sims/html/friction/latest/friction_en.html>.

Enjoy!
Taliesin 

~.~.~.~.~.~.~.~.~.~.~.~.~.~.~
Taliesin Smith
talilief@gmail.com 
taliesin.smith@colorado.edu 

Inclusive Design Research Specialist
PhET Interactive Simulations
http://phet.colorado.edu/
Department of Physics
University of Colorado, Boulder




> On Feb 16, 2023, at 11:18 AM, Ginger Claassen <ginger.claassen@gmx.de> wrote:
> 
> 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
> 
>