Improving aria-label usage based on context

[wavvves]

While doing a pair-programming session on an unrelated task, I was left wondering how good our use of aria-label for accessibility purposes is and how it can be improved.

Best way to demonstrate this is with a quick example.

The “Remove item” action in the Cart block currently has no aria-label value; using Voice Over, it reads out only as the text it has. The shortcode version uses an “X” as the button text and has an aria-label value of “Remove this item.”. Both possess no labels. This is a bit generic without context. A user might not be sure what item is being removed from the cart.

I took a look at Amazon, for example, on the same functionality, and they provide context:

Apple.com does it via hidden text:

farfetch.com

(I also tried nike.com, but their cart was broken due to a CORS issue. Oopsie 😂)

Since we probably have multiple places where providing context would be an enhancement, a good suggestion about what could be done to improve on this was given on slack by @tarhi-saad:

Maybe a similar effort in Call to action to improve our public-facing text can be made here as well! (e.g., create a document with a list of all aria-labels text, propose a more clear alternative, etc.)