HTML - HTML Accessibility (ARIA Roles and Attributes)

HTML Accessibility means designing web pages so that everyone can use them easily, including people with disabilities such as visual impairment, hearing problems, or physical limitations. Accessible websites work properly with assistive technologies like screen readers, voice navigation systems, and keyboard-only navigation.

Accessibility improves usability for all users and is an important part of modern web development.

What is Accessibility in HTML

Accessibility ensures that web content is understandable, navigable, and usable for all users. HTML already provides many built-in accessibility features through semantic elements such as header, nav, main, article, section, and footer.

However, sometimes developers create custom components using div or span elements. In such cases, accessibility information must be added manually using ARIA.

What is ARIA

ARIA stands for Accessible Rich Internet Applications.

ARIA provides additional attributes that help assistive technologies understand the purpose and behavior of elements on a webpage.

ARIA does not replace HTML. It only enhances accessibility when standard HTML elements are not sufficient.

Types of ARIA Attributes

  1. ARIA Roles

Roles define what an element represents.

Example:

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

Here, the screen reader understands that this div behaves like a button.

Common ARIA roles:

  • button

  • navigation

  • dialog

  • alert

  • main

  • banner

  1. ARIA States

States describe the current condition of an element.

Example:

<button aria-pressed="true">Like</button>

This tells assistive tools that the button is currently pressed.

Examples of ARIA states:

  • aria-checked

  • aria-expanded

  • aria-selected

  1. ARIA Properties

Properties provide additional information about elements.

Example:

<input type="text" aria-required="true">

This indicates that the input field is required.

Common properties:

  • aria-label

  • aria-labelledby

  • aria-describedby

  • aria-hidden

Importance of Semantic HTML

Before using ARIA, developers should always use semantic HTML elements because they already provide accessibility support.

Better approach:

<button>Submit</button>

Instead of:

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

Semantic elements automatically work better with screen readers.

Keyboard Accessibility

Accessible websites must allow users to navigate using only the keyboard.

Important practices:

  • Use tab key navigation

  • Provide visible focus indicators

  • Avoid mouse-only actions

Example:

<button tabindex="0">Click Me</button>

Providing Text Alternatives

Images, videos, and audio must include descriptions.

Example:

<img src="book.jpg" alt="Student reading a book">

The alt attribute helps visually impaired users understand images.

Accessibility Best Practices

  • Use proper heading structure (h1 to h6)

  • Provide labels for form inputs

  • Maintain sufficient color contrast

  • Avoid automatic content that cannot be controlled

  • Test websites using screen readers

Benefits of HTML Accessibility

  • Makes websites usable for everyone

  • Improves user experience

  • Helps in search engine optimization

  • Meets international web standards

  • Required for many government and educational websites

HTML Accessibility with ARIA helps developers create inclusive web applications where all users can access information equally regardless of their abilities.