> For the complete documentation index, see [llms.txt](https://ebay.gitbook.io/oatmeal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ebay.gitbook.io/oatmeal/keyboard/buttons-and-links.md).

# 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:

* [Focus Moveable](/oatmeal/keyboard/focus-is-not-trapped.md)
* [Focus Visible](/oatmeal/keyboard/focus-is-visible.md)
* [Focus Reachable](/oatmeal/keyboard/keyboard-reachable.md)

To help identify and distinguish between buttons and links, read **Button vs Link** in the knowledge section below. 

## Steps

For each [keyboard reachable](/oatmeal/keyboard/keyboard-reachable.md) button and link control that you have identified on the page, perform the following steps:

1. Move keyboard focus by pressing TAB or SHIFT+TAB until you reach the control
2. Activate the control with the ENTER key
3. If the control **doesn't work**, create an issue
   1. see **Enter doesn't activate button/link** below

For **buttons only**, perform the following additional steps:

1. Move keyboard focus by pressing TAB or SHIFT+TAB until you reach the button
2. Activate the button with the SPACE key
3. If the button **doesn't work**, create an issue
   1. 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