Aller au contenu

Accessibilité

L'accessibilité, c'est concevoir des sites web que tout le monde peut utiliser -- y compris les personnes qui naviguent au clavier, utilisent un lecteur d'écran, ont une basse vision ou vivent avec d'autres handicaps.

Ce n'est pas une finition optionnelle. Les sites accessibles touchent plus de monde, respectent des obligations légales dans de nombreux pays et se classent mieux dans les moteurs de recherche. Les techniques sont simples : HTML sémantique, contraste des couleurs suffisant, textes descriptifs et prise en charge du clavier.

Deux principes directeurs :

  1. Servez-vous de la plateforme. HTML intègre déjà l'accessibilité. Les balises sémantiques, les labels de formulaire, le texte alternatif et la hiérarchie des titres font l'essentiel du travail. Silex vous donne un accès direct à tout cela.
  2. Testez avec de vrais outils. Les vérificateurs automatiques repèrent beaucoup de problèmes, mais le test au clavier et le test au lecteur d'écran attrapent le reste.

WCAG : la norme

Les Web Content Accessibility Guidelines (WCAG) sont la norme internationale d'accessibilité web. Les WCAG organisent leurs exigences autour de quatre principes, connus sous l'acronyme POUR (Perceivable, Operable, Understandable, Robust) :

Principe Signification Exemples
Perceptible Le contenu doit pouvoir être présenté de façons que tous les utilisateurs peuvent percevoir Texte alternatif sur les images, contraste des couleurs suffisant, sous-titres sur les vidéos
Utilisable L'interface doit être utilisable au clavier, à la souris, au tactile et avec les technologies d'assistance Navigation au clavier, pas de limite de temps, aucun contenu susceptible de provoquer des crises
Compréhensible Le contenu et l'interface doivent être clairs Texte lisible, navigation prévisible, messages d'erreur clairs
Robuste Le contenu doit fonctionner sur tous les navigateurs et technologies d'assistance HTML valide, structure sémantique, ARIA utilisé correctement

Les WCAG définissent trois niveaux de conformité :

  • Niveau A -- socle minimal. Sans lui, certains utilisateurs ne peuvent pas accéder au contenu du tout.
  • Niveau AA -- l'objectif standard. La plupart des obligations légales et des bonnes pratiques visent le AA.
  • Niveau AAA -- le niveau le plus élevé. Pas requis pour la plupart des sites, mais utile à viser quand c'est faisable.

Visez le niveau AA. Il couvre les problèmes qui touchent le plus de monde.

Ce que Silex gère automatiquement

Silex et son pipeline de publication produisent du HTML propre. Certaines fonctionnalités d'accessibilité sont intégrées :

  • Sélecteur de balise sémantique -- transformez n'importe quel élément en header, nav, main, section, article, aside, footer via le menu déroulant Tag Name. Voir Structure de la page.
  • Attribut de langue -- défini dans les Réglages du site, produit <html lang="...">.
  • Labels de formulaire -- la balise LABEL et l'attribut for sont disponibles dans le sélecteur Tag Name. Voir Formulaires.
  • Texte alternatif -- le champ alt apparaît dans les réglages de l'élément pour chaque image. Voir Images et médias.

Ce que vous devez faire

Silex fournit les outils, mais les décisions d'accessibilité vous appartiennent :

Qui en profite

L'accessibilité ne concerne pas uniquement les handicaps permanents. Elle aide les gens dans de nombreuses situations :

Situation Exemple
Handicap permanent Personne aveugle avec un lecteur d'écran, personne sourde ayant besoin de sous-titres
Handicap temporaire Bras cassé, convalescence après une opération des yeux
Limitation situationnelle Plein soleil sur l'écran d'un téléphone, environnement bruyant, connexion lente
Vieillissement Vision qui décline, contrôle moteur réduit
Contraintes techniques Vieux navigateur, appareil lent, navigation au clavier uniquement

Concevoir pour l'accessibilité, c'est concevoir pour la vraie vie.

Pour aller plus loin

Quiz

Q1 : Quel niveau de conformité WCAG la plupart des sites web devraient-ils viser ?

  • A) Niveau A
  • B) Niveau AA
  • C) Niveau AAA
Réponse

B) Niveau AA -- il couvre les exigences les plus déterminantes et constitue la cible de la plupart des normes légales dans le monde.

Q2 : Une personne avec un bras cassé navigue sur votre site au clavier uniquement. Quel principe WCAG s'applique ?

  • A) Perceptible
  • B) Utilisable
  • C) Compréhensible
Réponse

B) Utilisable -- l'interface doit être utilisable au clavier seul, sans nécessiter de souris.

Q3 : Silex génère automatiquement l'attribut lang sur la page publiée. Où définit-on la langue ?

  • A) Dans le Style Manager
  • B) Dans les Réglages du site
  • C) Dans le panneau Layers
Réponse

B) Dans les Réglages du site -- le champ de langue définit l'attribut <html lang="..."> dans le HTML publié.

Éditer cette page sur GitLab