Search code examples
accessibilitywai-aria

What should aria-activedescendant be if there is no appropriate element?

The documentation I can find on aria-activedescendant (link 1, link 2) explains that it may be used to reference the currently-selected option in my synthetic combo box control. However, under some circumstances there is no ID it can sensibly be given; for example:

  • The user is not using the control right now
  • The minimum number of characters has not been entered
  • The user has entered a long search string that doesn't match any options, so there are no suggestions

What should the value of aria-activedescendant be in this case?

  • It should be some special placeholder value
  • It should be the empty string
  • The attribute should be absent entirely (I hope it's not this, because this would be a pain in the ass to special-case in Razor syntax)
Solution

  • It seems that the specification is not very explicit on this.

    Authors MUST ensure […] when setting the value of aria-activedescendant on an element with DOM focus:

    1. The value of aria-activedescendant refers to an owned element.

    This gives you the liberty to set the attribute to anything else, while the combobox is not focused.

    For some practical guidance, you can also check the Select-Only Combobox Example on the ARIA Authoring Practices Guide (APG).

    It provides an example that uses aria-activedescendant, and they mention:

    If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via aria-activedescendant.

    With the listbox invisible, they set aria-activedescendant="" to the empty string.

    In their example, they additionally mark the selected option with aria-selected, because focus navigation is independent of the selection. You need to press another key (Space or Enter) to select the active descendant.

    This is explained in Focus VS Selection and the Perception of Dual Focus

    It is possible to combine focus and selection, for which the ARIA standard allows user agents to apply an implicit aria-selected for the option referred to by aria-activedescendant.

    In any case, the selected option and focus need to be visible.

    Since you posted some sources, it might be appropriate to warn you of some pretty important shortcomings of the example code in link 2:

    1. The input has no label
    2. It has no value
    3. aria-expanded needs to be used on the controlling element, i.e. the <input role="combobox">, and not on the listbox
    4. It falls short of providing information that would allow for CSS rules to make the focus visible

    It’s also weird that aria-autocomplete="list" is set, while the input is readonly, and therefore cannot provide any auto completion.

    So here is a corrected version:

    <label>Combobox
  <input type="text" aria-activedescendant="cb1-opt6" aria-readonly="true" aria-owns="cb1-list" aria-autocomplete="list" role="combobox" id="cb1-edit" value="California">
</label>

<ul role="listbox" id="cb1-list">
  <li role="option" id="cb1-opt1">Alabama</li>
  <li role="option" id="cb1-opt2">Alaska</li>
  <li role="option" id="cb1-opt3">American Samoa</li>
  <li role="option" id="cb1-opt4">Arizona</li>
  <li role="option" id="cb1-opt5">Arkansas</li>
  <li role="option" id="cb1-opt6" class="active">California</li>
  <li role="option" id="cb1-opt7">Colorado</li>
</ul>