W3C APG Patterns vs. Semantic HTML

<!-- Modern Semantic HTML5 Exclusive Accordion (0 JS needed!) -->
<details name="faq-group">
  <summary>Billing Information</summary>
  <div class="panel-content">
    <p>Billing address and payment details go here.</p>
  </div>
</details>

<details name="faq-group">
  <summary>Shipping Information</summary>
  <div class="panel-content">
    <p>Shipping addresses and carrier options.</p>
  </div>
</details>

/* Note:
Using name="faq-group" makes details elements exclusive: expanding one automatically collapses all others in the same group natively!
*/

<!-- W3C APG ARIA Accordion -->
<div class="accordion-group">
  <h3>
    <button type="button" class="accordion-trigger"
      aria-expanded="false"
      aria-controls="panel-billing"
      id="acc-btn-billing">
      Billing Information
    </button>
  </h3>
  <div id="panel-billing"
    role="region"
    aria-labelledby="acc-btn-billing"
    class="accordion-panel"
    hidden>
    <p>Billing address and payment details go here.</p>
  </div>
</div>

// --- JavaScript Implementation ---
// APG ARIA requires event listeners for click and keydown
const trigger = document.getElementById('acc-btn-billing');
const panel = document.getElementById('panel-billing');
trigger.addEventListener('click', () => {
  const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', String(!isExpanded));
  panel.hidden = isExpanded;
});

<!-- Modern Semantic HTML <dialog> Element -->
<dialog id="native-dialog">
  <form method="dialog">
    <h2>Confirm Deletion</h2>
    <p>Are you sure you want to remove this item?</p>
    <button value="delete" class="btn-danger">Delete</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

// --- Optional JavaScript ---
// Simple native invocation
const dialog = document.getElementById('native-dialog');
dialog.showModal(); // Automatically handles top-layer, backdrop, inert, and focus trap!
dialog.addEventListener('close', () => console.log(dialog.returnValue));

<!-- W3C APG ARIA Modal Dialog -->
<div id="modal-backdrop" class="backdrop" hidden></div>
<div id="aria-dialog" role="dialog" aria-modal="true" aria-labelledby="dlg-title" hidden>
  <h2 id="dlg-title">Confirm Deletion</h2>
  <p>Are you sure you want to remove this item?</p>
  <button type="button" id="dlg-confirm">Delete</button>
  <button type="button" id="dlg-cancel">Cancel</button>
</div>

// --- JavaScript Implementation ---
// Manual focus trap, inert toggling, and Esc handler required
function openAriaDialog(trigger) {
  dialog.hidden = false;
  backdrop.hidden = false;
  const focusables = dialog.querySelectorAll('button, [href], input');
  focusables[0].focus();
  document.addEventListener('keydown', trapKey);
}

<!-- Semantic HTML Checkbox with switch role -->
<label class="semantic-switch">
  <input type="checkbox" role="switch" name="notifications">
  <span class="switch-slider" aria-hidden="true"></span>
  <span>Email Notifications</span>
</label>

/* Note:
Fully keyboard accessible, participates in HTML form validation and submission, and works with JavaScript disabled.
*/

<!-- W3C APG ARIA Button Switch -->
<button type="button" role="switch" aria-checked="false" id="apg-switch" class="switch-btn">
  <span class="switch-label">Email Notifications</span>
  <span class="switch-track" aria-hidden="true">
    <span class="switch-thumb"></span>
  </span>
</button>

// --- JavaScript Implementation ---
const sw = document.getElementById('apg-switch');
sw.addEventListener('click', () => {
  const checked = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!checked));
});

<!-- Semantic HTML5 Range Input -->
<label for="sem-vol">Volume:</label>
<input type="range" id="sem-vol" name="volume" min="0" max="100" value="50">
<output for="sem-vol">50</output>

/* Note:
Native range inputs automatically support touch dragging, scroll wheel increments, mouse clicks, and all keyboard navigation.
*/

<!-- W3C APG ARIA Slider -->
<div class="slider-group">
  <span id="slider-lbl">Volume:</span>
  <div class="slider-rail" id="slider-rail">
    <div role="slider" tabindex="0"
      aria-labelledby="slider-lbl"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="50"
      id="apg-slider-thumb"
      class="slider-thumb"></div>
  </div>
</div>

