The 3 aria-label techniques that level up your HTML

Give more information about the context where this element is

We often deal with buttons that have some limitations. The popular one of them is a space limit. We can't use long text because buttons will not fit in.

So we have to use short text that calls for action. But there is the problem users need more information that helps them to understand what they should do.

If users don't have vision disabilities they get information using around the context of this button. But if users have disabilities they can't do that. So they more difficult to understand what to do with a button.

We can help them adding more information about a button using the aria-label attribute. For example, ASOS adds the additional text "Clear recent searches" that describes what the button does.

don't do this

<button type="button">Clear</button>

you can use this instead

<button type="button" aria-label="Clear recent searches">Clear</button>

Verbs tell users this element leads to action

There is a best practice using the aria-label attribute to help screen reader users understand how to interact with an element. But I think there is a problem.

People use nouns. For example, they write saved items for the link that goes to the page with saved items. So users will hear saved items, link.

I suggest using verbs in the aria-label to help users understand this element leads to action. For example, I'd write go to my saved items instead of saved items. In this case, users hear go to my saved items, link. I think it more clear.

don't do this

<a arial-label="Saved items" href="https://example.com/saved-lists">...</a>

you can use this instead

<a arial-label="Go to my saved items" href="https://example.com/saved-lists">...</a>

Create a more easy interaction

If you want to make user-friendly interfaces for screen reader users you should know they voice all elements that have semantic. For example, I created the link that has the img and p elements. When users will interact with it they have to interact the 3 times.

So we should simplify that by creating another way of interacting. For example, ASOS developers get all required information using the aria-label attribute.

Then all child elements are hidden using the aria-hidden attribute so that they didn't duplicate the text from the aria-label. And users will get much more comfortable experience without unnecessary interactions.

don't do this

<a href="https://www.asos.com/only-sons/only-sons-oversize" class="product-card">
  <div class="product-card__preview">
    <img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
  </div>
  <div class="product-card__body">
    <div class="product-card__description">
      <p>Only Sons oversize vest with palmistry back print in white</p>
    </div>
    <span class="product-card__price">£14.00</span>
  </div>
</a>

you can use this instead

<a href="https://www.asos.com/only-sons/only-sons-oversize"
   aria-label="Only Sons oversize vest with palmistry back print in white; Price: £14.00"
   class="product-card">
  <div aria-hidden="true" class="product-card__preview">
    <img src="only-sons-oversize.jpg" alt="Only Sons oversize vest with palmistry back print in white">
  </div>
  <div aria-hidden="true" class="product-card__body">
    <div class="product-card__description">
      <p>Only Sons oversize vest with palmistry back print in white</p>
    </div>
    <span class="product-card__price">£14.00</span>
  </div>
</a>

P.S.
If you like my post you can say thank you using one from the following ways:
👘 Buy my merch for frontenders
🎈 Follow me on Twitter

P.S.S. This post was written with the support of my patrons: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Vlad Bazhanov, Spiridon Konofaos, Jesse Willard, Tanya Ten.