Доступность в коде: семантика, фокус, ARIA

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Coffee House — before</title>
    <style>
      body { font-family: system-ui, sans-serif; margin: 0 1rem; }
      *:focus { outline: none; }
      .muted { color: #aaa; }
      .tab { display: inline-block; padding: 4px 8px; cursor: pointer; }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="menu-toggle" onclick="document.querySelector('.menu').hidden = !document.querySelector('.menu').hidden">☰</div>
      <ul class="menu" hidden>
        <li><a href="#drinks">Drinks</a></li>
        <li><a href="#delivery">Delivery</a></li>
      </ul>
      <button class="search"><svg width="16" height="16" viewBox="0 0 16 16"><circle cx="7" cy="7" r="5" fill="none" stroke="black" /></svg></button>
    </div>
    <h1>Coffee House</h1>
    <img src="/latte.svg" />
    <div class="tabs">
      <div class="tab" onclick="">Coffee</div>
      <div class="tab" onclick="">Tea</div>
    </div>
    <p class="muted">Open daily 8:00–22:00</p>
    <span>Phone</span> <input type="tel" />
    <div class="button" onclick="alert('booked')">Book a table</div>
  </body>
</html>

body { font-family: system-ui, sans-serif; color: #1f2328; background: #fff; margin: 0 1rem; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid #1a56db; outline-offset: 2px; }
[role="tab"][aria-selected="true"] { border-bottom: 3px solid currentColor; }
dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.error { color: #b42318; }
#site-menu a { display: inline-block; padding: 8px 4px; }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Coffee House — accessible version</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <header>
      <nav aria-label="Main">
        <button type="button" id="menu-button" aria-expanded="false" aria-controls="site-menu">
          Menu
        </button>
        <ul id="site-menu" hidden>
          <li><a href="#drinks">Drinks</a></li>
          <li><a href="#delivery">Delivery</a></li>
          <li><a href="#contacts">Contacts</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Coffee House</h1>

      <section id="drinks">
        <h2 id="drinks-heading">Drinks</h2>
        <div role="tablist" aria-labelledby="drinks-heading">
          <button type="button" role="tab" id="tab-coffee" aria-selected="true" aria-controls="panel-coffee">Coffee</button>
          <button type="button" role="tab" id="tab-tea" aria-selected="false" aria-controls="panel-tea" tabindex="-1">Tea</button>
          <button type="button" role="tab" id="tab-desserts" aria-selected="false" aria-controls="panel-desserts" tabindex="-1">Desserts</button>
        </div>
        <div role="tabpanel" id="panel-coffee" aria-labelledby="tab-coffee" tabindex="0">
          <p>Espresso, flat white, latte.</p>
        </div>
        <div role="tabpanel" id="panel-tea" aria-labelledby="tab-tea" tabindex="0" hidden>
          <p>Green, black, herbal.</p>
        </div>
        <div role="tabpanel" id="panel-desserts" aria-labelledby="tab-desserts" tabindex="0" hidden>
          <p>Cheesecake, croissant.</p>
        </div>
      </section>

      <section id="delivery">
        <h2>Book a table</h2>
        <button type="button" id="book-button">Book a table</button>
        <p id="booking-status" role="status" aria-live="polite"></p>
      </section>
    </main>

    <dialog id="book-dialog" aria-labelledby="book-title">
      <h2 id="book-title">Book a table</h2>
      <form id="book-form" novalidate>
        <label for="book-name">Name</label>
        <input id="book-name" name="name" autocomplete="name" />

        <label for="book-phone">Phone</label>
        <input
          id="book-phone"
          name="phone"
          type="tel"
          autocomplete="tel"
          aria-describedby="book-phone-hint book-phone-error"
        />
        <p id="book-phone-hint">We will only call to confirm the booking.</p>
        <p id="book-phone-error" class="error"></p>

        <button type="submit">Confirm</button>
        <button type="button" id="book-cancel">Cancel</button>
      </form>
    </dialog>

    <footer id="contacts"><p>Almaty, open daily 8:00–22:00</p></footer>
    <script type="module" src="/app.js"></script>
  </body>
</html>

// 1. Disclosure: the site menu
const menuButton = document.querySelector("#menu-button");
const menu = document.querySelector("#site-menu");

function setMenuOpen(open) {
  menuButton.setAttribute("aria-expanded", String(open));
  menu.hidden = !open;
}

menuButton.addEventListener("click", () => {
  setMenuOpen(menuButton.getAttribute("aria-expanded") !== "true");
});

menuButton.parentElement.addEventListener("keydown", (event) => {
  if (event.key === "Escape" && !menu.hidden) {
    setMenuOpen(false);
    menuButton.focus();
  }
});

// 2. Tabs: roving tabindex, arrows, Home/End, automatic activation
const tabs = [...document.querySelectorAll('[role="tab"]')];

function selectTab(tab) {
  for (const t of tabs) {
    const selected = t === tab;
    t.setAttribute("aria-selected", String(selected));
    t.tabIndex = selected ? 0 : -1;
    document.getElementById(t.getAttribute("aria-controls")).hidden = !selected;
  }
  tab.focus();
}

for (const tab of tabs) {
  tab.addEventListener("click", () => selectTab(tab));
  tab.addEventListener("keydown", (event) => {
    const i = tabs.indexOf(tab);
    const next = {
      ArrowRight: tabs[(i + 1) % tabs.length],
      ArrowLeft: tabs[(i - 1 + tabs.length) % tabs.length],
      Home: tabs[0],
      End: tabs[tabs.length - 1],
    }[event.key];
    if (next) {
      event.preventDefault();
      selectTab(next);
    }
  });
}

// 3. Modal dialog: native <dialog> + showModal()
const bookButton = document.querySelector("#book-button");
const dialog = document.querySelector("#book-dialog");
const form = document.querySelector("#book-form");
const phone = document.querySelector("#book-phone");
const phoneError = document.querySelector("#book-phone-error");
const bookingStatus = document.querySelector("#booking-status");

bookButton.addEventListener("click", () => dialog.showModal());
document.querySelector("#book-cancel").addEventListener("click", () => dialog.close());

form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!phone.value.trim()) {
    phone.setAttribute("aria-invalid", "true");
    phoneError.textContent = "Enter a phone number.";
    phone.focus();
    return;
  }
  phone.removeAttribute("aria-invalid");
  phoneError.textContent = "";
  dialog.close();
  bookingStatus.textContent = "Table booked. We will call you to confirm.";
});

