HTML · Accessibility

What are ARIA Roles?

Learn about ARIA roles that define element purpose and behavior

Find videos you like?

Save to resource drawer for future reference!

Landmark Roles

Roles that help screen readers navigate page structure

ARIA Landmark Roles Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARIA Landmark Roles</title>
  </head>
  <body>
    <div class="page-container">
      <!-- Banner (Header) -->
      <header role="banner">
        <h1>🏗️ ARIA Landmark Roles</h1>
        <p>Helping screen readers navigate your page structure</p>
      </header>
      <!-- Navigation -->
      <nav role="navigation" aria-label="Main navigation">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <!-- Main Content -->
      <main role="main">
        <h2>Understanding Landmark Roles</h2>
        <p>
          Landmark roles help screen reader users navigate your page by creating a "table of contents"
          they can jump between. Think of them as signposts on your webpage.
        </p>
        <p>
          Screen reader users can press a keyboard shortcut to see all landmarks and jump directly
          to any section. This is incredibly helpful on long pages!
        </p>
        <!-- Complementary (Sidebar) -->
        <aside role="complementary" aria-label="Related info">
          <h3 style="color: #7c3aed; margin-bottom: 10px;">💡 Quick Tip</h3>
          <p style="margin: 0;">
            Modern HTML5 elements like &lt;header&gt;, &lt;nav&gt;, &lt;main&gt;, and &lt;footer&gt;
            have implicit ARIA roles. You only need to add role attributes when using generic
            elements like &lt;div&gt;.
          </p>
        </aside>
        <h2>Common Landmark Roles</h2>
        <ul style="list-style: none; line-height: 2;">
          <li>🏠 <strong>banner</strong> - Site header (typically top of page)</li>
          <li>🧭 <strong>navigation</strong> - Navigation menus</li>
          <li>📄 <strong>main</strong> - Primary page content (only one per page)</li>
          <li>📌 <strong>complementary</strong> - Supporting content (sidebars)</li>
          <li>🔍 <strong>search</strong> - Search functionality</li>
          <li>📰 <strong>region</strong> - Important section of page</li>
          <li>📄 <strong>contentinfo</strong> - Page footer with metadata</li>
        </ul>
      </main>
      <!-- Footer (Content Info) -->
      <footer role="contentinfo">
        <p>&copy; 2024 CoderPod. Landmarks make navigation accessible!</p>
      </footer>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Widget Roles

Roles for interactive components like tabs, dialogs, and menus

ARIA Widget Roles Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARIA Widget Roles</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 ARIA Widget Roles</h1>
      <!-- Tabs Widget -->
      <div class="widget-section">
        <h3>role="tab", role="tablist", role="tabpanel"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Tab interface for organizing content into multiple panels.
        </p>
        <div role="tablist" aria-label="Programming Languages">
          <button role="tab" aria-selected="true" aria-controls="html-panel" id="html-tab">
            HTML
          </button>
          <button role="tab" aria-selected="false" aria-controls="css-panel" id="css-tab">
            CSS
          </button>
          <button role="tab" aria-selected="false" aria-controls="js-panel" id="js-tab">
            JavaScript
          </button>
        </div>
        <div role="tabpanel" id="html-panel" aria-labelledby="html-tab" hidden="false">
          <h4 style="color: #10b981; margin-bottom: 10px;">HTML</h4>
          <p style="color: #4b5563;">
            HyperText Markup Language - the backbone of web pages. Provides structure and semantics.
          </p>
        </div>
        <div role="tabpanel" id="css-panel" aria-labelledby="css-tab" hidden="true">
          <h4 style="color: #10b981; margin-bottom: 10px;">CSS</h4>
          <p style="color: #4b5563;">
            Cascading Style Sheets - makes websites beautiful with colors, layouts, and animations.
          </p>
        </div>
        <div role="tabpanel" id="js-panel" aria-labelledby="js-tab" hidden="true">
          <h4 style="color: #10b981; margin-bottom: 10px;">JavaScript</h4>
          <p style="color: #4b5563;">
            Programming language that adds interactivity and dynamic behavior to web pages.
          </p>
        </div>
      </div>
      <!-- Alert -->
      <div class="widget-section">
        <h3>role="alert"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Important message that needs immediate attention (announced automatically).
        </p>
        <div role="alert">
          <strong style="color: #991b1b;">⚠️ Error:</strong>
          <span style="color: #7f1d1d;">Please fill in all required fields before submitting.</span>
        </div>
      </div>
      <!-- Status -->
      <div class="widget-section">
        <h3>role="status"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Advisory information for the user (lower priority than alert).
        </p>
        <div role="status" aria-live="polite">
          <strong style="color: #1e40af;">ℹ️ Status:</strong>
          <span style="color: #1e3a8a;">Your changes have been saved successfully.</span>
        </div>
      </div>
      <!-- Progressbar -->
      <div class="widget-section">
        <h3>role="progressbar"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Shows completion progress of a task.
        </p>
        <div
          role="progressbar"
          aria-valuenow="65"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-label="Upload progress">
          <div class="fill" style="width: 65%;">65%</div>
        </div>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        <strong>Remember:</strong> These roles need JavaScript to manage states and keyboard interaction!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

