button/accessibility

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Meaningful button name definition

A meaningful button name describes the button's purpose: the action that occurs when the button is activated (for example: removing a list item), and the action's associated context (for example: the specific item to be removed). Button names should be as succinct as possible while still being descriptive and unique.

Button name testing requirements

When reviewing buttons on a page, ensure the following are true: (1) Each button has a non-empty name per ACT 97a4e1: Button has non-empty accessible name. (2) When buttons perform the same action, they have the same name. (3) When buttons perform different actions, they don't have the same name.

Designer guidelines for button accessibility

When including an unlabeled, icon-only button in a design, recommend an accessible name. When including multiple buttons that perform the same function in a design, use the same label for each.

Engineer guidelines for button accessible names with aria-label

When a button doesn't have a visible label (for example: an IconButton), provide an accessible name using aria-label. Because aria-label doesn't supplement visible labels but rather supplants them, when a button has a visible label, include that label in its accessible name with the text of the label at the start of the name. Don't use aria-label when its content would be identical to a button's visible label. Don't reuse the same visible label or invisible name for buttons which perform different actions.

Button with visible label should not have redundant aria-label

A button with visible label text should not include an aria-label attribute that repeats the same text. For example, use <button type="button">OK</button> rather than <button type="button" aria-label="OK">OK</button>.

Icon-only button must have aria-label

An icon-only button must have an accessible name provided via aria-label. For example: <button type="button" aria-label="smockle's profile"><img alt="smockle" src="https://avatars.githubusercontent.com/u/3104489?s=32"></button>

Descriptive button names with context example

Each button in a list should have a unique name describing both the action and its context. Example: <button onclick="removeItem(event)" aria-label="Remove 'Apples'" type="button">❌</button> for an item named 'Apples'. This allows screen reader users to distinguish between multiple similar buttons and understand what each one does.

Icon-only button without aria-label pitfall

An icon-only button without an accessible name is problematic. For example: <button type="button"><img src="https://avatars.githubusercontent.com/u/3104489?s=32"></button> lacks a name and users cannot determine its purpose, especially screen reader users.

Multiple buttons with same emoji but different actions pitfall

Multiple buttons performing different actions should not all have the same name. For example, using the same emoji ❌ for multiple remove buttons without unique aria-labels means each button has the same name (cross mark) rather than describing its specific action and context, making it impossible for screen reader users to distinguish which button removes which item.

GitHub comment identifier pattern

When a button is associated with a specific comment, the button's name should include a comment identifier. For example: 'Reply to benjiallen, 2:45PM today' or 'Reply to benjiallen, 2:45PM on November 19, 2021'. The identifier progressively adds more verbose date information as needed for uniqueness: today, yesterday, specific date, or full date with year.

Give your agent this brain