HuntExams Academy
HTML/CSSAdvanced#accessibility#aria

How do you make a custom dropdown accessible?

Use appropriate ARIA roles (listbox/combobox), manage keyboard navigation (arrow keys, Enter, Escape), maintain focus management, and use aria-expanded/aria-activedescendant to communicate state to screen readers.

Example
<div role="combobox" aria-expanded="true" aria-owns="list1">
  <input aria-autocomplete="list">
</div>
<ul id="list1" role="listbox">
  <li role="option" id="opt1">Apple</li>
</ul>

Related Questions

1
HTML/CSSAdvanced#accessibility

What is the accessibility tree and how does it relate to the DOM?

Open
2
HTML/CSSBeginner#accessibility#html

How do you ensure images are accessible?

Open
3
HTML/CSSIntermediate#accessibility

What is keyboard accessibility and how do you test for it?

Open