3 aria-label techniques to pump up your HTML

I love making accessible interfaces and try to find new material to learn interesting practices. In this article, I want to talk about 3 techniques that will help make interfaces more understandable and easier for screen reader users.

Give more information about the context where the element is located

We often deal with buttons that have limitations. For example, space limitation. We can't use too long text because the buttons won't fit. Therefore, we are forced to use a short text.

But text alone is not enough. When a user interacts with an element without restrictions, then in addition to the text, he intuitively analyzes the surrounding context, and therefore he can guess what the button is doing.

And what will the screen reader user do in such a situation? Unfortunately, if a person uses only a screen reader, then he is left with only a short text. And it is much more difficult for him to guess what the button is doing.

But we can help by adding more information about the element's context using an attribute aria-label



. For example, ASOS developers add "Clear recent searches" so that users understand that the button clears recent searches.

Do not do this

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

You can do this

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Verbs tell users what an element leads to an action

, aria-label



, , . , , .

. , " " , . " , ".

, , . , " " " ". " , ".

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , . , , img



, p



span



. , 3 .

, . , ASOS aria-label



, aria-hidden



.

, , , .

<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>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<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>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PS If you have any questions about CSS / HTML, then do not hesitate to write to me on my mail. It is listed in my profile on Habré.