HTML accessibility refers to the practice of designing web pages so that all users, including people with disabilities, can access and interact with the content effectively. Accessibility is an important part of modern web development because websites are used by people with different physical, visual, auditory, and cognitive abilities.

ARIA stands for Accessible Rich Internet Applications. ARIA provides additional information to assistive technologies such as screen readers, speech recognition software, and keyboard navigation tools. It helps make dynamic and interactive web applications more understandable to users who rely on accessibility tools.

Although HTML already provides many built-in accessible elements, ARIA enhances accessibility when native HTML elements are not enough.

Importance of Accessibility in HTML

Accessibility ensures that:

• Visually impaired users can understand web content using screen readers.

• Users who cannot use a mouse can navigate with a keyboard.

• Hearing-impaired users can access captions and text alternatives.

• Users with cognitive disabilities can interact with simplified and structured content.

• Websites comply with accessibility standards and legal requirements.

An accessible website improves usability for everyone and also helps with SEO and user experience.

What is ARIA?

ARIA is a set of attributes added to HTML elements to improve accessibility. These attributes describe the role, state, and properties of elements to assistive technologies.

ARIA does not change the appearance of a webpage. Instead, it provides extra meaning and context.

ARIA attributes are written using the aria- prefix.

Example:

<button aria-label="Close Menu">X</button>

Here, the screen reader announces “Close Menu” instead of simply reading “X”.

Types of ARIA Attributes

ARIA is mainly divided into three categories:

1. Roles

2. Properties

3. States

1. ARIA Roles

Roles define what an element is or what purpose it serves.

They help screen readers understand the type of UI component being used.

Syntax:

role="role_name"

Common ARIA Roles

Button Role

<div role="button" tabindex="0">Submit</div>

This tells assistive technology that the <div> behaves like a button.

Navigation Role

<nav role="navigation">
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>

This identifies the section as navigation content.

Alert Role

<div role="alert">
    Error occurred while submitting form.
</div>

Screen readers immediately announce alert messages.

Dialog Role

<div role="dialog">
    Login Form
</div>

This indicates that the content is a popup dialog box.

Main Role

<main role="main">
    Main website content
</main>

This marks the primary content area of the page.

2. ARIA Properties

Properties describe additional details about elements.

They provide relationships, labels, or descriptions.

aria-label

Provides a text label for elements without visible labels.

Example:

<button aria-label="Search">