Interaction lab

A focused excerpt. Use the full example and test its behavior in context.

<label for="email">Email (required)</label>
<input id="email" type="email" autocomplete="email"
  required aria-describedby="email-hint">
<p id="email-hint">For example, [email protected].</p>
<p id="email-error" hidden></p>

// After an unsuccessful submit:
email.setAttribute("aria-invalid", "true");
email.setAttribute("aria-describedby", "email-hint email-error");
error.textContent = "Enter an email such as [email protected].";
error.hidden = false;
// Add a linked error to the summary, then focus the summary.
summary.hidden = false;
summary.focus();

// When the error is corrected, keep the permanent hint:
email.removeAttribute("aria-invalid");
email.setAttribute("aria-describedby", "email-hint");
error.hidden = true;

A focused excerpt. Use the full example and test its behavior in context.

<button id="open-notes" type="button">Open notes</button>
<dialog id="notes" aria-labelledby="notes-title">
  <h2 id="notes-title" tabindex="-1">Practice notes</h2>
  <p>Read the notes, then close this dialog.</p>
  <button id="close-notes" type="button">Close dialog</button>
</dialog>

const opener = document.getElementById("open-notes");
const dialog = document.getElementById("notes");
opener.addEventListener("click", () => {
  dialog.showModal();
  document.getElementById("notes-title").focus();
});
document.getElementById("close-notes").addEventListener("click",
  () => dialog.close());
dialog.addEventListener("close", () => opener.focus());
// Native Escape dismisses the modal. The full demo additionally
// wraps Tab from its last control to its first, and Shift+Tab
// from its first control (or initial heading) to its last.
// Scope any wrapping handler to the open dialog only.

A focused excerpt. Use the full example and test its behavior in context.

// Run after adding tablist, tab and tabpanel roles.
// Each tab's aria-controls points to its labelled panel.
function activate(next) {
  tabs.forEach((tab, index) => {
    const selected = index === next;
    tab.setAttribute("aria-selected", String(selected));
    tab.tabIndex = selected ? 0 : -1;
    panels[index].hidden = !selected;
  });
}

// On Left/Right/Home/End: move focus, not the displayed panel.
function moveFocus(next) {
  tabs.forEach((tab, index) => {
    tab.tabIndex = index === next ? 0 : -1;
  });
  tabs[next].focus();
}
// Activate on click. Native buttons also produce a click for
// Enter and Space. Do not cancel their default key behavior.
tabs.forEach((tab, index) => {
  tab.addEventListener("click", () => activate(index));
});