// --- JavaScript Implementation ---
// Requires 60+ lines of drag math, touch support, and key handlers:
thumb.addEventListener('keydown', (e) => {
  let val = parseInt(thumb.getAttribute('aria-valuenow'), 10);
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') val = Math.min(100, val + 5);
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') val = Math.max(0, val - 5);
  thumb.setAttribute('aria-valuenow', val);
  thumb.style.left = val + '%';
});

<!-- Semantic HTML5 Meter -->
<label for="disk-meter">Disk Usage:</label>
<meter id="disk-meter" min="0" max="100" low="30" high="80" optimum="20" value="78">
  78%
</meter>

/* Note:
Browser renders native threshold color changes (green/yellow/red) based on low, high, and optimum attributes.
*/

<!-- W3C APG ARIA Meter -->
<div class="meter-group">
  <span id="disk-lbl">Disk Usage:</span>
  <div role="meter"
    aria-labelledby="disk-lbl"
    aria-valuenow="78"
    aria-valuemin="0"
    aria-valuemax="100"
    class="meter-track">
    <div class="meter-fill" style="width: 78%;"></div>
  </div>
</div>

<!-- Semantic HTML Button -->
<button type="button" class="btn-primary" onclick="doAction()">
  Save Changes
</button>

/* Note:
Requires 0 lines of helper code. Fully accessible, keyboard responsive, and form-aware out of the box.
*/

<!-- W3C APG ARIA Div Button -->
<div role="button" tabindex="0" id="apg-btn" class="custom-btn">
  Save Changes
</div>

// --- JavaScript Implementation ---
// Re-inventing what <button> does natively:
const btn = document.getElementById('apg-btn');
btn.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') doAction();
  else if (e.key === ' ') {
    e.preventDefault(); // Stop spacebar from scrolling page!
    doAction();
  }
});

<!-- Semantic HTML Anchor Element -->
<a href="/privacy" class="text-link">
  View Privacy Policy
</a>

/* Note:
Supports right-click, middle-click, command-click, bookmarking, hover status URL preview in browser bar, and screen reader links lists.
*/

<!-- W3C APG ARIA Span Link -->
<span role="link" tabindex="0" class="custom-link" id="apg-link">
  View Privacy Policy
</span>

// --- JavaScript Implementation ---
const link = document.getElementById('apg-link');
link.addEventListener('click', () => window.location.href = '/privacy');
link.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') window.location.href = '/privacy';
});

<!-- Semantic HTML Radio Group -->
<fieldset class="semantic-radiogroup">
  <legend>Subscription Tier:</legend>
  <label>
    <input type="radio" name="tier" value="monthly" checked>
    Monthly ($9)
  </label>
  <label>
    <input type="radio" name="tier" value="annual">
    Annual ($89)
  </label>
</fieldset>

/* Note:
Grouped under a semantic legend for assistive tech context; arrow key navigation works across all browsers natively.
*/

<!-- W3C APG ARIA Radio Group -->
<div role="radiogroup" aria-labelledby="rg-title" class="apg-radiogroup">
  <span id="rg-title">Subscription Tier:</span>
  <div role="radio" tabindex="0" aria-checked="true" class="apg-radio">Monthly ($9)</div>
  <div role="radio" tabindex="-1" aria-checked="false" class="apg-radio">Annual ($89)</div>
</div>

// --- JavaScript Implementation ---
// Requires roving tabindex management and keyboard listeners for all 4 arrow keys

<!-- Semantic HTML Checkbox with Indeterminate Property -->
<label>
  <input type="checkbox" id="sem-parent-box">
  All Permissions
</label>

// --- Optional JavaScript ---
// Simply set the native indeterminate property:
const parentBox = document.getElementById('sem-parent-box');
parentBox.indeterminate = true; // Browser natively renders mixed dash & announces to AT!

<!-- W3C APG ARIA Mixed Checkbox -->
<div role="checkbox" tabindex="0"
  aria-checked="mixed"
  id="apg-mixed-box"
  class="apg-checkbox">
  <span class="custom-box"></span>
  All Permissions
</div>

<!-- Semantic HTML Details Element -->
<details>
  <summary>What is WCAG 3.0?</summary>
  <p>WCAG 3.0 is the upcoming draft standard for web content accessibility guidelines.</p>
</details>

