Navigation

<!-- Pas de confirmation — suppression immédiate -->
<button onclick="deleteAccount()">Supprimer le compte</button>

<!-- Correct : déclenche d'abord une boîte de dialogue de confirmation -->
<button onclick="confirmDelete()">Supprimer le compte</button>
<!-- qui affiche : -->
<dialog>
  <p>Êtes-vous sûr ? Cette action est irréversible.</p>
  <button onclick="deleteAccount()">Oui, supprimer mon compte</button>
  <button onclick="closeDialog()">Annuler</button>
</dialog>

<!-- Peu clair -->
<a href="/about">Cliquez ici</a>
<a href="/terms">En savoir plus</a>
<a href="/contact">______</a>

<!-- Correct : texte de lien descriptif -->
<a href="/about">À propos de notre entreprise</a>
<a href="/terms">Lire nos Conditions d'utilisation</a>
<a href="/contact">Contacter l'équipe de support</a>

<!-- Si vous devez utiliser "en savoir plus", fournissez un contexte accessible -->
<a href="/blog/post-1">
  En savoir plus <span class="sr-only">sur nos résultats du T4</span>
</a>

// _app.jsx ou layout.jsx
export default function Layout({ children }) {
  return (
    <>
      <Navigation /> {/* même composant sur chaque page */}
      <main>{children}</main>
    </>
  )
}

<!-- Menu déroulant non natif sans gestionnaire de clavier — inaccessible -->
<div role="listbox">
  <div role="option" onclick="select('US')">États-Unis</div>
  <div role="option" onclick="select('CA')">Canada</div>
</div>

listbox.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowDown') focusNext()
  if (e.key === 'ArrowUp') focusPrev()
  if (e.key === 'Enter' || e.key === ' ') selectFocused()
  if (e.key === 'Escape') closeDropdown()
})

<!-- Lien vide — pas de texte, pas d'aria-label -->
<a href="/home"></a>

<!-- Lien d'image sans alt — le lecteur d'écran ignore la description -->
<a href="/about"><img src="logo.png"></a>

<!-- Correct : nom accessible fourni -->
<a href="/home" aria-label="Aller à la page d'accueil"></a>
<a href="/about"><img src="logo.png" alt="À propos d'Acme Corp"></a>

<!-- Ouvre un nouvel onglet sans avertissement -->
<a href="https://example.com" target="_blank">En savoir plus</a>

<!-- Correct : avertissement visuel et accessible -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  En savoir plus <span aria-label="(s'ouvre dans un nouvel onglet)">↗</span>
</a>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Conditions d'utilisation <span class="sr-only">(s'ouvre dans un nouvel onglet)</span>
</a>

<!-- Pas d'avertissement sur le type de fichier -->
<a href="/files/annual-report.pdf">Rapport annuel</a>

<!-- Correct : type de fichier et taille indiqués -->
<a href="/files/annual-report.pdf">Rapport annuel (PDF, 2,4 Mo)</a>

<a href="/files/report.pdf">
  Rapport annuel <span class="file-info">(PDF, 2,4 Mo)</span>
</a>