ARIA Roles

ARIA (Accessible Rich Internet Applications) roles communicate element purpose to assistive technologies when HTML semantics are insufficient.

Example

<!-- Landmark roles (prefer HTML equivalents) -->
<div role="banner">  <!-- prefer <header> -->
<div role="main">    <!-- prefer <main> -->
<div role="navigation"> <!-- prefer <nav> -->
<div role="contentinfo"> <!-- prefer <footer> -->

<!-- Widget roles (no HTML equivalent) -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
</div>
<div role="tabpanel" id="panel1">Panel content</div>

<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm deletion</h2>
</div>

HTML

Full Editor

Pro Tip

ARIA roles do not add behavior — they only communicate intent to screen readers.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned