Testing buttons

What to check when testing the accessibility of a button.

Test that the button is keyboard accessible

Notice what happens when you use keyboard commands to move between elements on the web page.

Check the following:

• The button is keyboard focusable using the Tab key.
• The Tab key can be used to move focus from the button to the next item in the focus order.
• Shift + Tab can be used to move focus from the button to the previous item in the focus order.
• The button’s position in the keyboard focus order does not change or confuse the button’s meaning or function.
• The button shows a visible focus indicator when it receives keyboard focus.
• The Space or Enter keys can be used to activate the button, and that both options are available.

Test that the button’s name, role and states are programmatically determinable

Use tools — for example, browser developer tools — that show a component’s programmatically exposed accessibility details.

• Check that the button has a meaningful accessible name.
• Check that the button has a programmatic role of button.
• Check that any custom states that the button has (for example, pressed or expanded) are programmatically exposed.

Test that the button has sufficient contrast

Use a tool that can test colour contrast.

Check the following:

• Any text or image of text in the button has a minimum contrast ratio of 4.5:1 against surrounding colours.
• Any visual information or graphical objects that are needed to identify and understand the button and its current state (for example, pressed or expanded) have a minimum contrast ratio of 3:1 — except if the button is disabled or if it contains graphical objects whose particular visual display is essential to understanding what they mean.