ARIA Role Categories

Understanding different types of ARIA roles

🏗️ Landmark Roles

Define major sections of page for navigation

• banner (header)
• navigation (nav)
• main (main content)
• complementary (aside)
• contentinfo (footer)
• search, region, form

🎨 Widget Roles

Interactive components that need keyboard handling

• button, link, checkbox
• tab, tablist, tabpanel
• menu, menuitem, menubar
• dialog, alertdialog
• slider, progressbar

📄 Document Structure Roles

Describe document organization

• article, heading
• list, listitem
• row, cell, table
• separator, toolbar

📢 Live Region Roles

Announce dynamic content changes

• alert (immediate)
• status (polite)
• log, timer
• marquee

ARIA Role Best Practices

Use semantic HTML first - <nav> instead of role="navigation"
Only one main per page - role="main" should be unique
Label landmarks - Use aria-label when multiple of same type
Widget roles need keyboard - Add keyboard event handlers
Don't override semantics - Don't add role="button" to <button>
Update dynamic roles - Change with JavaScript when needed
Test with screen readers - Verify roles are announced correctly

Common ARIA Role Mistakes

Multiple main landmarks - Only one role="main" per page
Adding roles to semantic HTML - <button role="button"> is redundant
Widget roles without keyboard - role="button" needs Enter/Space handlers
Wrong role for element - Don't use role="heading" on <button>
Forgetting required children - tablist needs tab children
Not labeling multiple landmarks - Two navs need aria-label
Using presentation incorrectly - Don't hide focusable elements

HTML5 Elements Have Implicit Roles

Modern HTML5 elements like <header>, <nav>, <main>, <footer>, and <button> already have implicit ARIA roles. You only need to add role attributes when using generic elements like <div> or <span>, or when creating custom widgets.

Previous Topic

ARIA Basics

Accessible Rich Internet Applications (ARIA) fundamentals.

Next Topic

ARIA Properties

aria-label, aria-labelledby, aria-describedby, aria-hidden.

Ask a Question

Have a question about ARIA Roles? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Accessibility

What are ARIA Roles?

Learn about ARIA roles that define element purpose and behavior

Find videos you like?

Save to resource drawer for future reference!

Landmark Roles

Roles that help screen readers navigate page structure

ARIA Landmark Roles Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARIA Landmark Roles</title>
  </head>
  <body>
    <div class="page-container">
      <!-- Banner (Header) -->
      <header role="banner">
        <h1>🏗️ ARIA Landmark Roles</h1>
        <p>Helping screen readers navigate your page structure</p>
      </header>
      <!-- Navigation -->
      <nav role="navigation" aria-label="Main navigation">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <!-- Main Content -->
      <main role="main">
        <h2>Understanding Landmark Roles</h2>
        <p>
          Landmark roles help screen reader users navigate your page by creating a "table of contents"
          they can jump between. Think of them as signposts on your webpage.
        </p>
        <p>
          Screen reader users can press a keyboard shortcut to see all landmarks and jump directly
          to any section. This is incredibly helpful on long pages!
        </p>
        <!-- Complementary (Sidebar) -->
        <aside role="complementary" aria-label="Related info">
          <h3 style="color: #7c3aed; margin-bottom: 10px;">💡 Quick Tip</h3>
          <p style="margin: 0;">
            Modern HTML5 elements like &lt;header&gt;, &lt;nav&gt;, &lt;main&gt;, and &lt;footer&gt;
            have implicit ARIA roles. You only need to add role attributes when using generic
            elements like &lt;div&gt;.
          </p>
        </aside>
        <h2>Common Landmark Roles</h2>
        <ul style="list-style: none; line-height: 2;">
          <li>🏠 <strong>banner</strong> - Site header (typically top of page)</li>
          <li>🧭 <strong>navigation</strong> - Navigation menus</li>
          <li>📄 <strong>main</strong> - Primary page content (only one per page)</li>
          <li>📌 <strong>complementary</strong> - Supporting content (sidebars)</li>
          <li>🔍 <strong>search</strong> - Search functionality</li>
          <li>📰 <strong>region</strong> - Important section of page</li>
          <li>📄 <strong>contentinfo</strong> - Page footer with metadata</li>
        </ul>
      </main>
      <!-- Footer (Content Info) -->
      <footer role="contentinfo">
        <p>&copy; 2024 CoderPod. Landmarks make navigation accessible!</p>
      </footer>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Widget Roles

Roles for interactive components like tabs, dialogs, and menus

