Drupal et accessibilité à l'heure des CMS API-First

Lille - 16/01/2018

Accessibilité et CMS

Jean-Pierre Villain

Accessibilité

Les bases

  • Les utilisateurs
  • Les contextes d'utilisation sur le web
  • Les technologies d'assistance
  • L'accessibilité numérique

Les utilisateurs

8 à 10 millions de personnes handicapées en France

Les différents types de handicaps

  • Moteurs
  • Auditifs
  • Visuels
  • Mentaux
  • Congnitifs
  • Polyhandicapés
  • Troubles de santé invalidants

Les contextes

Situation de handicap : défaut d'adaptation qui rends le contenu innacessible à un utilisateur du fait d'une déficience.

de 15 à 20 millions de personnes en situation de handicap sur le web

Exemples de besoins spécifiques

  • Navigation uniquement au clavier ou à la souris
  • Description des éléments visuels ou audios
  • Maîtriser l'environnement et naviguer à son rythme
  • Personnaliser et adapter (couleurs, taille des caractères, police…)

Les technologies d'assistance

plage braille, LSF, sous-titrage, licorne, clavier virtuel

Exemples de technologie d'assistance

  • Parcourir avec une plage braille ou un lecteur d'écran
  • Utiliser un head-stick, des claviers adaptés, des trackballs, des joysticks
  • Contrôler le curseur avec la voix, les yeux, le souffle, la pensée

Et il en existe des dizaines d'autres : des vidéos pour découvrir l'accessibilité.

L'accessibilité numérique

Principes de bases

  • Donner des équivalents textuels aux images, aux sons à la couleur
  • Structurer les contenus, gérer la présentation par CSS, s'assurer des contrastes
  • Permettre l'utilisation des dispositifs d'adaptation des contenus
  • Rendre les interactions utilisables au clavier et à la souris, accompagner les saisies
  • Mettre à disposition des APIs systèmes toutes les informations d'accessibilité

Accessibilité

Les normes, les référentiels

  • WCAG et RGAA
  • ATAG et le référentiel RGAA CMS

WCAG et RGAA

WCAG : Normes internationales : 1998 (1.0), 2004 (2.0), 2018 (2.1)

RGAA 3 : Méthode d'application de WCAG, cadre légal Français (2015, 2016, 2017)

Focus sur RGAA

Référentiel d'application WCAG qui s'occupe des contenus et fonctionnalités générés.

13 thématiques (images, liens, formulaires…), 133 critères, 3 niveaux (A, AA, AAA), dérogations.

Nombreuses ressources (guides, mobiles, application, CMS, ARIA, Framework JS)

RGAA version 3 2017, publié le 28/07/2017

Access42 : ressources RGAA

WCAG et RGAA

Exemple WCAG

Règle 1.1 Les équivalents textuels : proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.

Images, captcha, couleurs, formes, vidéo, son, iframe

Dans le RGAA

19 critères (images, cadres, multimédia, liens, présentation, Consultation)

Exemples :

  • "Critère 1.1 [A] Chaque image a-t-elle une alternative textuelle ?"
  • "Critère 2.1 [A] Chaque cadre en ligne a-t-il un titre de cadre ?"

ATAG et RGAA

ATAG 2.0 : Normes internationales : 2015 (version de travail)

RGAA CMS : Référentiel d'application ATAG, pas de cadre légal

Focus sur RGAA CMS

Référentiel d'application ATAG qui se focalise sur les outils de génération de contenus de type CMS ou assimilés.

Ce référentiel est donné comme ressource et dispose d'une méthodologie de tests.

Référentiel RGAA CMS

Méthodologie de tests référentiel CMS

ATAG et RGAA

Exemple ATAG

Guideline B.2.3: Assist authors with managing alternative content for non-text content.

If the authoring tool provides functionality for adding non-text content, then authors are able to modify programmatically associated text alternatives for non-text content.

Dans RGAA CMS

Critère 6.6 [A] L'outil permet-il de définir des informations d'accessibilité de niveau RGAA 3 A (hors cas particuliers) ?

Test 6.6.1 Les fonctionnalités d'édition avancées permettent-elles de définir des informations d'accessibilité de niveau RGAA 3 A (hors cas particuliers) ?

Test 6.6.2 Les restrictions imposées sur les éléments éditables et les moyens d'édition n'empêchent pas la mise en conformité des contenus pour le niveau RGAA 3 A. Cette règle est-elle respectée ?

Accessibilité

L'API ARIA

  • Rôle, états et propriétés
  • Modèle de conception
  • Patcher les frameworks JS et les mauvaises pratiques

ARIA

ARIA permet de :

  • Définir les composants d'interface et de structure ;
  • informer des états et des propriétés des composants d'interface ;
  • mises à jour de contenus dynamiques ;
  • composants utilisables au clavier.

Accessible Rich Internet Applications (WAI-ARIA) 1.1

WAI-ARIA Authoring Practices 1.1

ARIA

Modèle de conception

Un modèle de conception comporte un ou plusieurs rôles, des états/propriétés, un modèle de comportement au clavier.

Modale ARIA

  • role="dialog" ou role="alertdialog"
  • aria-label="nom" ou aria-labelledby="@id-nom"
  • A l'ouverture focus() sur la modale ou l'un de ses composants interactifs
  • Pendant l'affichage : capturer le focus()
  • A la fermeture focus() sur le bouton d'ouverture
  • La touche [ESC] ferme la modale

Authoring practice : 3.8 Dialog (Modal)

ARIA

Patcher les frameworks JS

exemple
Exemple de tooltip produit par React

Méthode de patch

Le RGAA propose une analyse corrective des principaux framerworks JS, la plupart des composants ont été audités et des méthodes de correction sont proposées.

Ressource RGAA : React tooltip

Patcher avec ARIA

Des liens comme des boutons

exemple
Exemple de lien utilisés comme bouton

exemple
Exemple précédent corrigé (ajout de button et aria-controls)

Des champs de formulaire sans label

exemple
Exemple de champ de formulaire sans label

exemple
Exemple précédent corrigé (ajout de aria-label)

Accessibilité

L'accessibilité des CMS

Avertissements

  • Rendre un CMS capable de produire des contenus acessibles est complexe
  • Cela ne concerne pas simplement le RTE
  • Il faut travailler en profondeur sur l'interface, les fonctionnalités, les contenus générés automatiquement, les plugins.
  • Il faut également proposer des outils de tests automatiques et des aides au contributeur.
  • Et attention au wording : une alternative d'image n'est pas un titre ou une description.

Accessibilité

L'accessibilité des CMS, l'outillage

Vous aurez besoin de :

  • WCAG/RGAA
  • ATAG/RGAA CMS
  • ARIA

Mais également d'un plan d'amélioration rigoureux, raisonnable et priorisé.

Scope de l'outillage

  • WCAG/RGAA pour vérifier que les contenus produits ou édités sont accessibles
  • ATAG/RGAA CMS pour l'interface, les fonctionnalités, l'aide à la contribution
  • ARIA pour les composants d'interface, les bilbiothèque de composants en édition
  • ARIA pour patcher provisoirement des composants ou des fonctionnaltiés défaillantes

Pro Tips !

  • Formez-vous !

  • Formez-vous !

  • Formez-vous !

Merci de votre attention !