Resolve accessibility issues in datalist

[joppekroon]

Description

The datalist element is highly interesting, but due to the accessibility issues can not be relied upon to work.

MDN mentions three issues:

1. No support for Zoom.
2. No support for high contrast mode.
3. No announcement for content by some screen readers.

Rationale

Resolving these issues could lift the datalist to be a viable replacement to overengineered select/combo box solutions.

In my limited testing it looks like issue 3 has been fixed. Issue 2 seems to be fixed as well, on Windows the datalist listens to HCM although improved styling support in general would be appreciated of course.
But issue 1, reacting to zoom, is still a problem.

Investigation Roadmap

No response

[cookiecrook]

Are there any tests written for these? The proposal is more likely to be accepted if there are tests, or at least a documented testing strategy and roadmap to get there.

I've got one tracker issue that might cover some or at least a part of your item 3, but I don't have a plan in mind for how to test the others you've proposed.

Feel free to take assignment of this one if you have cycles for it. I can be a resource if needed.

• Write test for accname edge case: datalist sub options interop-accessibility#23

[cookiecrook]

Oh, I see this is an investigation proposal, not a focus area proposal... Seems reasonable for the Interop 2024 Accessibility Investigation.

Please attend the next meeting if you can:

• Meeting: November 7, 2023 interop-accessibility#62

Also of note:

• Accessibility Testing Investigation Area Report #459

[jensimmons]

Is this proposal for an investigation to create more tests / figure out how to test these things?

Or is it to clarify specifications and make them stronger?

[joppekroon]

@jensimmons I do not know how to qualify this unfortunately. My goal with submitting this issue is that the accessibility issues with this component are resolved across the board, so that it can be used confidently.

At this point the issues mentioned on MDN are severe enough that the component is a non-starter for anyone that cares about accessibility.

I do not know what is necessary for the interop process to be able to work on this, I hope the people on the inside can guide this.

[joppekroon]

The article Underengineered Comboboxen by Adrian Roselli seems to have a good list of the issues with datalist currently. As far as I can confirm myself, these issues are up to date, moreso than the list of issues on MDN.

Additionally:
I find it interesting that the <option> behaves differently in the datalist context than in the <select> context with respect to the "value" attribute and it's content. Falling back to the "value" attribute is a nice touch. However, in Chrome and Edge the value attribute is prioritised over the option content, and that feels like a bug, and one that I think definitely hampers adoption.

Both MDN and Adrian mention the lack of adaptation to zoom, which is of course less than ideal. But in addition to that, I found that the text size can't be influenced in any way. Not by CSS (as expected), but not by browser font-size preferences either. I believe that leaves low-vision users without any options (pun not intended).

[bkardell]

My colleague joanie (also maintainer for Orca) is on holidays at the moment but mentioned that she knows that the situation in Chromium is: the data list popup is browser UI and does not descend from (and may lack an accessible connection/relation to) the element it is associated with. I guess a big part of the question here might be how much of the work needs to be done in the user agents vs the ATs... Surely it is both, as Adrian's post indicates too. (not tagging her here as she is on holidays :))

[zcorpan]

Thank you for proposing Resolve accessibility issues in datalist for inclusion in Interop 2024.

We are pleased to let you know that this proposal was accepted as part of the Accessibility Testing investigation. You can follow the progress of this focus area on the Interop 2024 dashboard.

For an overview of our process, see the proposal selection. Thank you for contributing to Interop 2024!

Posted on behalf of the Interop team.