Skip to content

Commit

Permalink
Clarify accessibility notes for button labels.
Browse files Browse the repository at this point in the history
  • Loading branch information
marvel-uiuc committed Aug 21, 2024
1 parent 6d9ad21 commit 23719e2
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,14 @@ those will utilize the first link in the contents.
that needs to be described, consider placing it below the heading. If it's at the top with an alt text,
it may be confusing for screen readers if it comes before the title of the card.
- **Centered text** can be harder to read, so avoid longer card text that's centered.
- Make sure **links and buttons** are descriptive, using `ilw-sr-only` if needed to add context.
- Make sure **links and buttons** are descriptive, using `ilw-sr-only` if needed to add context. For example:

```html
<a href="#" class="ilw-button">Learn More <span class="ilw-sr-only">About Cards</span></a>
```

Note that [WCAG Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name) specifies that the
name and label must begin with the same words, so the hidden portion should be at the end.

## External References

Expand Down

0 comments on commit 23719e2

Please sign in to comment.