Semantics and the accessibility tree.

<div class="cta cta--primary" onclick="goToSeats()">
  Continue to seats
</div>

<!-- role and tabindex make the tree say "button"…
     but Enter and Space still do nothing: ARIA adds no behaviour -->
<div class="cta cta--primary" role="button" tabindex="0"
     onclick="goToSeats()">
  Continue to seats
</div>

<form action="/booking/seats" method="post">
  …
  <button class="cta cta--primary" type="submit">
    Continue to seats
  </button>
</form>

RootWebArea "Passenger details · Railmoor"
  banner
    link "Railmoor home"
    navigation "Booking steps"
      list
        listitem  link "1 Journey"
        listitem  StaticText "2 Passengers" (current step)
        listitem  StaticText "3 Seats"
        listitem  StaticText "4 Payment"
  main
    form "Who is travelling?"
      heading "Who is travelling?" level=1
      group "Passenger 1 (adult)"
        textbox "First name" required value="Amara"
        textbox "Surname" required value=""
        textbox "Email for your tickets" required invalid
            description="Enter an email address like name@example.com"
        checkbox "I need a wheelchair space" checked=false
      button "Continue to seats"
  contentinfo
    link "Accessibility statement"

<label for="email">Email for your tickets</label>
<input id="email" type="email" name="email"
       autocomplete="email" required
       aria-invalid="true" aria-describedby="email-error">
<p id="email-error" class="field-error">
  Enter an email address like name@example.com
</p>

<!-- label element: the default for every form field -->
<label for="email">Email for your tickets</label>
<input id="email" type="email" placeholder="name@example.com">

<!-- content: buttons and links are named by their text -->
<button type="submit">Continue to seats</button>

<!-- aria-label: an icon-only control has no text to use -->
<button type="button" aria-label="Swap From and To">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- aria-labelledby: reuse visible text that lives elsewhere -->
<dialog aria-labelledby="summary-title">
  <h2 id="summary-title">Your booking</h2>
  …
</dialog>

<!-- alt: the host language's label for an image -->
<img src="/maps/kellbridge-ashcombe.svg"
     alt="Route map: Kellbridge Central to Ashcombe Junction, 4 stops">

<form aria-labelledby="who-title" novalidate>
  <h1 id="who-title">Who is travelling?</h1>

  <fieldset>
    <legend>Passenger 1 (adult)</legend>

    <label for="first">First name</label>
    <input id="first" name="first" autocomplete="given-name" required>

    <label for="surname">Surname</label>
    <input id="surname" name="surname" autocomplete="family-name" required>

    <label for="email">Email for your tickets</label>
    <input id="email" name="email" type="email" autocomplete="email"
           required aria-describedby="email-error">
    <p id="email-error" class="field-error" hidden></p>

    <label for="dob">Date of birth</label>
    <input id="dob" name="dob" autocomplete="bday" inputmode="numeric"
           aria-describedby="dob-hint">
    <p id="dob-hint">Day, month and year, for example 27 03 1958.
       Needed for the senior railcard discount.</p>

    <input id="wheelchair" type="checkbox" name="wheelchair">
    <label for="wheelchair">I need a wheelchair space</label>
  </fieldset>

  <button type="submit">Continue to seats</button>
</form>

// Tie a server-side message to its field so it is heard, not only seen.
export function showFieldError(id: string, message: string | null) {
  const input = document.getElementById(id) as HTMLInputElement;
  const note = document.getElementById(`${id}-error`)!;
  if (message) {
    note.textContent = message;          // words, not a red border alone
    note.hidden = false;
    input.setAttribute('aria-invalid', 'true');
  } else {
    note.textContent = '';
    note.hidden = true;                  // emptied too: a hidden node is still read when aria-describedby points at it
    input.removeAttribute('aria-invalid');
  }
}

<div class="coach">
  <div class="seat-row">
    <span class="seat seat--taken">3A</span>
    <span class="seat seat--free" onclick="pick('3B')">3B</span>
    <span class="aisle"></span>
    <span class="seat seat--free" onclick="pick('3C')">3C</span>
    <span class="seat seat--chosen" onclick="pick('3D')">3D</span>
  </div>
  …
</div>

<h2 id="coach-c">Coach C</h2>
<div role="grid" aria-labelledby="coach-c">
  <div role="row">
    <button role="gridcell" aria-disabled="true" tabindex="-1"
            aria-label="Seat 3A, window, taken">3A</button>
    <button role="gridcell" aria-selected="false" tabindex="-1"
            aria-label="Seat 3B, aisle, available">3B</button>
    <button role="gridcell" aria-selected="false" tabindex="-1"
            aria-label="Seat 3C, aisle, available">3C</button>
    <button role="gridcell" aria-selected="true" tabindex="0"
            aria-label="Seat 3D, window, available">3D</button>
  </div>
  …
</div>
<!-- Which seat holds the single tab stop, and the arrow keys,
     are covered in Keyboard access and focus management. -->

grid "Coach C"            (8 rows, all in the DOM)
  row                       (row 3)
    gridcell "Seat 3A, window, taken"       disabled
    gridcell "Seat 3B, aisle, available"    selected=false
    gridcell "Seat 3C, aisle, available"    selected=false
    gridcell "Seat 3D, window, available"   selected=true  focusable

<label for="from">From</label>
<input id="from" type="text" role="combobox"
       aria-autocomplete="list"
       aria-expanded="true"
       aria-controls="from-stations"
       aria-activedescendant="from-opt-2"
       aria-describedby="from-count">
<p id="from-count" class="visually-hidden">3 stations match</p>

<ul id="from-stations" role="listbox" aria-label="Stations">
  <li id="from-opt-1" role="option" aria-selected="false">Ashcombe Junction</li>
  <li id="from-opt-2" role="option" aria-selected="true">Ashford Lanes</li>
  <li id="from-opt-3" role="option" aria-selected="false">Rashleigh Halt</li>
</ul>

combobox "From" expanded=true autocomplete=list value="ash"
    controls → listbox "Stations"
    activedescendant → option "Ashford Lanes"
listbox "Stations"
  option "Ashcombe Junction"  selected=false  (1 of 3)
  option "Ashford Lanes"      selected=true   (2 of 3)
  option "Rashleigh Halt"     selected=false  (3 of 3)

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { PassengerForm } from './PassengerForm';

test('the email error is announced with the field', async () => {
  render(<PassengerForm />);
  const email = screen.getByRole('textbox', { name: 'Email for your tickets' });
  await userEvent.type(email, 'amara@');
  await userEvent.click(screen.getByRole('button', { name: 'Continue to seats' }));

  expect(email).toHaveAttribute('aria-invalid', 'true');
  expect(email).toHaveAccessibleDescription(
    'Enter an email address like name@example.com',
  );
});
// If Continue becomes a div again, getByRole('button') throws and the test fails.