Search code examples
comboboxaccessibility

Does a combobox require a child element with the role of textbox?

I've got a combobox that is triggering an accessibility error from the Accessibility for Insights tool (https://accessibilityinsights.io/en/downloads/). The combobox can be seen in the mobile phone field with the country flag selector here - https://configure.awardsplatform.com

This is the error message I get from Accessibility for Insights:

Image of error message

Wai-aria 1.1 guidelines say the textbox is necessary - https://www.w3.org/TR/wai-aria-1.1/#combobox

However, I'm confused because Wai-aria 1.2 guidelines (still in development apparently) don't have it as a requirement - https://www.w3.org/TR/wai-aria-1.2/#combobox

And this example combobox also doesn't include the textbox - https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html

There's conflicting information here so I'm unsure whether it's required or not. Does anyone know?

Solution

  • Short Answer to "Does a combobox require a child element with the role of textbox?"

    Under current (aria-1.1) standards: yes.

    Longer Answer

    The standards will change soon(ish), you are looking at future guidance that has not yet been finalised. Under current guidance your country selection is using the incorrect role.

    Why are you getting an error?

    We are still working with aria-1.1 standards.

    The definition of a combobox in the aria 1.1 standards is:

    A composite widget containing a single-line textbox and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the textbox.

    As for the example combobox you gave, you may have been looking at an example intended for aria-1.2 (although I still don't believe it would be valid then as it should still set the value of some kind of input, but we will see when everything gets officially released as I think the 1.2 definition of an "input" still needs to be better defined)

    For now a combobox is an <input> (or equivalent) with a related list that can be used to set the value of the <input>. A key feature is that you should still be able to manually enter a value.

    What should you use instead?

    For your example a <select> (or equivalent such as role="listbox") would be far more appropriate as a user cannot manually enter a country.

    Even when new guidance comes out a listbox will probably still be a better choice from the definition currently in place.