/* Note:
Natively accessible, expands automatically when users use browser Find (Ctrl+F), and requires 0 lines of JavaScript.
*/

<!-- W3C APG ARIA Disclosure Button -->
<button type="button" aria-expanded="false" aria-controls="faq-answer" id="faq-btn">
  What is WCAG 3.0?
</button>
<div id="faq-answer" hidden>
  <p>WCAG 3.0 is the upcoming draft standard for web content accessibility guidelines.</p>
</div>

// --- JavaScript Implementation ---
const btn = document.getElementById('faq-btn');
const ans = document.getElementById('faq-answer');
btn.addEventListener('click', () => {
  const exp = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!exp));
  ans.hidden = exp;
});

<!-- Semantic HTML Autocomplete with datalist -->
<label for="std-search">Search standards:</label>
<input type="text" id="std-search" list="standards-list" placeholder="Search standards...">
<datalist id="standards-list">
  <option value="WCAG 2.2">
  <option value="WCAG 3.0">
  <option value="Section 508">
  <option value="EN 301 549">
</datalist>

/* Note:
Supported in all modern browsers without any script. Provides native fuzzy matching and assistive technology integration.
*/

<!-- W3C APG ARIA Combobox -->
<div class="combobox-wrapper">
  <input type="text" role="combobox"
    aria-expanded="false"
    aria-autocomplete="list"
    aria-controls="cb-listbox"
    id="cb-input"
    placeholder="Search standards...">
  <ul role="listbox" id="cb-listbox" class="cb-listbox" hidden>
    <li role="option" id="opt-1">WCAG 2.2</li>
    <li role="option" id="opt-2">WCAG 3.0</li>
  </ul>
</div>

<!-- Modern Semantic HTML Popover API -->
<button type="button" popovertarget="nav-menu">
  Actions ▼
</button>

<div id="nav-menu" popover class="popover-card">
  <nav aria-label="Action options">
    <a href="/export">Export PDF</a>
    <a href="/duplicate">Duplicate</a>
    <button type="button" class="btn-danger">Delete</button>
  </nav>
</div>

/* Note:
Native Popover API renders in the browser Top Layer, features light-dismiss (clicking outside or pressing Esc closes it), and preserves standard Tab order.
*/

<!-- W3C APG ARIA Application Menu Button -->
<button type="button" aria-haspopup="menu" aria-expanded="false" id="menu-btn">
  Actions ▼
</button>
<ul role="menu" id="action-menu" aria-labelledby="menu-btn" hidden>
  <li role="menuitem" tabindex="-1">Export PDF</li>
  <li role="menuitem" tabindex="-1">Duplicate</li>
  <li role="menuitem" tabindex="-1">Delete</li>
</ul>

<!-- What HTML Offers Today: Multi-page navigation or Details group -->
<!-- Notice: HTML does NOT have a native <tabs> element! -->
<div class="callout-note">
  <strong>Spec Status:</strong> WHATWG & OpenUI have active proposals for &lt;tabs&gt;.
  Until standardized, the W3C APG ARIA Tabs pattern above is the normative industry standard.
</div>

/* Note:
Always ensure your tablist is treated as a single tab stop, with arrow keys switching tabs, and Tab jumping directly into the tabpanel.
*/

<!-- W3C APG Standard ARIA Tabs Pattern -->
<div class="tabs-container">
  <div role="tablist" aria-label="Audit Reports">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
      Automated Audit
    </button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
      Manual Audit
    </button>
  </div>
  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0">
    <p>Automated axe-core and Lighthouse findings.</p>
  </div>
  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
    <p>Screen reader and keyboard navigation notes.</p>
  </div>
</div>

// --- JavaScript Implementation ---
// Roving tabindex and Arrow key navigation:
const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach((tab, index) => {
  tab.addEventListener('keydown', (e) => {
    let newIndex = index;
    if (e.key === 'ArrowRight') newIndex = (index + 1) % tabs.length;
    else if (e.key === 'ArrowLeft') newIndex = (index - 1 + tabs.length) % tabs.length;
    if (newIndex !== index) {
      tabs[newIndex].focus();
      activateTab(tabs[newIndex]);
    }
  });
});

