Announcing state with aria-expanded

user_3741713 0
Viewed 940

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?

nvda voiceover wai-aria screen-readers accessibility
1 Answers

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"!).

user_27028940
Related