Blog

Accessibility Testing for Keyboard Navigation

Dragonflytest - accessbility and Navigation with keyboard

SUMMARY

The goal with keyboard testing is to make sure your website or software is 100% usable with only a keyboard.

The first step to manual testing is to throw away your mouse. Imagine your mouse is not working OR you don’t have a mouse OR you have mortar issues with your hand. This is where keyboard navigation and keystrokes come into picture to enable Accessibility testing.

See if you can navigate the page, including all menus and interactive elements, using only the keyboard. Every interactive element should have a focus indicator which essentially shows visually where the focus is currently present i.e., this tells the keyboard users where they are currently present on the webpage.

Dragonflytest - accessbility and Navigation with keyboard

COMMON KEY-STROKES

KEY STROKES

ACTIONS OF KEYSTROKES

Tab

Forward

Shift + Tab

Backwards

Enter / Return

Opens a link, activates buttons

Spacebar

Toggles checkboxes values, activates buttons

Arrow keys

Scrolls content, moves/selects radio buttons in a group. Sometimes moves between interactive menu items or tab panels.

Escape

Dismiss pop ups and expanded menus

HOME

Used to navigate to the top of the page

END

Used to navigate to the end of the page

Dragonflytest - accessbility and Navigation with keyboard

 

WCAG SUCCESS CRITERIA FOR KEYBOARD ACCESSIBILITY TESTING

Use the TAB, ENTER, SPACE, and UP and DOWN ARROW keys to navigate

  1. Verify if ‘skip to main content’ is activated during keyboard navigation
                ☐ Yes ☐ No
  2. Verify if the application is accessible using physical keyboard or virtual keyboard on your OS
                ☐ Yes ☐ No
  3. You can always see the keyboard focus [focus indicator] when tabbing through the page
                ☐ Yes ☐ No
  4. Keyboard focus does not unexpectedly shift to other elements OR doesn’t submit the forms
                ☐ Yes ☐ No
  5. TAB through the page to see if the order is logical in forward order
                ☐ Yes ☐ No
  6. SHIFT+TAB through the page to see if the order is logical in reverse order
                ☐ Yes ☐ No
  7. See if you can activate all interactive elements (elements that are clickable) with the ENTER or SPACE keys
                ☐ Yes ☐ No
  8. Verify if the elements that are not interactive should not receive keyboard focus when using the TAB key
                ☐ Yes ☐ No
  9. All elements on the page can be reached by keyboard. This includes links, dropdown menu items, buttons, and other interactive elements
                ☐ Yes ☐ No
  10. If dropdown menus exist, the keyboard can be used to select and open items in them
                ☐ Yes ☐ No
  11. In dropdown menus, you can navigate and select items using the keyboard alone
                ☐ Yes ☐ No
  12. Data entered is retained if the page is refreshed or too much time is taken to fill out form fields
                ☐ Yes ☐ No
  13. To make time outs accessible, notify the user that there is a time limit and provide them with the option to extend, turn off, or adjust the time limit.  An example of this is a dialog box that notifies the user that they will be logged out of a site unless they activate the “Extend Session” button.
                ☐ Yes ☐ No
  14. If a required field is left blank, keyboard focus shifts to that field when user is notified
                ☐ Yes ☐ No
  15. Dialog boxes or pop-up menus receive keyboard focus
                ☐ Yes ☐ No
  16. Dialog messages can be dismissed using the ESC keyboard stroke
                ☐ Yes ☐ No
  17. Focus returns to a logical location when dialog boxes are closed
                ☐ Yes ☐ No
  18. Manual controls exist (e.g. start, pause, go back, go forward) for multimedia applications which includes features such as videos, audio files, calendars, Flash content, and photo carousels.
                ☐ Yes ☐ No
  19. Multimedia application controls can be tabbed through
                ☐ Yes ☐ No
  20. Multimedia application controls can be activated using the keyboard
                ☐ Yes ☐ No
  21. Is the user experiencing a keyboard trap where he is unable to get out of the element he is current focused at
                ☐ Yes ☐ No
  22. Is the user able to test the entire workflow for forms, software and custom widgets using only the keyboard ?
                ☐ Yes ☐ No

IMPACT:

  • Keyboard only users & screen reader users can get trapped & not be able to interact with the rest of the web-page application
  • Keyboard only users need to know where they are on the web-page & how to get to the elements they are looking for

WCAG REFERENCE GUIDELINE:

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

https://www.getstark.co/wcag-explained/operable/keyboard-accessible/

Document these issues when conducting keyboard testing:

  • Interactive elements don’t have a focus indicator
  • The navigation order isn’t logical
  • Custom widgets aren’t navigable with a keyboard
  • Navigation doesn’t have a working skip-to-content link
  • Form can’t be completed/submitted with only a keyboard