<!-- Semantic HTML Table -->
<table class="semantic-data-table">
  <caption>WCAG 3 Reporting Tiers</caption>
  <thead>
    <tr>
      <th scope="col">Tier</th>
      <th scope="col">Target</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Bronze</th>
      <td>Base Conformance</td>
    </tr>
  </tbody>
</table>

/* Note:
Provides native column and row header association with scope attributes without any ARIA attributes.
*/

<!-- W3C APG ARIA Table (Unnecessary when HTML <table> exists) -->
<div role="table" aria-label="WCAG 3 Tiers" class="apg-table">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Tier</div>
      <div role="columnheader">Target</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="cell">Bronze</div>
      <div role="cell">Base Conformance</div>
    </div>
  </div>
</div>

<!-- Semantic HTML Number Input -->
<label for="sem-qty">Quantity:</label>
<input type="number" id="sem-qty" name="quantity" min="1" max="10" step="1" value="1">

/* Note:
Automatically provides native stepper buttons, handles min/max constraints, and opens numeric keypad on iOS/Android.
*/

<!-- W3C APG ARIA Spinbutton -->
<div class="spinbutton-wrapper">
  <label id="qty-lbl">Quantity:</label>
  <div role="spinbutton" tabindex="0"
    aria-labelledby="qty-lbl"
    aria-valuenow="1"
    aria-valuemin="1"
    aria-valuemax="10"
    id="apg-spinner">1</div>
  <button type="button" id="spin-inc">+</button>
  <button type="button" id="spin-dec">-</button>
</div>

<!-- Modern Semantic HTML5 Landmarks -->
<header>...</header>
<nav aria-label="Main">...</nav>
<main>...</main>
<aside>...</aside>
<search>...</search>
<footer>...</footer>

/* Note:
HTML5 sectioning elements map directly to accessibility API landmark roles in all modern browsers without any ARIA markup.
*/

<!-- Obsolete ARIA Landmark Divs -->
<div role="banner">...</div>
<div role="navigation" aria-label="Main">...</div>
<div role="main">...</div>
<div role="contentinfo">...</div>

<!-- Same Semantic Implementation -->
<nav aria-label="Breadcrumb" class="breadcrumb-trail">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/plain-english/">WCAG 3 Explorer</a></li>
    <li><span aria-current="page">Pattern Lab</span></li>
  </ol>
</nav>

/* Note:
Using a <span> for the current page avoids placing an unclickable or misleading link on the active page.
*/

<!-- Accessible Breadcrumb Structure -->
<nav aria-label="Breadcrumb" class="breadcrumb-trail">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/plain-english/">WCAG 3 Explorer</a></li>
    <li><a href="/plain-english/patterns/" aria-current="page">Pattern Lab</a></li>
  </ol>
</nav>

<!-- Semantic Nested Details Tree for Documents -->
<div class="nested-details-tree">
  <details open>
    <summary>📁 src</summary>
    <div class="tree-children">
      <p>📄 index.astro</p>
      <p>📄 layout.astro</p>
    </div>
  </details>
</div>

/* Note:
Nested details works without JavaScript, but lacks the single-tab-stop arrow key navigation expected in file trees.
*/

<!-- W3C APG ARIA Tree View -->
<ul role="tree" aria-label="Project Files" class="apg-tree">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    <span>📁 src</span>
    <ul role="group">
      <li role="treeitem" tabindex="-1">📄 index.astro</li>
      <li role="treeitem" tabindex="-1">📄 layout.astro</li>
    </ul>
  </li>
</ul>

<!-- Modern CSS Scroll Snap Carousel -->
<div class="snap-carousel-wrapper">
  <div class="snap-scroller" tabindex="0" aria-label="Featured items gallery">
    <div class="snap-slide">Slide 1</div>
    <div class="snap-slide">Slide 2</div>
    <div class="snap-slide">Slide 3</div>
  </div>
  <div class="carousel-nav">
    <button type="button" class="btn-prev" aria-label="Previous slide">‹</button>
    <button type="button" class="btn-next" aria-label="Next slide">›</button>
  </div>
</div>

/* Note:
Native CSS scroll snap provides hardware-accelerated swipe on mobile and keyboard arrow scrolling when focused.
*/

<!-- W3C APG ARIA Carousel -->
<section role="region" aria-roledescription="carousel" aria-label="Featured Highlights">
  <button type="button" class="btn-pause">Pause</button>
  <div class="carousel-items" aria-live="off">
    <div role="group" aria-roledescription="slide" aria-label="1 of 3">Slide 1</div>
  </div>
