Screen Reader Optimizer

Visual DOM                    Accessibility Tree
-----------                   ------------------
<nav>                    -->  navigation landmark
  <ul>                   -->  list (3 items)
    <li><a href="/">     -->  link "Home"
    <li><a href="/about">-->  link "About"
    <li><a href="/blog"> -->  link "Blog"

<!-- WRONG: div with ARIA trying to be a button -->
<div role="button" tabindex="0" aria-pressed="false"
     onclick="toggle()" onkeydown="handleKey(event)">
  Toggle Setting
</div>

<!-- RIGHT: native button with full behavior for free -->
<button type="button" aria-pressed="false" onclick="toggle()">
  Toggle Setting
</button>

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1" tabindex="0">
    Profile
  </button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">
    Security
  </button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">
    Notifications
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
  <!-- Profile content -->
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
  <!-- Security content -->
</div>
<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" tabindex="0" hidden>
  <!-- Notifications content -->
</div>

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach(tab => {
  tab.addEventListener('keydown', (e) => {
    const index = Array.from(tabs).indexOf(e.target);
    let newIndex;

    switch (e.key) {
      case 'ArrowRight':
        newIndex = (index + 1) % tabs.length;
        break;
      case 'ArrowLeft':
        newIndex = (index - 1 + tabs.length) % tabs.length;
        break;
      case 'Home':
        newIndex = 0;
        break;
      case 'End':
        newIndex = tabs.length - 1;
        break;
      default:
        return;
    }

    e.preventDefault();
    activateTab(tabs[newIndex]);
  });
});

function activateTab(tab) {
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  tab.focus();
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
}

<div role="dialog" aria-modal="true" aria-labelledby="dialog-title"
     aria-describedby="dialog-desc">
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p id="dialog-desc">
    This will permanently delete 3 files. This action cannot be undone.
  </p>
  <div class="dialog-actions">
    <button type="button" onclick="closeDialog()">Cancel</button>
    <button type="button" onclick="confirmDelete()" class="danger">
      Delete Files
    </button>
  </div>
</div>

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="sect1-content"
            id="sect1-header">
      Shipping Information
    </button>
  </h3>
  <div id="sect1-content" role="region" aria-labelledby="sect1-header"
       hidden>
    <p>We ship to all 50 states...</p>
  </div>
</div>

<label for="city-input">City</label>
<div class="combobox-wrapper">
  <input type="text" id="city-input" role="combobox"
         aria-expanded="false" aria-autocomplete="list"
         aria-controls="city-listbox" aria-activedescendant="">
  <ul id="city-listbox" role="listbox" hidden>
    <li role="option" id="city-1">Chicago</li>
    <li role="option" id="city-2">Charlotte</li>
    <li role="option" id="city-3">Charleston</li>
  </ul>
</div>

<!-- Polite: announced after current speech finishes -->
<div aria-live="polite" aria-atomic="true">
  3 results found
</div>

<!-- Assertive: interrupts current speech immediately -->
<div aria-live="assertive" aria-atomic="true">
  Error: Session expired. Please log in again.
</div>

<!-- Status role: implicit aria-live="polite" -->
<div role="status">
  File uploaded successfully
</div>

<!-- Alert role: implicit aria-live="assertive" -->
<div role="alert">
  Payment failed. Please check your card details.
</div>

<!-- Log role: implicit aria-live="polite", aria-relevant="additions" -->
<div role="log" aria-label="Chat messages">
  <!-- New messages appended here -->
</div>

<!-- Progress updates -->
<div role="progressbar" aria-valuenow="65" aria-valuemin="0"
     aria-valuemax="100" aria-label="Upload progress">
</div>

// Debounced live region update
const statusRegion = document.getElementById('search-status');
let debounceTimer;

function updateResultCount(count) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    statusRegion.textContent = `${count} results found`;
  }, 1000);
}

<!-- Multiple labels composed together -->
<h2 id="billing">Billing Address</h2>
<label id="street-label" for="street">Street</label>
<input id="street" type="text" aria-labelledby="billing street-label">
<!-- Screen reader announces: "Billing Address Street, edit text" -->

<!-- Icon-only button -->
<button aria-label="Close dialog">
  <svg aria-hidden="true"><!-- X icon --></svg>
</button>

<!-- Redundant link with image and text -->
<a href="/profile">
  <img src="avatar.jpg" alt="">
  My Profile
</a>
<!-- alt="" prevents "avatar.jpg My Profile" double announcement -->

<!-- Group of radio buttons -->
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
  <label><input type="radio" name="contact" value="text"> Text message</label>
</fieldset>

/* Screen-reader only utility class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}