ARIA — Accessible Rich Internet Applications Complete Guide

<!-- ❌ Bad: ARIA button on a div -->
<div role="button" tabindex="0" onclick="doSomething()">
  Click me
</div>

<!-- ✅ Good: just a native button -->
<button onclick="doSomething()">
  Click me
</button>

<!-- Proper landmark structure -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Welcome to DodaTech</h1>
  <section aria-labelledby="features-heading">
    <h2 id="features-heading">Features</h2>
    <p>Content about features...</p>
  </section>
</main>

<footer>
  <p>&copy; 2026 DodaTech. Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.</p>
</footer>

<!-- aria-label: overrides the visible text -->
<button aria-label="Close the settings dialog" onclick="closeDialog()">
  ×
</button>

<!-- aria-labelledby: references another element's text as the label -->
<h2 id="modal-title">Confirm Deletion</h2>
<p id="modal-desc">This action cannot be undone.</p>
<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-desc">
  <button onclick="deleteItem()">Delete</button>
  <button onclick="cancel()">Cancel</button>
</div>

<!-- aria-describedby: provides supplementary description -->
<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="email-format" required>
<p id="email-format">Format: name@example.com</p>

<!-- aria-live="polite": announces when user is idle -->
<div aria-live="polite" aria-atomic="true" id="cart-status">
  Cart: 3 items
</div>

<!-- role="alert": interrupts immediately for critical messages -->
<div role="alert" id="error-banner">
  Connection lost. Your changes will be saved locally.
</div>

<!-- aria-relevant: specifies what kinds of changes trigger announcements -->
<ul aria-live="polite" aria-relevant="additions removals" id="notification-feed">
  <!-- notifications appear here -->
</ul>

<!-- aria-expanded for disclosures, accordions, menus -->
<button aria-expanded="false" aria-controls="details-panel">
  Show details
</button>
<div id="details-panel" hidden>
  <p>Hidden content here...</p>
</div>

<!-- aria-hidden for decorative or off-screen content -->
<span aria-hidden="true">→</span> Continue reading

<!-- aria-current for indicating the current item in a set -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/laptop" aria-current="page">Laptop</a></li>
  </ol>
</nav>

<!-- aria-disabled for disabled State on non-native elements -->
<div role="button" aria-disabled="true" tabindex="-1">Submit</div>

<div role="tablist" aria-label="Product information">
  <button role="tab" aria-selected="true" aria-controls="desc-panel" id="tab-desc">
    Description
  </button>
  <button role="tab" aria-selected="false" aria-controls="spec-panel" id="tab-spec">
    Specifications
  </button>
  <button role="tab" aria-selected="false" aria-controls="review-panel" id="tab-review">
    Reviews
  </button>
</div>

<div role="tabpanel" id="desc-panel" aria-labelledby="tab-desc">
  <p>Product description content...</p>
</div>
<div role="tabpanel" id="spec-panel" aria-labelledby="tab-spec" hidden>
  <p>Technical specifications...</p>
</div>
<div role="tabpanel" id="review-panel" aria-labelledby="tab-review" hidden>
  <p>Customer reviews...</p>
</div>

<script>
(function() {
  const tablist = document.querySelector('[role="tablist"]');
  const tabs = tablist.querySelectorAll('[role="tab"]');
  const panels = document.querySelectorAll('[role="tabpanel"]');

  function activateTab(newTab) {
    tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
    panels.forEach(p => p.hidden = true);
    newTab.setAttribute('aria-selected', 'true');
    const panel = document.getElementById(newTab.getAttribute('aria-controls'));
    if (panel) panel.hidden = false;
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', () => activateTab(tab));
    tab.addEventListener('keydown', e => {
      const idx = [...tabs].indexOf(e.target);
      if (e.key === 'ArrowRight' && idx < tabs.length - 1) {
        e.preventDefault();
        activateTab(tabs[idx + 1]);
        tabs[idx + 1].focus();
      } else if (e.key === 'ArrowLeft' && idx > 0) {
        e.preventDefault();
        activateTab(tabs[idx - 1]);
        tabs[idx - 1].focus();
      }
    });
  });
})();
</script>

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1" id="btn-1">
      What is WCAG?
    </button>
  </h3>
  <div id="section-1" role="region" aria-labelledby="btn-1" hidden>
    <p>WCAG stands for Web Content Accessibility Guidelines...</p>
  </div>

  <h3>
    <button aria-expanded="false" aria-controls="section-2" id="btn-2">
      What is ARIA?
    </button>
  </h3>
  <div id="section-2" role="region" aria-labelledby="btn-2" hidden>
    <p>ARIA stands for Accessible Rich Internet Applications...</p>
  </div>
