Buttons and Links
Steps specific to testing button and link controls with keyboard alone.
Prerequisites
These steps assume that the following tests have been completed and that issues found have been resolved:
To help identify and distinguish between buttons and links, read Button vs Link in the knowledge section below.
Steps
For each keyboard reachable button and link control that you have identified on the page, perform the following steps:
Move keyboard focus by pressing TAB or SHIFT+TAB until you reach the control
Activate the control with the ENTER key
If the control doesn't work, create an issue
see Enter doesn't activate button/link below
For buttons only, perform the following additional steps:
Move keyboard focus by pressing TAB or SHIFT+TAB until you reach the button
Activate the button with the SPACE key
If the button doesn't work, create an issue
see Space doesn't activate button below
Creating Issues
Make sure you provide enough information to identify each button and link with issues.
Your team may wish to list all failures of this check in one issue.
Enter doesn't activate button/link
Description: Enter doesn't activate button/link
Priority:
Link: P1
Button: P1 if SPACE key also doesn't work (see below)
Button: P2 if SPACE key does work
Label or Tag: #a11y211
Space doesn't activate button
Description: Space doesn't activate button
Priority: P3
Label or Tag: #a11y211
Knowledge
Button vs Link
Whether something is a button or a link is defined by the function it performs; not by its visual appearance.
Links:
cause a full page load
have options similar to the following in their context menu:
Open link in new tab
Open link in new window
Save link as...
Copy link address
etc.
programmatically convey a "visited" state
Buttons:
perform actions on the page
don't have link-specific options in their context menu
don't convey a "visited" state
can cause a page load (e.g. form submit button)
About
Author(s): Ian McBurnie & Luis Garcia
Last Updated: 2021 January 27th
Last updated