2

I made an accessible select component, following the ARIA guidelines. It is a combobox and uses aria-expanded as prescribed to announce the state of the dropdown. It works fine when the user first tabs into the component: screen readers announce the state (I tested VoiceOver/Safari and NVDA/Chrome). But on open, focus moves to an option and, since the combobox is not is focus, state is not announced. I notice the same behavior on w3.org's own example Is this expected behavior or should it be remediated? If so, how can it be done?

mrtnmgs
  • 1,402
  • 14
  • 26
  • Can you try the following ? Instead of immediately focusing an option on expanding the combobox, delay it for a short delay (50, 100 or 200ms). Maybe this will leave enough time for the screen reader to announce expanded state before the selected option. Tell me. IF it works, I'll post an actual answer. – QuentinC May 06 '21 at 15:08
  • Thanks @QuentinC. If I add a delay, VoiceOver starts announcing the button state and interrupts mid-sentence to read the option. I'm not too interested in a workaround, I'd like to understand whether this behavior constitutes an actual accessibility issue and whether my implementation is correct... – mrtnmgs May 06 '21 at 16:08

1 Answers1

1

With the pattern you are using this is expected behaviour from the small bit of functionality you described.

One thing to check though is that if I type an option that doesn't match, does it then switch state back to aria-expanded="false"?

Also if you tab out of the control after writing a partial match and then tab back into it does it automatically expand the list to include matches and add aria-expanded="true"?

If so then you have implemented it correctly as the expected behaviour is:

  • first time visit combobox with nothing entered collapsed is spoken.
  • start entering items and it selects relevant ones, no announcement of state.
  • leave the combobox without completing a selection.
  • re-enter the combobox, the list should appear if you have typed a valid option or part of a valid option and you should hear expanded.
  • alternatively re-enter the combobox, the list should not appear as you have typed a string of characters that have no matches in the list, you should hear collapsed.

That is why then aria-expanded is needed on a combobox, it is for when you re-enter it so you know the state (or if the combobox is pre-populated it should auto expand then as well with aria-expanded="true"!).

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64