2.2 Dropdown items announced as not selected on receiving focus (Medium)

2.2.1 WCAG 1.3.1 (A), 4.1.2 (A) - Windows

On the Add Benefit Details page, users are presented with the option to select the benefit type, which they can select from a drop down menu. However, screen reader announcements of this element can be misleading, as each item is announced as being unselected even on receiving focus.

Interacting with the input field by typing in three letters causes the drop-down menu to appear. This is announced to users through the use of the the autocomplete attribute. However, when using the directional arrows keys to pick an option, screen readers announce it as “not selected”. For instance, the second option is announced as “Child Maintenance, not selected, 2 of 6” even when the option is receiving focus. This can be confusing for users since they would not know how exactly to select an option. Since every option is announced as “not selected”, users might believe that the component isn’t functional.

This particular issue occurs only on Windows devices and works as expected on a Mac. However, this component is problematic on mobile devices as well, as captured in Dropdown menu not accessible with swipe gestures on mobile (Positive).

FIGURE 2.2: Dropdown options on Add Benefit Details page with NVDA speech viewer activated

2.2.2 Code Snippet

<ul id="1-type-suggestions" role="listbox">
  <li role="option" tabindex="-1" aria-selected="false"> 
    Child Maintenance 
  </li>
    ...
</ul>

2.2.3 Recommendation

The aria-selected attribute should be updated to reflect the user’s selection. On receiving focus, the value should be updated to aria-selected="true".

However, we highly recommend using the native HTML <select> element for drop-down menus. These are designed to work efficiently across different devices and platforms. Listboxes can cause issues on certain platforms since browsers do not completely support their functionality with assistive technology, as outlined in Dropdown menu not accessible with swipe gestures on mobile (Positive).

2.2.4 Post-discussion Update

On better understanding of the functionality of the component, we believe that the best solution would be to update the existing code to conform to HTML specification while maintaining the desired functionality. This can be implemented as an editable combobox with an autocomplete feature.

This would involve updating the code as per the recommendations highlighted in Dropdown menu not accessible with swipe gestures on mobile (Positive)and the linked resource. Remove the aria-selected="false" attribute since it can be confusing for screen reader users.

The combobox would ensure a visually and programmatically accessible experience. When users type in the text field, the list of suggestions is expanded–screen reader users are also informed of this. They can then navigate to each field using their directional arrows, and this will be announced as “Child Benefit 1 of 6” when the first item receives focus, “Child Maintenance 2 0f 6” when the second item receives focus and so on.

Thus, all users would be able to interact with and understand the purpose of the element. Screen reader users would be able to identify the role of the element and would know how to interact with the list to make a selection. The announcements would be informative yet succinct.

---