Description
As you may have seen, most of the forms on the website contain auto suggestion characteristics/features. Let me explain this with simple example. While typing any string in the google search text field, it displays some list of the suggestions dynamically, and this behavior is nothing but auto suggestion behavior. This particular behavior is just not limited to the google search text field but there are many input fields on the web that has these auto suggestion characteristics. Since these auto suggestions are most of the places on the web these days, imagine if these auto suggestions are not accessible to the people with the disabilities. When these auto suggestions are not accessible then it is going to create huge problem to the people with disabilities.
In order to address this problem, ARIA introduces the combobox role. When the combobox role is applied along with required ARIA attributes for the widget that has auto suggestion characteristics then keyboard and screen reader users would get seamless experience. However, it is not that easy to construct accessible auto combobox/auto suggestion widget. Constructing an accessible combobox is one of the trickiest things in the ARIA. The reason is that authors might have to apply multiple ARIA attributes, java script, focus management and so on… at the same time to construct accessible combobox. While applying various techniques at the same time, it is highly possible that authors make mistakes if they are not careful.
That said; let me tell what combobox role is all about with the technical terms. A combobox is a composite widget made up of the combination of two distinct elements: 1) a single-line textbox, and 2) an associated pop-up element for helping users set the value of the textbox. The popup may be a listbox, grid, tree, or dialog.
It is very commonly misunderstood that both ARIA combobox role and HTML select element are one and the same because most of the screen readers interpret both of them as combobox. Although ARIA combobox role and HTML select element are being interpreted as comboboxes by most of the screen reader users, they are not identical but they are similar. The one significant distinct feature between both of them is that ARIA combobox role would contain textbox element whereas HTML select would not contain the textbox element. As per the analysis and my understanding, ARIA listbox role and HTML select are one and the same. In fact, ARIA listbox role contains much more features than HTML select and will discuss more about listbox role in the future blog posts.
Author notes
- Combobox role must contain or must own a text input element with role textbox or searchbox or native input text field and that the text input has aria-multiline set to false.
- Aria-Autocomplete attribute must be set with appropriate
value (inline, list, both, and none) on the textbox element based on the nature
of the suggestion and how those suggestions are presented. Elements that
support aria-autocomplete have an implicit aria-autocomplete value of none and the
below is the brief description of each aria-autocomplete value. We will discuss
about this attribute in details in the future blog posts.
- While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If text input gets auto filled with the first suggestion from the list of the suggestions then set aria-autocomplete=”inline”
- While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If user has to select suggestion manually from the list of the suggestion then set aria-autocomplete=List”
- While user is typing some string on the text input, it displays the corresponding suggestions in the popup element. If text input gets auto filled with the first suggestion from the list of the suggestions and suggested string can be selectable then set aria-autocomplete=”both”
- While user is typing some string on the text input, it displays the same set of the suggestions in the popup element irrespective of the string that user has typed. If these type of behavior is present then set aria-autocomplete=”none”
- Authors must ensure that that only textbox is visible when the combobox is in the collapsed state and Elements with the role combobox have an implicit aria-expanded value of false
- Authors must set the value of aria-expanded as true when textbox and secondary element that serves as its popup are visible.
- Authors MUST ensure it contains or owns an element that has a role of listbox, tree, grid, or dialog when combobox is expanded.
- Authors MUST set aria-controls on the textbox element to a value that refers to the combobox popup element.
- Authors must set the value of aria-has popup based on the type of popup element as combobox popup element can be grid, tree, dialog, listbox and Elements with the role combobox have an implicit aria-has popup value of listbox.
- Authors may set aria-activedescendant on the textbox element if the popup element supports aria-activedescendant and the value of aria-activedescendant must refer to the active element that is in the popup while DOM focus remains on the textbox element. It is important to remember that whenever aria-activedescendant attribute is being set on the textbox element then literal DOM focus does not need to move to the elements contained in the popup to navigate within the popup elements and the DOM focus can remain on the textbox element. There is much more to understand about aria-activedescendant attribute and will discuss in details about this attribute in the future blog posts
- Authors may set aria-owns attribute on the combobox element if DOM hierarchy cannot be used to represent the relationship and the value of aria-owns must refer to the popup element
Code snippet
<div aria-label=”Tag” role=”combobox” aria-expanded=”true” aria-owns=”owned_listbox” aria-has popup=”listbox”>
<input type=”text” aria-autocomplete=”list” aria-controls=”owned_listbox” aria-activedescendant=”selected_option”>
</div>
<ul role=”listbox” id=”owned_listbox”>
<li role=”option”>Zebra</li>
<li role=”option” id=”selected_option”>Zoom</li>
</ul>
Complimentary info on the combobox role
The combobox role and aria-owns attribute must be set on the textbox element as per the ARIA 1.0 whereas the same combobox role and aria-owns attribute must be set on the container that is the parent of the textbox element as per the ARIA 1.1. To know more about how to set the combobox role and aria-owns in the ARIA 1.1, please look at the code snippet section of this post. Although ARIA 1.0 is obsolete, user agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional.
References
- ARIA 1.1: combobox role
- WAI ARIA 1.1 authoring practices: combobox with listbox popup example
- WAI ARIA 1.1 authoring practices: combobox with grid popup example
- ARIA 1.0 Combobox with Both List and Inline Autocomplete example
- ARIA 1.0 Combobox with List Autocomplete example
- ARIA 1.0 Combobox Without Autocomplete example