O'Reilly logo
  • Deborah Kaplan thinks this is interesting:

In order to have accessible keyboard elements in the web page the developer needs to use elements which accept the focus: primarily links (<a>) and form controls (<input>, <select>, <textarea> and <button>). Note that it’s also possible to assign tabindex attribute to other elements in the web page to be able to get focus from keyboard. The developer needs to make sure that links, menus and other mouse clickable objects are also accessible through the keyboard.


It's a ways down in the chapter, but this is where the practical information begins. It's not very clear, though. To clarify:

  1. The elements mentioned in this snippet get keyboard focus automatically and the developer doesn't need to do anything about it.

  2. If you need keyboard focus to go to elements which aren't native HTML keyboard elements (e.g. a <span> or <li> acting as a button, or a JS drop-down menu), you need to add both role and tabindex.

  3. Don't add tabindex to random page elements unless they need to be accessible by the keyboard.