Button

import { ... } from '@ag.ds-next/react/button';

Here are ways to make a button more accessible and inclusive for users of any ability or environment.

For more help, go to the Web Content Accessibility Guidelines 2.1.

Use accessible button labels

The visual text label is the accessible name of a button with an icon in the page code. It’s read aloud by screen readers.

Include the text of the visible label in the accessible name in the code to help speech input users. For example, ‘View Corrective Action 12345’.

It especially helps those with cognitive, language and learning disabilities enter information correctly, or avoid submitting an incomplete form.

Go to Understanding Success Criterion 3.3.2 Labels or Instructions for more guidance.

Buttons as links

You can implement a button as an anchor or button element by using either Button or ButtonLink. Mark up your code in the most semantic way possible.

Using incorrect HTML in some situations can cause accessibility issues.

Go to G115: Using semantic elements to markup structure for important information about techniques.

Hover

Buttons have an underline on hover to address WCAG 2.0 Criterion 1.4.1 Use of Color:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

However, the ‘focus’ state is not underlined as it’s conveyed using the global focus outline.