How to use ARIA Attributes to Enhance Accessibility in HTML ?

Last Updated : 01 Apr, 2024

Accessibility is a fundamental aspect of web development, ensuring that all users, regardless of ability, can access and interact with online content. HTML provides various features to improve accessibility, and one powerful tool is ARIA (Accessible Rich Internet Applications) attributes.

ARIA attributes extend HTML semantics, providing additional information to assistive technologies, such as screen readers, to enhance the accessibility of web pages.

Below are the following ways to use ARIA attributes:

Table of Content

Adding ARIA Roles
Defining ARIA Properties and States
Establishing ARIA Relationships

Adding ARIA Roles

ARIA roles define the purpose or role of an element in the web page structure. By assigning appropriate roles, developers can convey the semantic meaning of elements to assistive technologies, making it easier for users to navigate and interact with the content.

Syntax:

<element aria-role="value">

Example: To demonstrate adding ARIA roles to navigation by using the role=”navigation” attribute to indicate that the <nav> element represents a navigation section.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
               initial-scale=1.0">
    <title>Adding ARIA Roles</title>
</head>

<body>

    <nav role="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

</body>

</html>

Output:

Screenshot-2024-03-18-191020

Defining ARIA Properties and States

ARIA properties and states provide additional information about an element’s condition or behavior. Properties describe static characteristics, while states describe dynamic changes. By using ARIA properties and states, developers can convey important information to assistive technologies, ensuring a more accurate representation of the content.

Syntax:

<element aria-property="value">

Example: To demonstrate disabling a button using the aria-disabled=”true” attribute, indicating that the button is currently inactive.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Defining ARIA Properties and States</title>
</head>

<body>

    <button aria-disabled="true">Submit</button>

</body>

</html>

Output:

Screenshot-2024-03-18-191159

Establishing ARIA Relationships

ARIA relationships define connections between elements, enhancing their semantic meaning. By establishing relationships, developers can provide additional context and improve the accessibility of web content for users with disabilities.

Syntax:

<element aria-relationship="value">

Example: To demonstrate linking label and Input field to an input field using the aria-labelledby attribute, providing additional context for assistive technologies.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Establishing ARIA Relationships</title>
</head>

<body>

    <label for="username">Username:</label>
    <input type="text" id="username" 
           aria-labelledby="username">

</body>

</html>