</section>

<!-- Semantic HTML Output Element -->
<output class="status-box" for="input-field" id="sem-output">
  Changes saved successfully.
</output>

/* Note:
<output> natively maps to an accessible live region that notifies screen readers when content changes.
*/

<!-- W3C APG ARIA Assertive Alert -->
<div role="alert" class="alert-box" id="apg-alert">
  ⚠️ Critical: Your session will expire in 2 minutes.
</div>

<!-- Modern Popover Hint + ARIA Describedby -->
<button type="button" aria-describedby="modern-tip" popovertarget="modern-tip" class="icon-btn">
  🗑️ Delete
</button>
<div id="modern-tip" popover="hint" class="modern-tooltip">
  Permanently remove this entry
</div>

/* Note:
Meets WCAG 1.4.13: dismissible via Esc, hoverable (mouse can enter tooltip), and persistent until focus/hover leaves.
*/

<!-- W3C APG Accessible Tooltip -->
<button type="button" aria-describedby="tip-delete" class="icon-btn">
  🗑️ Delete
</button>
<div role="tooltip" id="tip-delete" class="apg-tooltip" hidden>
  Permanently remove this entry
</div>

<!-- Standard HTML Fieldset (Separate Tab Stops) -->
<fieldset class="toolbar-fieldset">
  <legend class="sr-only">Text Formatting</legend>
  <button type="button"><strong>B</strong></button>
  <button type="button"><em>I</em></button>
  <button type="button"><u>U</u></button>
</fieldset>

/* Note:
For simple forms, separate tab stops are acceptable; for rich apps, the APG roving toolbar is essential.
*/

<!-- W3C APG ARIA Toolbar Pattern -->
<div role="toolbar" aria-label="Text Formatting" class="apg-toolbar">
  <button type="button" tabindex="0" aria-label="Bold"><strong>B</strong></button>
  <button type="button" tabindex="-1" aria-label="Italic"><em>I</em></button>
  <button type="button" tabindex="-1" aria-label="Underline"><u>U</u></button>
</div>

<!-- Native HTML Table with Interactive Inputs -->
<table class="semantic-data-table">
  <caption class="sr-only">Project Milestones</caption>
  <thead>
    <tr>
      <th scope="col">Milestone</th>
      <th scope="col">Owner</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" value="WCAG 3 Mapping" aria-label="Milestone 1"></td>
      <td><input type="text" value="Alex R." aria-label="Owner 1"></td>
      <td>
        <select aria-label="Status 1">
          <option selected>Complete</option>
          <option>In Review</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

/* Note:
Native HTML table inputs require separate Tab stops for each cell, but require 0 lines of JavaScript.
*/

<!-- W3C APG ARIA Grid Pattern (Editable / Interactive Table) -->
<div role="grid" aria-label="Project Milestones" aria-rowcount="3" aria-colcount="3" class="apg-grid">
  <div role="row" aria-rowindex="1" class="grid-row header-row">
    <span role="columnheader" aria-colindex="1">Milestone</span>
    <span role="columnheader" aria-colindex="2">Owner</span>
    <span role="columnheader" aria-colindex="3">Status</span>
  </div>
  <div role="row" aria-rowindex="2" class="grid-row">
    <span role="gridcell" aria-colindex="1" tabindex="0">WCAG 3 Mapping</span>
    <span role="gridcell" aria-colindex="2" tabindex="-1">Alex R.</span>
    <span role="gridcell" aria-colindex="3" tabindex="-1">Complete</span>
  </div>
  <div role="row" aria-rowindex="3" class="grid-row">
    <span role="gridcell" aria-colindex="1" tabindex="-1">Contrast Lab</span>
    <span role="gridcell" aria-colindex="2" tabindex="-1">Daniel W.</span>
    <span role="gridcell" aria-colindex="3" tabindex="-1">In Review</span>
  </div>
</div>

<!-- Native Semantic HTML Listbox -->
<label for="sem-lb">Conformance Target:</label>
<select id="sem-lb" size="4" class="semantic-listbox">
  <option value="2.2-aa" selected>WCAG 2.2 Level AA</option>
  <option value="2.2-aaa">WCAG 2.2 Level AAA</option>
  <option value="3.0-bronze">WCAG 3.0 Bronze</option>
  <option value="3.0-silver">WCAG 3.0 Silver</option>