ARIA Widget Roles Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARIA Widget Roles</title>
  </head>
  <body>
    <div class="container">
      <h1>🎨 ARIA Widget Roles</h1>
      <!-- Tabs Widget -->
      <div class="widget-section">
        <h3>role="tab", role="tablist", role="tabpanel"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Tab interface for organizing content into multiple panels.
        </p>
        <div role="tablist" aria-label="Programming Languages">
          <button role="tab" aria-selected="true" aria-controls="html-panel" id="html-tab">
            HTML
          </button>
          <button role="tab" aria-selected="false" aria-controls="css-panel" id="css-tab">
            CSS
          </button>
          <button role="tab" aria-selected="false" aria-controls="js-panel" id="js-tab">
            JavaScript
          </button>
        </div>
        <div role="tabpanel" id="html-panel" aria-labelledby="html-tab" hidden="false">
          <h4 style="color: #10b981; margin-bottom: 10px;">HTML</h4>
          <p style="color: #4b5563;">
            HyperText Markup Language - the backbone of web pages. Provides structure and semantics.
          </p>
        </div>
        <div role="tabpanel" id="css-panel" aria-labelledby="css-tab" hidden="true">
          <h4 style="color: #10b981; margin-bottom: 10px;">CSS</h4>
          <p style="color: #4b5563;">
            Cascading Style Sheets - makes websites beautiful with colors, layouts, and animations.
          </p>
        </div>
        <div role="tabpanel" id="js-panel" aria-labelledby="js-tab" hidden="true">
          <h4 style="color: #10b981; margin-bottom: 10px;">JavaScript</h4>
          <p style="color: #4b5563;">
            Programming language that adds interactivity and dynamic behavior to web pages.
          </p>
        </div>
      </div>
      <!-- Alert -->
      <div class="widget-section">
        <h3>role="alert"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Important message that needs immediate attention (announced automatically).
        </p>
        <div role="alert">
          <strong style="color: #991b1b;">⚠️ Error:</strong>
          <span style="color: #7f1d1d;">Please fill in all required fields before submitting.</span>
        </div>
      </div>
      <!-- Status -->
      <div class="widget-section">
        <h3>role="status"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Advisory information for the user (lower priority than alert).
        </p>
        <div role="status" aria-live="polite">
          <strong style="color: #1e40af;">ℹ️ Status:</strong>
          <span style="color: #1e3a8a;">Your changes have been saved successfully.</span>
        </div>
      </div>
      <!-- Progressbar -->
      <div class="widget-section">
        <h3>role="progressbar"</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
          Shows completion progress of a task.
        </p>
        <div
          role="progressbar"
          aria-valuenow="65"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-label="Upload progress">
          <div class="fill" style="width: 65%;">65%</div>
        </div>
      </div>
      <p style="text-align: center; color: #6b7280; margin-top: 30px; line-height: 1.6;">
        <strong>Remember:</strong> These roles need JavaScript to manage states and keyboard interaction!
      </p>
    </div>
  </body>
</html>

Live Preview

Loading preview...

ARIA Role Categories

Understanding different types of ARIA roles

🏗️ Landmark Roles

Define major sections of page for navigation

• banner (header)
• navigation (nav)
• main (main content)
• complementary (aside)
• contentinfo (footer)
• search, region, form

🎨 Widget Roles

Interactive components that need keyboard handling

• button, link, checkbox
• tab, tablist, tabpanel
• menu, menuitem, menubar
• dialog, alertdialog
• slider, progressbar

📄 Document Structure Roles

Describe document organization

• article, heading
• list, listitem
• row, cell, table
• separator, toolbar

📢 Live Region Roles

Announce dynamic content changes

• alert (immediate)
• status (polite)
• log, timer
• marquee

ARIA Role Best Practices

Use semantic HTML first - <nav> instead of role="navigation"
Only one main per page - role="main" should be unique
Label landmarks - Use aria-label when multiple of same type
Widget roles need keyboard - Add keyboard event handlers
Don't override semantics - Don't add role="button" to <button>
Update dynamic roles - Change with JavaScript when needed
Test with screen readers - Verify roles are announced correctly

Common ARIA Role Mistakes

Multiple main landmarks - Only one role="main" per page
Adding roles to semantic HTML - <button role="button"> is redundant
Widget roles without keyboard - role="button" needs Enter/Space handlers
Wrong role for element - Don't use role="heading" on <button>
Forgetting required children - tablist needs tab children
Not labeling multiple landmarks - Two navs need aria-label
Using presentation incorrectly - Don't hide focusable elements

HTML5 Elements Have Implicit Roles

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

ARIA Basics

ARIA Properties

HTML Code Editor

Building Your Learning Module...

What are ARIA Roles?

ARIA Landmark Roles Example

ARIA Widget Roles Example

🏗️ Landmark Roles

🎨 Widget Roles

📄 Document Structure Roles

📢 Live Region Roles

ARIA Role Best Practices

Common ARIA Role Mistakes

HTML5 Elements Have Implicit Roles

ARIA Basics

ARIA Properties

HTML Code Editor

What are ARIA Roles?

ARIA Landmark Roles Example

ARIA Widget Roles Example

🏗️ Landmark Roles

🎨 Widget Roles

📄 Document Structure Roles

📢 Live Region Roles

ARIA Role Best Practices

Common ARIA Role Mistakes

HTML5 Elements Have Implicit Roles