CODEWITHSUNDEEP
javascripthtmlaccessibilitywcagwcag2.0
JanuszFrontEnd'u
JanuszFrontEnd'u

Reputation: 471

Accessibility for custom dropdown button

Hi I need add keyboard navigation and accessibility to my custom dropdown button. Do you have any ideas? I thought about using aria?

<div class="dropdown-select">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button class="dropdown-select--btn"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list">
    <li>
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li>
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 6160

Answers (3)

Adam
Adam

Reputation: 18807

The Mozilla Foundation has described a technique for custom listbox elements: Using the listbox role which implies multiple considerations :

  • giving the listbox role to the element
  • giving the option role on the different choices
  • managing focus of the different elements for keyboard accessibility
  • using aria-activedescendant for current focused element
  • using aria-selected for current selected element

WCAG has full working examples in the page Listbox examples but this page is still under development.

Upvotes: 2

Josh
Josh

Reputation: 4322

Here's how I would approach this:

<div class="dropdown-select" role="menubar">
  <input type="hidden" name="select_offer" class="dropdown-select--value" />
  <button id="custom-dropdown" class="dropdown-select--btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem ipsum
    <span class="sr-only">(rozwiń listę)</span>
  </button>
  <ul class="opl-dropdown-select--list" aria-label="submenu" role="menu" aria-labelledby="custom-dropdown">
    <li role="menuitem">
      <a href="#" data-option="value1">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value2">Lorem ipsum</a>
    </li>
    <li role="menuitem">
      <a href="#" data-option="value3">Lorem ipsum</a>
    </li>
  </ul>
</div>

The use of the aria-expanded attribute is really ideal, but if used, it would need to correctly display a value of true/false respectively as the element is expanded and collapsed.

Upvotes: 0

amdg
amdg

Reputation: 2239

Setting a focus on div will be a problem. tabindex is not a valid attribute which can be applied to divs in HTML < 5.

It must have some element link a, textarea, button, input, object, select.

So, we implemented in a way similar to

fiddle in this question

We put the text box inside a div

Upvotes: 0

Related Questions