</select>

/* Note:
Native <select size="4"> provides complete scrollable listbox accessibility with zero JavaScript.
*/

<!-- W3C APG ARIA Listbox Pattern -->
<div role="listbox" aria-label="Conformance Target" tabindex="0" class="apg-listbox-widget" id="apg-lb">
  <div role="option" id="lb-opt-1" aria-selected="true" class="apg-lb-opt selected">WCAG 2.2 Level AA</div>
  <div role="option" id="lb-opt-2" aria-selected="false" class="apg-lb-opt">WCAG 2.2 Level AAA</div>
  <div role="option" id="lb-opt-3" aria-selected="false" class="apg-lb-opt">WCAG 3.0 Bronze</div>
  <div role="option" id="lb-opt-4" aria-selected="false" class="apg-lb-opt">WCAG 3.0 Silver</div>
</div>

<!-- Semantic Web Navigation (Recommended over ARIA Menubar) -->
<nav aria-label="Site Navigation" class="semantic-site-nav">
  <ul class="semantic-nav-list">
    <li><a href="/standards/">Standards</a></li>
    <li>
      <button type="button" popovertarget="nav-dropdown" class="nav-popover-btn">
        Guidelines ▼
      </button>
      <div id="nav-dropdown" popover class="nav-popover-menu">
        <a href="/wcag22/">WCAG 2.2</a>
        <a href="/wcag3/">WCAG 3.0</a>
      </div>
    </li>
    <li><a href="/about/">About</a></li>
  </ul>
</nav>

/* Note:
Semantic <nav> maintains web link discoverability and standard browser Tab navigation.
*/

<!-- W3C APG ARIA Application Menubar Pattern -->
<div role="menubar" aria-label="Editor Menu" class="apg-menubar" id="apg-menubar-demo">
  <div role="menuitem" aria-haspopup="true" aria-expanded="false" tabindex="0" class="apg-m-item" id="m-file">
    File
    <div role="menu" aria-label="File Options" class="apg-submenu" hidden>
      <div role="menuitem" tabindex="-1">New Document</div>
      <div role="menuitem" tabindex="-1">Export PDF</div>
    </div>
  </div>
  <div role="menuitem" tabindex="-1" class="apg-m-item">Edit</div>
  <div role="menuitem" tabindex="-1" class="apg-m-item">View</div>
</div>

<!-- Native HTML <dialog> as Alert Dialog -->
<dialog id="alert-dialog-el" class="semantic-alert-dialog">
  <form method="dialog">
    <h3>Discard Draft?</h3>
    <p>You have unsaved changes. If you leave now, your edits will be permanently lost.</p>
    <div class="modal-actions">
      <button value="cancel" autofocus class="demo-btn">Keep Editing</button>
      <button value="discard" class="demo-btn btn-danger">Discard</button>
    </div>
  </form>
</dialog>

/* Note:
Using autofocus on "Keep Editing" prevents accidental destructive submission.
*/

<!-- W3C APG ARIA Alert Dialog Pattern -->
<div role="alertdialog" aria-modal="true" aria-labelledby="ad-title" aria-describedby="ad-desc" class="apg-alert-dialog">
  <h3 id="ad-title">Discard Draft?</h3>
  <p id="ad-desc">You have unsaved changes. If you leave now, your edits will be permanently lost.</p>
  <div class="ad-actions">
    <button type="button" class="btn-cancel" id="ad-cancel">Keep Editing</button>
    <button type="button" class="btn-danger" id="ad-confirm">Discard</button>
  </div>
</div>

<!-- Semantic HTML Feed with Articles -->
<section aria-label="WCAG Updates Stream" class="semantic-feed">
  <article class="feed-card">
    <header><h3>WCAG 3 Working Draft Published</h3></header>
    <p>New reporting-tier conformance model available for public review.</p>
  </article>
  <article class="feed-card">
    <header><h3>APCA Contrast Lab Added</h3></header>
    <p>Interactive tool comparing WCAG 2 contrast ratios with WCAG 3 APCA.</p>
  </article>
</section>

/* Note:
Semantic articles provide instant landmark structure for assistive technologies without complex roving tabindex.
*/

