How to test
Links & Buttons

Testing links and buttons is essential to ensuring a site is accessible and functional for all users.

1 How to test

Test with your keyboard first

Navigate through the page using only the tab and shift + tab keys on your keyboard to reach all links and buttons.

Test with screen readers second

Use a screen reader, such as NVDA (for Windows) or VoiceOver (for macOS) and browse the page using your arrow keys to reach all links and buttons.

2 What to test for

✓ Ensure each link and button receives focus and has a visible focus indicator

Pass Fail
I do NOT get focus
I get focus! I do NOT get focus

✓ Ensure buttons and links can be activated with the enter key and that buttons can also be activated with the space key

Pass Fail
Show alert
Magentaa11y home Magentaa11y home

✓ Ensure disabled controls are focusable but not actionable, and have an aria-disabled="true" attribute

Note: A control that is disabled should not be interactive to any users. Nothing should happen when activated.

Preferred Visually disabled but actionable

✓ Ensure all links and buttons have clear labels and that all graphical controls have accurate aria-label attributes

Pass Fail
Learn more about links Learn more

✓ Ensure all CTA buttons or links have appropriate aria-label values.

Note: If a control has aria-label, the aria-label must contain the text that is presented visually. The text should not be broken up and be the first part of the label.

Pass Fail

iPhone 14

I am the product information.

iPhone 14

I am the product information.
aria-label="Buy now, iPhone 14" aria-label="Learn more about our specials"

✓ Ensure screen readers accurately announce any button or link state that is conveyed visually

Note: States such as expanded,collapsed, or current can be communicated to screen reader users.

Pass Fail
This button expressed its state as expanded or collapsed
This button is not conveying it's state.

✓ Ensure skip to & same-page links move focus for screen reader and keyboard users

Pass Fail
Return to top Return to top

✓ Ensure controls are announced correctly as links OR buttons based on their function and purpose regardless of visual design

Note: The role of the element button or link communicates to screen reader users what may happen after they interact with it.

Pass Fail
Home
Open a modal Open a modal
  • When the user clicks a link, they are taken to a different location in the site.
    • Either another page or even another area of the same page
  • A link can look like a big shiny button but it must be coded as <a> link
  • An interactive link should have a valid href value so it can receive keyboard focus.
    For example <a href="/some-page">...</a>.

If it does something, it’s a <button>

  • Buttons cause an action to occur on the same page
    • Submit a form (even when submission takes you to a new page)
    • Open a menu
    • Launch a modal
    • Expand details
  • A button can look like a link, but it must be coded as a <button>
  • 2.4.4 Link Purpose (In Context)
  • 2.5.3 Label in Name
  • 3.2.4 Consistent Identification
  • 4.1.2 Name, Role, Value

Resources