[RFC] Dropdown accessibility issue in screen readers

[elenadotedu]

Bug Report

Steps

1. Open a page that contains a dropdown (with some text, call it Dropdown Text) in Chrome while having NVDA screen reader on.
2. Screen reader will read "Alert: Dropdown Text"

Expected Result

1. When page first loaded, no alert is read out.
2. But when dropdown value changes, the reader speaks the value selected.

Actual Result

When page first loads, NVDA reads "Alert: Dropdown Text". If multiple dropdowns are present, it reads text values for some of them.

Version

0.79.0

Testcase

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[levithomason]

Accessibility is a very large and involved task. I am in full support of making accessibility improvements.

I'd like to formulate a way of doing this framework-wide. Over on https://github.com/stardust-ui/react (a fork of Semantic UI React), we have full-time accessibility teams and a contractor providing testing and feedback. I think we should piggyback off of that work and implement those features here in Semantic UI React as they become available.

In the meantime, we will accept PRs with accessibility fixes provided that we have some way of validating that the fixes are acceptable both by W3C standards and the accessible user community.

[levithomason]

I've labeled this issue for more community feedback as well.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[BritneyS]

Please keep this thread active! Accessibility is becoming more and more vital to web development 😄

[kscoulter]

Has there been any movement on this?

[foxbunny]

some way of validating

NVDA is free of charge.

Also, there's good reason to not include alerts and live regions in anything that isn't an explicit notification. These are generally not meant for interactive elements of the page, and result in wonky behavior when used for such elements.

• "The alert role should only be used for text content, not interactive elements such as links or buttons." (MDN)
• "Simple content changes which are not interactive should be marked as live regions." (MDN, emphasis mine)

[ptamarit]

In case it might help understand why this was added in the first place, here is the pull request where this was introduced:
#1836

Does anyone know if removing the attributes aria-atomic aria-live='polite' role='alert' from the dropdown div would make the dropdown accessible (or at least not make things worst)?

[foxbunny]

It will certainly not make it less accessible. What the role does is it instructs the screen reader to immediately announce whatever has the role. In fact, aria-live='polite' is redundant and in conflict, and the role='alert' takes precedence. Since these are unnecessary to begin with, aria-atomic can also go.

If you would like to see a working implementation of accessible comboboxes, you can see examples on WAI website. (The page has several more examples depending on the scenario).

The tl;dr is that:

1. The candidate list is never focused directly with the keyboard (so no focusable elements there)
2. The input must have role="combobox"
3. The input must have aria-haspopup="true"
4. The list must have role="listbox"
5. The input must point to the listbox using aria-controls="{listbox id}"
6. The list items must have role="option"
7. Focusing the options via keyboard is expected to be done with up and down arrow keys while the input is focused. When you mark something as a combobox via the ARIA role, some screen readers will announce that you can use it using the arrow keys, so you must implement that.
8. When an item is focused, you need to add aria-activedescendant="{item id}" to the input.
9. When the listbox is expanded (shown), the input should have aria-expanded="true"
10. Items that are currently selected should have aria-selected="true".

WAI provides a full working example of this, but I recommend using a screen reader while testing it so that you can hear what the difference is.

[foxbunny]

FYI: The dropdown is generally inaccessible in the current state. We have users with reduced abilities complaining about not being able to complete a form because they are unable to hear the options, nor get an idea of how to operate the drop-down list. So beyond this issue right now, it really should be revisited more thoroughly (e.g., by adopting some of the designs from the WAI examples).