npm init -y
npm pkg set type=module
npm install -D @playwright/test @axe-core/playwright vite typescript @types/node
npx playwright install chromium

import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "tests",
  use: { baseURL: "http://127.0.0.1:4173" },
  webServer: {
    command: "npx vite --host 127.0.0.1 --port 4173 --strictPort",
    url: "http://127.0.0.1:4173",
    reuseExistingServer: true,
  },
});

import AxeBuilder from "@axe-core/playwright";
import { expect, test, type Page } from "@playwright/test";

const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];

async function expectNoAxeViolations(page: Page) {
  const results = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
  expect(results.violations).toEqual([]);
}

let errors: string[] = [];

test.beforeEach(async ({ page }) => {
  errors = [];
  page.on("console", (msg) => {
    if (msg.type() === "error") errors.push(msg.text());
  });
  page.on("pageerror", (error) => errors.push(error.message));
  await page.goto("/");
});

test.afterEach(() => {
  expect(errors).toEqual([]);
});

test("axe: no violations in closed, menu-open and dialog-open states", async ({ page }) => {
  await expectNoAxeViolations(page);

  await page.getByRole("button", { name: "Menu" }).click();
  await expectNoAxeViolations(page);

  await page.getByRole("button", { name: "Book a table" }).click();
  await expectNoAxeViolations(page);
});

test("disclosure menu: Enter opens, Escape closes and returns focus", async ({ page }) => {
  const toggle = page.getByRole("button", { name: "Menu" });

  await page.keyboard.press("Tab");
  await expect(toggle).toBeFocused();

  await page.keyboard.press("Enter");
  await expect(toggle).toHaveAttribute("aria-expanded", "true");
  await page.keyboard.press("Tab");
  await expect(page.getByRole("link", { name: "Drinks" })).toBeFocused();

  await page.keyboard.press("Escape");
  await expect(toggle).toHaveAttribute("aria-expanded", "false");
  await expect(page.getByRole("link", { name: "Drinks" })).toBeHidden();
  await expect(toggle).toBeFocused();
});

test("tabs: one tab stop, arrows and Home/End move selection", async ({ page }) => {
  const coffee = page.getByRole("tab", { name: "Coffee" });
  const tea = page.getByRole("tab", { name: "Tea" });
  const desserts = page.getByRole("tab", { name: "Desserts" });

  await page.keyboard.press("Tab"); // Menu
  await page.keyboard.press("Tab"); // the selected tab
  await expect(coffee).toBeFocused();

  await page.keyboard.press("ArrowRight");
  await expect(tea).toBeFocused();
  await expect(tea).toHaveAttribute("aria-selected", "true");
  await expect(page.getByRole("tabpanel", { name: "Tea" })).toBeVisible();
  await expect(page.getByRole("tabpanel", { name: "Coffee" })).toBeHidden();

  await page.keyboard.press("End");
  await expect(desserts).toBeFocused();
  await page.keyboard.press("ArrowRight");
  await expect(coffee).toBeFocused();

  await page.keyboard.press("Tab"); // leaves the tablist for the panel
  await expect(page.getByRole("tabpanel", { name: "Coffee" })).toBeFocused();
});

