Button Icon
Back to simple components
Buttons must be checked to see if they indicate focus. If an icon button has no text, it must provide text to a screen reader. If it is an icon only, a way to present the buttons purpose must be provided by a screen reader. Alt text need nopt be filled in for button that has text and an icon.
WHEN I am navigating using a keyboard.
AND I tab on a button.
THEN I see a visual indicator. AND The focus indicator passes WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a button.
AND I am using a screen reader.
THEN The screen reader reads out invisible accessibility text.
AND I tab on a button.
THEN I see a visual indicator. AND The focus indicator passes WCAG rule.
WHEN I am navigating using a keyboard.
AND I tab on a button.
AND I am using a screen reader.
THEN The screen reader reads out invisible accessibility text.
Related Acceptance criteria
Must meet button acceptance criteria plus above.
More Information
Buttons MUST meet the following:
- Have discernible screen reader text [ WCAG 4.1.2 ].
- Be unique and be able to stand on its own [ WCAG 2.4.4 ].
- Provide an visual indication they hae focus when in focus [ WCAG 2.4.7 ].
- Be able to be reached and activated using a keyboard [ WCAG 2.1.1 ].
Further details goes here