Accessibilité

lh-ui-plus s'efforce d'offrir une expérience d'interface accessible à tous les utilisateurs, partout dans le monde.

Navigation au clavier

Tous les composants interactifs sont utilisables au clavier :

Touche	Action
Tab	Parcourt les éléments focusables
Enter / Space	Active les boutons et interrupteurs
Escape	Ferme les couches flottantes des Dialog et Select
Flèches haut/bas	Se déplace parmi les options des Select et Cascader

Attributs ARIA

Les composants émettent les attributs ARIA nécessaires (voici les résultats réellement rendus) :

<!-- Button à l'état désactivé : disabled natif, ignoré par la tabulation -->
<button disabled>...</button>

<!-- Switch, interrupteur : button + role/aria-checked -->
<button role="switch" aria-checked="false">...</button>

<!-- Checkbox : input natif, la sémantique est portée par le label -->
<input type="checkbox" />

<!-- Dialog, boîte de dialogue : aria-modal + aria-label pointant vers le titre -->
<div role="dialog" aria-modal="true" aria-label="Titre de la boîte de dialogue">
  ...
</div>

Les sémantiques natives ont la priorité : Button utilise le disabled natif et Checkbox le <input type="checkbox"> natif, sans ajouter de aria-disabled / role="checkbox" redondants — empiler des attributs ARIA superflus sur des éléments natifs contrevient à la spécification.

Lecteurs d'écran

• Les boutons composés uniquement d'une icône nécessitent un aria-label transmis manuellement (voir les recommandations ci-dessous)
• Le bouton de fermeture du Dialog emporte un aria-label="close"
• Les composants transmettent les attributs natifs : toute propriété non explicitement traitée aboutit sur l'élément racine, vous pouvez compléter les aria-* selon vos besoins

Contraste des couleurs

Le texte courant et la teinte principale visent la cible WCAG 2.1 AA (texte normal >= 4.5:1, grands caractères et éléments non textuels >= 3:1) ; avec la palette de style chinois à faible saturation, il est recommandé d'utiliser les niveaux --lh-text-color-* de Personnalisation du thème plutôt que des couleurs choisies manuellement, afin de garantir le contraste.

Gestion du focus

• L'élément racine fournit uniformément un anneau de focus :focus-visible : visible lors de la navigation clavier, invisible lors du clic souris
• Les couches flottantes des Dialog et Select se ferment avec Escape
• Opérabilité au clavier : les éléments focusables sont de véritables <button> / <input>, qui prennent naturellement en charge la tabulation Tab

Le piège de focus et la restauration du focus (focus sur le premier élément à l'ouverture du Dialog, retour au bouton déclencheur après fermeture) ne sont pas encore implémentés ; les suivis sont les bienvenus dans les Issues.

Recommandations de développement

Ajouter un aria-label à un composant

<LhButton aria-label="Fermer la boîte de dialogue" @click="close">
  <LhIcon name="close" />
</LhButton>

Utiliser une zone live

<script setup lang="ts">
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div aria-live="polite">{{ message }}</div>
</template>

Skip Navigation

<a href="#main" class="skip-link">Aller au contenu principal</a>

Outils de test

Les outils suivants sont recommandés pour détecter les problèmes d'accessibilité :

• axe DevTools — extension de navigateur
• WAVE — Web Accessibility Evaluation Tool
• lighthouse — audit d'accessibilité intégré

---

L'accessibilité n'est pas une option, c'est un droit fondamental. — Web Accessibility Initiative (WAI)