Keyboard accessibility is a critical component of web accessibility. Users who are blind or visually impaired use the traditional keyboard arrows and tab keys to navigate the screen, rather than a mouse (which requires vision to point and select an item). Many users with mobility impairments also use a traditional or modified keyboard to accommodate tremors, or missing limbs.
The following coding techniques will significantly improve your website's accessibility:
Reading Order Is Determined by the DOM Order
This means that however you code your website, a keyboard or screen reader user will navigate through the site based on where the code appears in the HTML. Do you have text at the top of the DOM, but place it somewhere else on the page using CSS? If so, keyboard and screen reader users will encounter this text at the top of the document regardless of where it visually appears.
Don't Fiddle With the Tabindex
Don't set anything to have a tabindex greater than 0. This can cause the reading order to not match the tab order (using tab to move through the page). If you have to set a tabindex, it is best to just set it to 0 and let the browser figure out where it fits in the tab order based on the DOM structure.
Use Native HTML Controls
Using custom libraries generally means that you will have to do extra work to make them accessible. If you just use native HTML controls such as a control for a drop-down, keyboard and screen reader users will have no trouble using the control because it is an established standard. And don't use clickable divs instead of buttons. Just use buttons because they are already automatically announced as buttons, appear in the tab order, and work with the enter key.
Avoid Popups or Dialogs
Popups can be made accessible, but it is often very difficult depending on the structure of the page. Popups have certain focus requirements that can be finicky to get working correctly such as prohibiting elements behind the popup from gaining focus.
