Tech Tips All

Best Practices on aria-label, aria-labelledby and aria-describedby

ARIA-LabelledBy and Aria-describedby Description: As we know that a blind person can’t see whatever is seen on the screen. So have you ever realized that a blind person can’t see but can hear the things shown on the screen. So the question is what should we use so that a blind person can hear the text using the keyboard. So for that, we add information about it by using aria-label, aria-labelledby and aria-describedby in the HTML elements.

What we added in html elements will be heard through a tool screen reader(NVDA).

As you can see in the example below:

Aria-label:

Area label is an attribute that when added to the HTML elements tells us a information about the HTML elements when we read it by the using screen reader.

Syntax: <element aria-label =”about content”> Content </element >

Here’s a simple example:

<form action=”/techtipsall.php” aria-label=”tech tips checkbox group”>
<input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike” aria-label=”click or press spacebar for check I have a bycycle”>
<label for=”vehicle1″> I have a bycycle</label><br>
<input type=”checkbox” id=”vehicle2″ name=”vehicle2″ value=”Car” aria-label=”click or press spacebar for check I have a motorcycle”>
<label for=”vehicle2″> I have a Motorcycle</label><br>
<input type=”checkbox” id=”vehicle3″ name=”vehicle3″ value=”Truck” aria-label=”click or press spacebar for check I have a truck”>
<label for=”vehicle3″> I have a Truck</label>
<input type=”submit” value=”Submit” aria-label=”click to submit changes”>
</form>

    <div>
      <input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
      <label for="exampleRadios1">
        Default radio
      </label>
    </div>
    
    <div>
      <input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
      <label for="exampleRadios2">
        Second default radio
      </label>
    </div>
    
    <div>
      <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
      <label for="exampleRadios3">
        Disabled radio
      </label>
    </div>

Note: Disabled element never read by NVDA(screen reader tool).

Aria-labelledby:

There is another ARIA (Accessible Rich Internet Applications) attribute that associates an element with one or more elements that act as labels for it is aria-labelledby. When it comes to giving assistive tools like screen readers accessibility information, this feature is quite helpful.

The ID of one or more elements that serve as labels for the related element should be set when an element has the aria-labelledby property. Screen readers will declare the content of the labeled elements when the user interacts with the corresponding element.

Syntax: <element aria-labelledby =””> Content </element >

Parameters: A space-separated list of all the element IDs.

Multiple Labels: in below example each element is a field with both labels, the individual labels, and the group labels.

    <div id="techtips">
      <h4>techtips Course Name</h4>
    </div>
    
    <div>
      <div id="react">
        React Js id:
        <input type="text" aria-labelledby="techtips react" />
      </div>
    </div>
    
    <div>
      <div id="vuejs">
        Vue js Id:
        <input type="text" aria-labelledby="techtips vuejs" />
      </div>
    </div>

In this example, the input detail is associated with 2 span factors the use of aria-labelledby. The display reader will announce the content of each “First name” and “last name” while the user interacts with the text input.

<span id=”label1″>First Name</span>

As you see in below example

Headings With Regions: the header element is linked with the group head div, which makes the relation between the group head and the header element.

<div role=”main” aria-labelledby=”techtips”>
<h1>tech tips all</h1>
<h4 id=”techtips”> Techtipsall website provide the all web development solutions </h4>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
</div>

How do apply aria label in Radio Group:

in this example the radio group of a button makes a relation with the container head.

<h1>techtipsall</h1>
<div id=”radio_list”>My radio button list</div>
<ul role=”radiogroup” aria-labelledby=”radio_list”>
<li role=”radio”>
<input type=”radio”>Tech</li>
<li role=”radio”>
<input type=”radio”>Tips</li>
<li role=”radio”>
<input type=”radio”>all</li>
</ul>

How do apply aria label in Dialog:

In this example makes the relation between dialog and header element.

<div id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"> 
  <div role="document"> 
    <h5 id="exampleModalLabel">Modal title</h5>
    <button type="button" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span> 
    </button> 
  </div>
  <div> 
    paragraph paragraph paragraph paragraph paragraph paragraph
    paragraph paragraph paragraph paragraph 
  </div> 
  <div> 
    <button type="button" data-dismiss="modal">Close</button> 
    <button type="button">Save changes</button> 
  </div>
</div>

This attribute is specially useful when an detail’s label is made up of more than one elements or when the label is not without delay adjoining to the element it’s miles labeling. It enables make sure that users with disabilities get hold of correct and significant information approximately the purpose of the elements on a web site.

Aria-describedby:

The HTML property aria-describedby is used to give assistive devices, such screen readers, more details about an element. To improve the accessibility of online content for individuals with disabilities, the feature is frequently used in concert with other ARIA (Accessible Rich Internet Applications) properties.

<p id=”unique-techtipid“> You can read here about input field when you focus on input field</p>

Note: should be unique id in a webpage and this id will be added in aria-describedby attribute as you see in top example.

The ID of another element that provides the additional information should be set as the value of the aria-describedby property when it is present on an element. When the user interacts with the connected element, screen readers will then proclaim the content of the referenced element.

Observe this simple example:

html

<button aria-describedby=”additional-info”> Copy the code.<div id=”additional-info”>Click me</button>Pressing this button starts a crucial process.</div>

Here, the button will alert a screen reader to the extra data included in the div with ID “additional-info.”

This feature is a component of the ARIA attribute suite, which provides semantic information about the function and behaviour of webpage elements in an effort to improve web accessibility for users with impairments.

What is difference between aria-labelledby and aria-describedby

Use aria-labelledby to name an element. It should only be a few words.
Use aria-describedby to describe the element in detail. Generally it should contain complete sentences.

Note: You can apply both aria-labelledby and aria-describedby on the same element and also applied aria-label.
<div id=”exampleModal” tabindex=”-1″ aria-labelledby=”exampleModalLabel”>
<div role=”document”>
<h5 id=”exampleModalLabel”>Modal title</h5>
<button type=”button” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div>
paragraph paragraph paragraph paragraph paragraph paragraph
paragraph paragraph paragraph paragraph
</div>
<div>
<button type=”button” data-dismiss=”modal”>Close</button>
<button type=”button”>Save changes</button>
</div>
</div>

FAQ:

How many guidelines of accessibility?
Ans: There are 4 guidelines of accessibility Perceivable, Operable, Understandable, and Robust.
What is HTML aria?Ans: HTML standard for Accessible Rich Internet Applications ( ARIA )
Why is accessibility important?

Ans: As we know that a blind person can’t see whatever is seen on the screen. So have you ever realized that a blind person can’t see but can hear the things shown on the screen. It promotes usability. It’s the right thing to do. It’s the law.

4. What Elements can be used aria-label

Ans: There are some elements used with aria-label
example:

Interactive elements: input, select, button, textarea. href, audio, video

implicit landmark elements: – Header, footer, nav, main, aside, section and form

Explicit landmark elements: role=”navigation”

widget role elements: role=”dialog” and role=”tooltip”