Skip to content

Latest commit

 

History

History
64 lines (44 loc) · 2.53 KB

HAAC_Combobox_Autocomplete.mdx

File metadata and controls

64 lines (44 loc) · 2.53 KB
title
Accessibility Checker Rule Help: HAAC_Combobox_Autocomplete

import "../../../styles/ToolHelp.scss" import { CodeSnippet, Tag } from "carbon-components-react";

The combobox has the aria-autocomplete attribute set on an element that isn't a text input

A combobox that supports autocompletion behavior must have the aria-autocomplete attribute only on its text input element

Why is this important?

A combobox is a UI interactive component that combines an input and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. Only the text entry element can have the aria-autocomplete attribute, otherwise assistive technologies may be unable to understand and present the component's autocomplete functionality effectively.

What to do

  • Remove the aria-autocomplete attribute from combobox elements that are not text input elements;
  • AND, if autocomplete behavior is desired, verify that the text input element of the combobox has the aria-autocomplete attribute.

For example:

<label for="tag_combo">Tag</label> <input type="text" id="tag_combo" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="true" aria-controls="popup_listbox" aria-activedescendant="selected_option"> <ul role="listbox" id="popup_listbox"> <li role="option">Zebra</li> <li role="option" id="selected_option">Zoom</li> </ul>

Note, example code includes material copied from or derived from W3C, ARIA 1.1 Authoring practices. Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).

About this requirement

IBM 4.1.2 Name, Role, Value WAI-ARIA v1.2 Authoring Practices - Combobox

Who does this affect?

  • Blind people using screen readers
  • People with low vision using screen readers

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)