Accessibility: Interactive elements

[cjcenizal]

Problem

Interactive elements must be able to receive focus

E.g., <div>, <p>, or <a> without the href attribute can't receive focus. The best way to resolve this issue is to change the element to something that is natively keyboard accessible (<a href=…>, <input type="button">, or <button>). Ensure links and buttons are used correctly (link should be used when navigating and a button should be used when performing an action on the page).

If this technique is not possible, there is a workaround that provides similar functionality. Do the following:

• The div (or other element) should be given tabindex="0" so that it can receive keyboard focus.
• The JavaScript onkeyup event handler should be used to trigger element functionality if the Enter key is pressed while the element is focused. This is necessary because some browsers do not trigger onclick events for such elements when activated via the keyboard.
• If the item is meant to function as a button, the onkeyup event handler should also detect the Spacebar in addition to the Enter key, and the element should be given role="button". (Note: a true button is preferred).

Audit

Search for <a, <button, and ng-click, and .on('click' to find trouble spots.

[timroes]

This should be done by now. If there are any places left this isn't done we should open a separate issue for that specific place, UI component, etc.