HTML - Web Accessibility (ARIA Roles)

Image

Web Accessibility means designing websites so that everyone, including people with disabilities, can use them. ARIA (Accessible Rich Internet Applications) roles help screen readers and assistive technologies understand what an element does, especially when normal HTML is not enough.

ARIA is mainly used when you build custom UI components (like custom buttons, modals, tabs) that are not standard HTML elements.

What Are ARIA Roles?

ARIA roles tell assistive tools the purpose of an element. For example, if you create a button using <div>, a screen reader won’t know it’s a button unless you tell it.

Example without ARIA (bad):

<div>Click me</div>

Example with ARIA (better):

<div role="button" tabindex="0">Click me</div>

Now a screen reader understands it as a button.

Common ARIA Roles You Should Know

Landmark Roles (page structure):

  • role="banner" → header area

  • role="navigation" → menus

  • role="main" → main content

  • role="contentinfo" → footer

These help users quickly jump between sections.

Widget Roles (interactive elements):

  • role="button"

  • role="checkbox"

  • role="dialog"

  • role="tab"

  • role="menu"

Used when creating custom controls.

Live Region Roles (dynamic content):

  • role="alert" → urgent messages

  • role="status" → updates without interruption

ARIA Attributes (Very Important)

Roles often work with ARIA attributes:

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

Common attributes:

  • aria-label → readable name

  • aria-hidden="true" → hide from screen readers

  • aria-expanded="true/false" → dropdown state

  • aria-checked="true/false" → checkbox state

Important Rules (Must Remember)

  • Use native HTML first (<button>, <nav>, <main>)

  • ARIA is a helper, not a replacement

  • Wrong ARIA is worse than no ARIA

  • Always keep ARIA states updated with JavaScript

  • ARIA makes complex websites usable for everyone

  • It helps screen readers understand custom components

  • Use ARIA only when HTML alone is not enough

If accessibility matters (and it should), ARIA roles are essential.