Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. To check that interactive elements indicate their purpose and state, use both a visual and a screen reader test.
How to manually test
You should test interactive elements visually and with screen readers.
Test visual focus
To manually test visual focus, TAB through your page.
- Can you TAB to each interactive element?
- When you get to an interactive element, is there a visual clue that users can interact with it?
- Does each interactive element change in appearance when you select it?
There are many ways to style the focus indicators for each interactive element.
One way is to style the :focus pseudo-class.
That style is applied any time the element is focused,
regardless of the input device or method used to focus it.
Learn more about how to style focus.
Test with screen readers
Use a screen reader to navigate your page and check that the screen reader announces the name of each interactive control, the role of that control, and the current interactive state. If the role of an element is unclear, and the state of the element is unclear, you may need to add the appropriate ARIA roles.
Learn more in Custom controls have ARIA roles.
It's also important to pay close attention to how interactive elements are labeled. Users of screen readers and other assistive technologies rely on labels to understand the context of that element. Vague labels are common, and they are non-helpful for navigating content. Learn how to improve Labels and text alternatives.
Why this matters
Providing visual hints about what a control does can help people operate and navigate your site. These hints are called affordances. Affordances makes it possible for people to use your site on a wide variety of devices.
Resources
Source code for Interactive elements indicate their purpose and state audit