Tips & Tricks Thursday 06: Accessible Forms – Drop-Down Fields and Date Pickers

Creating accessible drop-down fields, especially those that are read-only or have additional features like filters, requires careful consideration to ensure all users can interact with them effectively. Here are some tips for both simple and complex cases:

01. Read-Only Drop-Down Fields

For read-only drop-down fields where users need to pick a value from a list:

Use ARIA Roles and Properties:

• Use role="combobox" for the drop-down container.
• Use aria-haspopup="listbox" to indicate that the element opens a listbox.
• Use aria-expanded to indicate whether the listbox is open or closed.
• Use aria-readonly="true" to indicate that the field is read-only.

Keyboard Navigation: Ensure users can navigate the list using the arrow keys and select an option with the Enter key.

Example:

<div role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-readonly="true" aria-labelledby="combobox-label" aria-describedby="combobox-description”>
  <label id="combobox-label">Choose an option:</label>
  <span id="combobox-description">Use the arrow keys to navigate the options and press Enter to select.</span>
  <input type="text" aria-controls="listbox" aria-autocomplete="list" readonly>
  <ul role="listbox" id="listbox">
    <li role="option">Option 1</li>
    <li role="option">Option 2</li>
    <li role="option">Option 3</li>
  </ul>
  <div id="live-region" aria-live="polite" aria-atomic="true"></div>
</div>

02. Date Pickers

For date pickers:

Use ARIA Roles and Properties:

• Use role="combobox" for the input field.
• Use aria-haspopup="dialog" to indicate that the element opens a dialog.
• Use aria-expanded to indicate whether the calendar is open or closed.
• Use aria-readonly="true" if the input field is read-only.

Keyboard Navigation: Ensure users can navigate the calendar using the arrow keys and select date with the Enter key.

Example:

<div role="combobox" aria-haspopup="dialog" aria-expanded="false" aria-labelledby="combobox-label" aria-describedby="combobox-description">
  <label id="combobox-label">Select a date:</label>
  <span id="combobox-description">Use the calendar to pick a date. Use arrow keys to navigate and Enter to select.</span>
  <input type="text" aria-controls="calendar" aria-readonly="true">
  <div role="dialog" id="calendar">
    <!-- Calendar structure here -->
  </div>
  <div id="live-region" aria-live="polite" aria-atomic="true"></div>
</div>

03. Complex Drop-Down with Filter Field

For date pickers:

Use ARIA Roles and Properties:

• Use role="combobox" for the drop-down container.
• Use aria-haspopup="listbox" to indicate that the element opens a listbox.
• Use aria-expanded to indicate whether the listbox is open or closed.
• Use aria-controls to associate the filter input with the list.

Filter Field: Ensure the filter field is focusable and can be navigated to using the keyboard.

Keyboard Navigation: Allow users to type in the filter field to narrow down the list and the keyboard navigation (e.g., arrow keys, Tab) must work across both the filter and list elements.

Example:

<div role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="combobox-label" aria-describedby="combobox-description">
  <label id="combobox-label">Filter options:</label>
  <span id="combobox-description">Type to filter the options. Use arrow keys to navigate and Enter to select.</span>
  <input type="text" aria-controls="listbox" aria-autocomplete="list" placeholder="Filter options...">
  <ul role="listbox" id="listbox">
    <li role="option">Option 1</li>
    <li role="option">Option 2</li>
    <li role="option">Option 3</li>
  </ul>
  <div id="live-region" aria-live="polite" aria-atomic="true"></div>
</div>

04. Additional Tips

Clear Context: Use aria-labelledby="combobox-label" to associate the combobox with its label and aria-describedby="combobox-description" to associate the combobox with additional instructions on how to use it.

Focus Management: Ensure that focus is managed correctly when the drop-down or calendar is opened and closed, i.e. the focus shifts to the dropdown list / calendar when activated and moves back to the field once a selection is made.

Screen Reader Announcements: Use ARIA live regions to announce changes in the list or calendar to screen readers. The aria-atomic="true" attribute ensures that the entire content of the live region is announced when it changes.

Testing: Regularly test your implementation with screen readers and keyboard navigation to ensure accessibility.