test("dialog: focus moves in, stays in, Escape returns it", async ({ page }) => {
  const open = page.getByRole("button", { name: "Book a table" });
  const dialog = page.getByRole("dialog", { name: "Book a table" });

  await open.focus();
  await page.keyboard.press("Enter");
  await expect(dialog).toBeVisible();
  await expect(page.getByLabel("Name")).toBeFocused();

  for (let i = 0; i < 6; i++) {
    await page.keyboard.press("Tab");
    const outside = await page.evaluate(() => {
      const active = document.activeElement;
      const dlg = document.querySelector("dialog");
      return active !== document.body && !dlg?.contains(active);
    });
    expect(outside).toBe(false);
  }

  await page.keyboard.press("Escape");
  await expect(dialog).toBeHidden();
  await expect(open).toBeFocused();
});

test("dialog form: error is announced, success goes to the live region", async ({ page }) => {
  await page.getByRole("button", { name: "Book a table" }).click();
  const phone = page.getByLabel("Phone");

  await page.getByRole("button", { name: "Confirm" }).click();
  await expect(phone).toBeFocused();
  await expect(phone).toHaveAttribute("aria-invalid", "true");
  await expect(phone).toHaveAccessibleDescription(/Enter a phone number\./);

  await phone.fill("+7 701 123 45 67");
  await page.getByRole("button", { name: "Confirm" }).click();
  await expect(page.getByRole("dialog")).toBeHidden();
  await expect(page.getByRole("status")).toHaveText("Table booked. We will call you to confirm.");
  await expect(page.getByRole("button", { name: "Book a table" })).toBeFocused();
});

$ npx playwright test --reporter=list
Running 5 tests using 1 worker

  ok 1 tests\a11y.spec.ts:26:1 › axe: no violations in closed, menu-open and dialog-open states (943ms)
  ok 2 tests\a11y.spec.ts:36:1 › disclosure menu: Enter opens, Escape closes and returns focus (135ms)
  ok 3 tests\a11y.spec.ts:53:1 › tabs: one tab stop, arrows and Home/End move selection (128ms)
  ok 4 tests\a11y.spec.ts:77:1 › dialog: focus moves in, stays in, Escape returns it (154ms)
  ok 5 tests\a11y.spec.ts:101:1 › dialog form: error is announced, success goes to the live region (220ms)

  5 passed (6.1s)

/* WCAG 2.2, 2.5.8: a target is at least 24×24 CSS px */
#site-menu a { display: inline-block; padding: 8px 4px; }

import AxeBuilder from "@axe-core/playwright";
import { chromium } from "@playwright/test";

const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
const browser = await chromium.launch();
const context = await browser.newContext(); // AxeBuilder needs a page from a context

for (const path of ["/before.html", "/"]) {
  const page = await context.newPage();
  await page.goto(`http://127.0.0.1:4173${path}`);

  const { violations } = await new AxeBuilder({ page }).withTags(WCAG_TAGS).analyze();
  console.log(`\n${path}: ${violations.length} axe violation(s)`);
  for (const v of violations) console.log(`  ${v.id} (${v.impact}) × ${v.nodes.length}`);

  const stops = [];
  for (let i = 0; i < 5; i++) {
    await page.keyboard.press("Tab");
    stops.push(
      await page.evaluate(() => {
        const el = document.activeElement;
        if (el === document.body) return "(page left)";
        const name = el.getAttribute("aria-label") || el.textContent.trim().slice(0, 20);
        return `${el.tagName.toLowerCase()} "${name}"`;
      }),
    );
  }
  console.log(`  Tab ×5: ${stops.join(" → ")}`);
  await page.close();
}
await browser.close();

$ node report.mjs

/before.html: 4 axe violation(s)
  button-name (critical) × 1
  color-contrast (serious) × 1
  image-alt (critical) × 1
  label (critical) × 1
  Tab ×5: button "" → input "" → (page left) → button "" → input ""

/: 0 axe violation(s)
  Tab ×5: button "Menu" → button "Coffee" → div "Espresso, flat white" → button "Book a table" → (page left)