Chapitre 16.3 — Snippets prêts à copier

<a href="#contenu" class="skip-link">Aller au contenu principal</a>
<!-- ... navigation ... -->
<main id="contenu" tabindex="-1">…</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 0; /* devient visible au focus clavier */
}

.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;
}

// Option A : aria-label sur le bouton, icône décorative masquée
<button type="button" aria-label="Rechercher">
  <SearchIcon aria-hidden="true" focusable="false" />
</button>
 
// Option B : texte visible pour le lecteur d'écran
<button type="button">
  <SearchIcon aria-hidden="true" focusable="false" />
  <span className="sr-only">Rechercher</span>
</button>

import { useState, useCallback } from 'react'
 
export function useAnnounce() {
  const [message, setMessage] = useState('')
  const announce = useCallback((msg: string) => {
    setMessage('')                       // reset pour re-déclencher
    requestAnimationFrame(() => setMessage(msg))
  }, [])
  const Announcer = () => (
    <div aria-live="polite" role="status" className="sr-only">
      {message}
    </div>
  )
  return { announce, Announcer }
}
 
// Usage : const { announce, Announcer } = useAnnounce()
// announce(`${count} cours trouvés`)  ·  <Announcer /> monté une fois

<dialog id="confirm">
  <h2>Quitter le cours ?</h2>
  <p>Ta progression est enregistrée.</p>
  <form method="dialog">
    <button value="cancel">Annuler</button>
    <button value="ok">Quitter</button>
  </form>
</dialog>

const dlg = document.getElementById('confirm')
document.getElementById('open').addEventListener('click', () => dlg.showModal())
// showModal() : piège le focus, active Échap, rend le reste inerte,
// et le focus revient au déclencheur à la fermeture.

function ChampEmail({ erreur }) {
  return (
    <p>
      <label htmlFor="email">Adresse e-mail</label>
      <input
        id="email"
        type="email"
        autoComplete="email"
        aria-invalid={erreur ? 'true' : undefined}
        aria-describedby={erreur ? 'email-erreur' : undefined}
      />
      {erreur && (
        <span id="email-erreur" role="alert">
          {erreur}
        </span>
      )}
    </p>
  )
}