<!-- W3C APG ARIA Feed Pattern -->
<div role="feed" aria-label="WCAG Updates Feed" aria-busy="false" class="apg-feed">
  <article role="article" tabindex="0" aria-posinset="1" aria-setsize="2" class="feed-card">
    <h4>WCAG 3 Working Draft Published</h4>
    <p>New reporting-tier conformance model available for public review.</p>
  </article>
  <article role="article" tabindex="0" aria-posinset="2" aria-setsize="2" class="feed-card">
    <h4>APCA Contrast Lab Added</h4>
    <p>Interactive tool comparing WCAG 2 contrast ratios with WCAG 3 APCA.</p>
  </article>
</div>

<!-- Semantic HTML Paired Range Inputs -->
<fieldset class="semantic-range-pair">
  <legend>Budget Range ($):</legend>
  <label>Min: <input type="range" id="sem-min" min="0" max="100" value="20"></label>
  <label>Max: <input type="range" id="sem-max" min="0" max="100" value="80"></label>
</fieldset>

/* Note:
Separate labeled range inputs work 100% natively on every mobile and desktop browser without JavaScript.
*/

<!-- W3C APG ARIA Multi-Thumb Range Slider -->
<div class="apg-multi-slider">
  <div class="slider-readout">Budget: $<span id="min-val">20</span> - $<span id="max-val">80</span></div>
  <div class="range-rail" id="multi-rail">
    <div class="range-fill" id="multi-fill" style="left: 20%; width: 60%;"></div>
    <div role="slider" tabindex="0" aria-label="Minimum Budget" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" class="thumb thumb-min" id="thumb-min" style="left: 20%;"></div>
    <div role="slider" tabindex="0" aria-label="Maximum Budget" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" class="thumb thumb-max" id="thumb-max" style="left: 80%;"></div>
  </div>
</div>

<!-- Semantic HTML Table with Details for Hierarchy -->
<table class="semantic-tree-table">
  <thead>
    <tr><th>Name</th><th>Type</th><th>Size</th></tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">
        <details open>
          <summary>📂 src/</summary>
          <table>
            <tr><td>📄 index.astro</td><td>Astro</td><td>12 KB</td></tr>
          </table>
        </details>
      </td>
    </tr>
  </tbody>
</table>

/* Note:
Nested details works for document disclosure, but lacks 2D arrow-key roving focus.
*/

<!-- W3C APG ARIA Treegrid Pattern -->
<div role="treegrid" aria-label="Directory Treegrid" class="apg-treegrid">
  <div role="row" aria-rowindex="1" class="tg-row tg-header">
    <span role="columnheader">Name</span>
    <span role="columnheader">Type</span>
    <span role="columnheader">Size</span>
  </div>
  <div role="row" aria-rowindex="2" aria-level="1" aria-expanded="true" class="tg-row">
    <span role="gridcell" tabindex="0">📂 src/</span>
    <span role="gridcell" tabindex="-1">Folder</span>
    <span role="gridcell" tabindex="-1">--</span>
  </div>
  <div role="row" aria-rowindex="3" aria-level="2" class="tg-row tg-child">
    <span role="gridcell" tabindex="-1">📄 index.astro</span>
    <span role="gridcell" tabindex="-1">Astro</span>
    <span role="gridcell" tabindex="-1">12 KB</span>
  </div>
</div>

<!-- Modern CSS Resizable Pane with Semantic Range Fallback -->
<div class="css-split-layout">
  <div class="css-resizable-pane">
    <p>Resizable Navigation (Drag bottom-right corner)</p>
  </div>
  <div class="main-content-pane">
    <p>Main Workspace</p>
  </div>
</div>

/* Note:
CSS resize: horizontal enables native browser engine resizing without JavaScript.
*/

<!-- W3C APG ARIA Window Splitter Pattern -->
<div class="apg-split-container">
  <div class="pane pane-left" id="pane-1" style="width: 40%;">Primary Navigation</div>
  <div role="separator" tabindex="0" aria-orientation="vertical" aria-valuenow="40" aria-valuemin="15" aria-valuemax="85" aria-controls="pane-1" aria-label="Resize Navigation Pane" class="apg-splitter-handle" id="apg-splitter"></div>
  <div class="pane pane-right" id="pane-2" style="width: 60%;">Main Workspace</div>
</div>