ARIA for Elements Without Focus

Question

I'm struggling to enable proper ARIA support for this case. I have a input field which works like a filter, and a set of elements which will be filtered by this input field. The focus is always on the input field, and with arrow up and down you can navigate through the result set. The input needs constant focus because whenever I start typing again, the input should be updated and filter the result set.

Now I want that my screen reader reads the name of the elements when I navigate through the result set. But if I press arrow down (or up) the reader repeats the full part of the input field.

Hint: The result set contains images and text and will open the element in a new view when it is clicked.

<input ng-change="$ctrl.doFilter()" ng-keydown="$ctrl.handleKeydown($event)">    

<div class="filter-results" role="list">
  <div ng-repeat="item in $ctrl.results track by $index"
      ng-class="($index == $ctrl.selectedItem ? 'item-selected' : '')"
      ng-click="$ctrl.navigateToSelected()"
      ng-mouseover="$ctrl.selectItem($index)"
      role="listitem"
    <div ng-bind-html="$ctrl.displayName(item)"></div>
  </div>
</div>

(shortened example)

HandleKeypress just sets the id of selected item, which will be highlighted by using the proper class.

Is there any solution that screen readers read the name (displayName) of the selected item?

score 0 · Answer 1 · answered Nov 20 '18 at 02:09

One way to do it, and I'm not advocating this is the best way, but it seems to work, is to have an onkeydown handler for your input field (which you may already have) and when the up/down arrow key is pressed (which it sounds like you're already listening for), you can update a visually hidden <span> (or <div>) that has aria-live set to "polite" and update the text within that <span> with the text of your result item. I think the screen reader will still read the contents of your input field but it should also read the aria-live text too. Maybe not the ideal solution, but you'll get your result item announced.

Some (very) rough code:

<span id="result" aria-live="polite" class="sr-only"></span>

<script>
function mykeydown(e) {
  if (e.keyCode == 40)
    document.getElementById("result").innerHTML = "whatever is the next result";
}
</script>

Note: You can see the "sr-only" class here - What is sr-only in Bootstrap 3?

ARIA for Elements Without Focus

1 Answers1