Accessibilité (WCAG 2.2)

Que fait Accessibilité (WCAG 2.2) ?

Cette compétence garantit que les interfaces numériques sont Perceptibles, Utilisables, Compréhensibles et Robustes (POUR) pour tous les utilisateurs, y compris ceux qui utilisent des lecteurs d'écran, des commandes par contacteur ou une navigation au clavier. Elle se concentre sur l'implémentation technique des critères de succès WCAG 2.2.

Quand l'utiliser

• Définir les spécifications des composants d'interface pour le Web, iOS ou Android.
• Auditer le code existant pour identifier les obstacles à l'accessibilité ou les lacunes de conformité.
• Implémenter les nouvelles normes WCAG 2.2 comme la Taille des Cibles (Minimum) et l'Apparence du Focus.
• Traduire les exigences de conception de haut niveau en attributs techniques (rôles ARIA, traits, indications).

Concepts clés

• Principes POUR : Le fondement du WCAG (Perceptible, Utilisable, Compréhensible, Robuste).
• Mappage sémantique : Utiliser des éléments natifs plutôt que des conteneurs génériques pour offrir une accessibilité intégrée.
• Arbre d'accessibilité : La représentation de l'interface que les technologies d'assistance "lisent" réellement.
• Gestion du focus : Contrôler l'ordre et la visibilité du curseur du clavier/lecteur d'écran.
• Étiquetage et indications : Fournir du contexte via aria-label, accessibilityLabel et contentDescription.

Comment ça fonctionne

Étape 1 : Identifier le rôle du composant

Déterminer la fonctionnalité (par exemple, est-ce un bouton, un lien ou un onglet ?). Utiliser l'élément sémantique natif le plus approprié avant de recourir à des rôles personnalisés.

Étape 2 : Définir les attributs perceptibles

• Assurer un contraste de texte d'au moins 4.5:1 (normal) ou 3:1 (grand/interface).
• Ajouter des alternatives textuelles pour les contenus non textuels (images, icônes).
• Implémenter un réaffichage réactif (jusqu'à 400 % de zoom sans perte de fonctionnalité).

Étape 3 : Implémenter des commandes utilisables

• Assurer une taille de cible minimale de 24x24 pixels CSS (WCAG 2.2 SC 2.5.8).
• Vérifier que tous les éléments interactifs sont accessibles au clavier et disposent d'un indicateur de focus visible (SC 2.4.11).
• Proposer des alternatives à un seul pointeur pour les mouvements de glissement.

Étape 4 : Garantir une logique compréhensible

• Utiliser des modèles de navigation cohérents.
• Fournir des messages d'erreur descriptifs et des suggestions de correction (SC 3.3.3).
• Implémenter la "Saisie redondante" (SC 3.3.7) pour éviter de demander deux fois les mêmes données.

Étape 5 : Vérifier la compatibilité robuste

• Utiliser les modèles corrects Nom, Rôle, Valeur.
• Implémenter aria-live ou les régions live pour les mises à jour dynamiques de statut.

Schéma d'architecture d'accessibilité

flowchart TD
  UI["Composant UI"] --> Platform{Plateforme ?}
  Platform -->|Web| ARIA["WAI-ARIA + HTML5"]
  Platform -->|iOS| SwiftUI["Traits d'accessibilité + Étiquettes"]
  Platform -->|Android| Compose["Sémantique + ContentDesc"]

  ARIA --> AT["Technologie d'assistance (Lecteurs d'écran, Contacteurs)"]
  SwiftUI --> AT
  Compose --> AT

Correspondance multiplateforme

Fonctionnalité	Web (HTML/ARIA)	iOS (SwiftUI)	Android (Compose)
Étiquette principale	aria-label / <label>	.accessibilityLabel()	contentDescription
Indication secondaire	aria-describedby	.accessibilityHint()	Modifier.semantics { stateDescription = ... }
Rôle d'action	role="button"	.accessibilityAddTraits(.isButton)	Modifier.semantics { role = Role.Button }
Mises à jour live	aria-live="polite"	.accessibilityLiveRegion(.polite)	Modifier.semantics { liveRegion = LiveRegionMode.Polite }

Exemples

Web : Recherche accessible

<form role="search">
  <label for="search-input" class="sr-only">Rechercher des produits</label>
  <input type="search" id="search-input" placeholder="Rechercher..." />
  <button type="submit" aria-label="Lancer la recherche">
    <svg aria-hidden="true">...</svg>
  </button>
</form>

iOS : Bouton d'action accessible

Button(action: deleteItem) {
    Image(systemName: "trash")
}
.accessibilityLabel("Supprimer l'élément")
.accessibilityHint("Supprime définitivement cet élément de votre liste")
.accessibilityAddTraits(.isButton)

Android : Interrupteur accessible

Switch(
    checked = isEnabled,
    onCheckedChange = { onToggle() },
    modifier = Modifier.semantics {
        contentDescription = "Activer les notifications"
    }
)

Anti-patrons à éviter

• Div-boutons : Utiliser une <div> ou un <span> pour un événement de clic sans ajouter de rôle ni de support clavier.
• Signification uniquement par la couleur : Indiquer une erreur ou un statut uniquement par un changement de couleur (par exemple, en rendant une bordure rouge).
• Focus modal non contenu : Les modales qui ne piègent pas le focus, permettant aux utilisateurs du clavier de naviguer dans le contenu d'arrière-plan pendant que la modale est ouverte. Le focus doit être contenu et l'utilisateur doit pouvoir en sortir via la touche Échap ou un bouton de fermeture explicite (WCAG SC 2.1.2).
• Texte alternatif redondant : Utiliser "Image de..." ou "Photo de..." dans le texte alternatif (les lecteurs d'écran annoncent déjà le rôle "Image").

Liste de vérification des bonnes pratiques

• Les éléments interactifs respectent la taille de cible minimale de 24x24 px (Web) ou 44x44 pt (Natif).
• Les indicateurs de focus sont clairement visibles et à contraste élevé.
• Les modales contiennent le focus lorsqu'elles sont ouvertes et le libèrent proprement lors de la fermeture (touche Échap ou bouton de fermeture).
• Les listes déroulantes et les menus rétablissent le focus sur l'élément déclencheur lors de la fermeture.
• Les formulaires fournissent des suggestions d'erreur textuelles.
• Tous les boutons uniquement iconographiques ont une étiquette textuelle descriptive.
• Le contenu se réaffiche correctement lorsque le texte est agrandi.

Références

• Recommandations WCAG 2.2
• Pratiques de création WAI-ARIA
• Guide de programmation de l'accessibilité iOS
• Guide d'interface humaine iOS - Accessibilité
• Guide du développeur Android pour l'accessibilité

Compétences connexes

• frontend-patterns
• design-system
• liquid-glass-design
• swiftui-patterns