</div>

<script>
document.querySelectorAll('[aria-expanded]').forEach(btn => {
  btn.addEventListener('click', () => {
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', !expanded);
    const panel = document.getElementById(btn.getAttribute('aria-controls'));
    if (panel) panel.hidden = expanded;
  });
});
</script>

<button onclick="openDialog()">Open Feedback Form</button>

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title"
     id="feedback-dialog" hidden>
  <div role="document">
    <h2 id="dialog-title">Send Feedback</h2>
    <label for="feedback-text">Your message</label>
    <textarea id="feedback-text" rows="4"></textarea>
    <button onclick="submitFeedback()">Send</button>
    <button onclick="closeDialog()" aria-label="Close dialog">×</button>
  </div>
</div>

<div id="dialog-backdrop" hidden></div>

<script>
function openDialog() {
  const d = document.getElementById('feedback-dialog');
  const b = document.getElementById('dialog-backdrop');
  d.hidden = false;
  b.hidden = false;
  d.querySelector('button, input, textarea').focus();
}

function closeDialog() {
  document.getElementById('feedback-dialog').hidden = true;
  document.getElementById('dialog-backdrop').hidden = true;
  document.querySelector('[onclick="openDialog()"]').focus();
}
</script>

// aria-validator.js — validate ARIA usage on any page
async function validateARIAOnPage() {
  const violations = [];
  const elements = document.querySelectorAll('[role], [aria-*]');

  elements.forEach(el => {
    // Check for redundant ARIA on native elements
    const tag = el.tagName.toLowerCase();
    const role = el.getAttribute('role');
    const redundantRoles = {
      'nav': 'navigation', 'main': 'main', 'header': 'banner',
      'footer': 'contentinfo', 'aside': 'complementary', 'form': 'form',
      'button': 'button', 'a': 'link'
    };
    if (redundantRoles[tag] === role) {
      violations.push({
        element: `<${tag}>`,
        issue: `Redundant role="${role}" on native <${tag}> element`,
        severity: 'minor'
      });
    }

    // Check aria-expanded has matching aria-controls
    if (el.hasAttribute('aria-expanded') && !el.hasAttribute('aria-controls')) {
      violations.push({
        element: `<${tag}>`,
        issue: 'aria-expanded without aria-controls',
        severity: 'serious'
      });
    }
  });

  console.table(violations);
  return violations;
}

// Usage
validateARIAOnPage();

// redundant-role-checker.js
(function checkRedundantRoles() {
  const map = {
    'nav': 'navigation', 'main': 'main', 'header': 'banner',
    'footer': 'contentinfo', 'aside': 'complementary', 'button': 'button',
    'a': 'link', 'form': 'form', 'table': 'table'
  };
  const results = [];
  document.querySelectorAll('[role]').forEach(el => {
    const tag = el.tagName.toLowerCase();
    if (map[tag] === el.getAttribute('role')) {
      results.push({ element: `<${tag}>`, role: el.getAttribute('role'), status: 'REDUNDANT' });
    }
  });
  if (results.length === 0) {
    console.log('✅ No redundant ARIA roles found');
  } else {
    console.table(results);
  }
})();