Comboboxes

What Are Comboboxes?

Comboboxes are user interface elements that provide a selectable list of options and an editable input field. They are also known as "combo boxes" or "dropdown lists." Developers widely use Comboboxes in software applications, websites, and forms to allow users to select a single item from a predefined list or enter custom text if the desired option is unavailable.

Advice for Accessible Comboboxes

Here are three accessibility considerations that you should make when taking Comboboxes into account:

1. Keyboard Accessibility: Comboboxes should be operable using the keyboard alone. The list of options should allow users to navigate using arrow keys and visually highlight the currently focused item to indicate its selection state.
2. Screen Reader Compatibility: Comboboxes must be compatible with screen readers. When a screen reader user interacts with the Combobox, it should announce the available options, the currently selected option, and any relevant changes made to the input field.
3. ARIA (Accessible Rich Internet Applications) Support: ARIA attributes, such as aria-expanded, aria-owns, aria-controls, and aria-activedescendant, can be used to enhance the accessibility of Comboboxes, making their behaviour and relationships with other elements more understandable to assistive technologies.

Autocomplete via Combobox

The autocomplete function can significantly impact the accessibility of Comboboxes. When appropriately implemented, it can enhance the user experience for everyone, including individuals with impairments. However, it introduces specific considerations to ensure the feature is usable and accessible. The following are three positive impacts that having autocomplete system inside of Comboboxes would introduce:

1. Efficiency: Autocomplete can speed up finding and selecting options, making interactions more efficient for all users.
2. Reduced Typing: Users with motor impairments or limited dexterity can benefit by selecting options from a list instead of typing out entire entries.
3. Error Prevention: Autocomplete can help prevent spelling errors or selecting non-existent options, which can be particularly helpful for users with cognitive or visual impairments.

Button Activiated Comboxes

Button-activated Comboboxes, also known as dropdown button Comboboxes or split-button Comboboxes, have a button or a clickable element that, when activated, opens the dropdown containing a list of options. This design can impact the accessibility of Comboboxes, both positively and negatively. Here's how button-activated Cmboboxes affect combobox accessibility:

Positive Impacts:

1. Clear Interaction: The button provides a clear and distinct element for users to activate the dropdown, making the interaction more straightforward and intuitive.
2. Reduced Clutter: By separating the activation control (button) from the input field, the interface can be less cluttered, benefiting users who might find a cluttered interface overwhelming.
3. Enhanced Target Area: The button serves as a larger target area for activating the dropdown, which can be particularly beneficial for users with motor impairments or touch devices.

Tools Required, How to Test and Other Important Information

Tools Required to Test Comboboxes

• Keyboard
• Screen Reader
• Web Development Extension
• Accessibility Evaluation Tool

How to Test Comboboxes

1. Open the Webpage to be tested
2. Check if the Combobox has an associated label that describes its purpose. Ensure there are clear instructions for opening the dropdown, selecting an option, and closing the dropdown.
3. Verify that the Combobox receives focus when tabbed into and that there is a clear visual indicator around the focused element. Ensure the focus isn't confined to within the Combobox, allowing users to navigate easily between other elements.
4. Test the Combobox using only the keyboard. Ensure users can navigate through the options using arrow keys, select an option using the Enter key, and close the dropdown using Esc or Enter (if applicable).
5. Use the screen reader to interact with the Combobox. Listen for announcements about the Combobox, its label, available options, and the selected option.
6. Use the Accessibility Evaluation Tool to scan the web page and identify any potential access issues with the Combobox and the page in general

Potential Accessibility Issues of Comboboxes

• have the focus trapped within it or have no focus at all
• not be fully keyboard accessible
• not be accessible to screen reader users

WCAG 2.1/2 Guidelines for Comboboxes

• 1.3.1 Info and Relationships (Level A)
• 1.3.2 Meaningful Sequence (Level A)
• 1.4.1 Use of Color (Level A)
• 2.1.1 Keyboard (Level A)
• 2.4.3 Focus Order (Level A)
• 3.3.1 Error Identification (Level A)
• 3.3.2 Labels or Instructions (Level A)
• 4.1.2 Name, Role, Value (Level A)

Further Reading

• The Mozilla Web Documents site has an article on how to make Comboboxes accessible.
• Digitala11y has an article on the WAI-ARIA role of ‘Combobox'.