Saw a tutorial containing this snippet:
<button aria-label="Add to Cart">Add to Cart</button>

This is ARIA overuse. Text inside the <button> will be used as an accessible label for the button by default. You don’t need `aria-label` here.
The contents of `aria-label` will override the text in the button in the #a11y tree. So using the same string inside of `aria-label` as the button content is redundant.

That said, u normally _don’t_ wanna have text inside the <button> and different text in `aria-label`.
(Because Why would you?)

`aria-label` is useful for providing an accessible label for a button that otherwise doesn’t have one. For example, an icon button. There are also more considerations to be made.

For more information: https://www.sarasoueidan.com/blog/accessible-icon-buttons/
You can follow @SaraSoueidan.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: