What are these attributes `aria-labelledby` and `aria-hidden` ?

Last Updated : 17 Nov, 2022

The term, ARIA with attributes such as aria-labelledby and aria-hidden stands for Accessible Rich Internet Applications. These are the set of standards and guidelines that makes web applications more accessible to people with disabilities. This is used in the interactive content in an HTML document such as error messages, progress bars, progressive hints, etc.

There are multiple ARIA attributes which are as follows

aria-autocomplete
aria-checked
aria-disabled
aria-expanded
aria-hidden
aria-invalid

aria-hidden: The ARIA attribute aria-hidden is used to indicate assistive technologies like screen-readers which dictates the content on the document to people with disabilities that the content with this attribute can actually be skipped. The screen-reader will skip the element content without dictating them.

What type of content should have an aria-hidden attribute?
Content that does not hold significant meaning can be skipped. Examples of such content includes the following.

Purely presentational content
Placeholder Content
Content that are specific to browser based-user environment

Difference between aria-hidden and HTML’s native hidden attributes:

HTML hidden attribute: This is used to indicate that the content should not be rendered by the web browser.
aria-hidden attribute: This is used to indicate that the assisting technologies like screen-readers can skip the content with this attribute.

Example:

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h2>Welcome To GFG</h2>
     
    <p aria-hidden="true">
        This content will be 
        skipped by Screen-Readers
    </p>
 
</body>
 
</html>

Output:

The “p” element contents are non-interactive content, so these are hidden from the screen readers.

Key things to know about aria-hidden are as follows.

aria-hidden cannot be used by focusable elements.
aria-hidden will mark all of its child elements hidden. It is not possible to set a child element with
aria-hidden=”false” and make it visible.

aria-labelledby: The aria-labelledby attribute is used to relate labels and the element containing labelling text. The value for the aria-labelledby is usually the ID of an element containing the labelling text. It can have more than one element id in its value part.
This is very similar to an input element containing a for attribute to link labels.

Example:

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h2>Welcome To GFG</h2>
    <div id="myBillingId">Billing</div>
 
    <div>
        <div id="myFirstName">First Name</div>
        <input type="text"
            aria-labelledby="myFirstName" />
    </div>
 
    <div>
        <div id="myContactNumber">
            Contact Number
        </div>
         
        <input type="text" aria-labelledby
            ="myFirstName myContactNumber" />
    </div>
</body>
 
</html>

When to use HTML specification attribute and ARIA attribute?

ARIA specifications are for contents that are intended for people with disabilities as well. It might be meaningful to use HTML specification attribute in some cases and ARIA specification in some cases and this has to be dealt with respect to the target audience.

Suggest improvement

How to write articles in HTML document ?

How to add filter to the background image using CSS ?

Share your thoughts in the comments