L’accessibilité numérique consiste à rendre les contenus et services numériques compréhensibles et utilisables par les personnes en situation de handicap.
« […] assurer la pleine et égale jouissance de tous les droits de l’homme et de toutes les libertés fondamentales par les personnes handicapées et de promouvoir le respect de leur dignité intrinsèque.
Par personnes handicapées on entend des personnes qui présentent des incapacités physiques, mentales, intellectuelles ou sensorielles durables dont l’interaction avec diverses barrières peut faire obstacle à leur pleine et effective participation à la société sur la base de l’égalité avec les autres. »
Article premier - Convention relative aux droits des personnes handicapées de l’ONU (13 décembre 2006)
| Niveau | Description |
|---|---|
| A | Le niveau simple A permet de s'assurer de l’accès à l’information et d’une utilisabilité de base : 80% des critères. |
| AA | Le niveau AA contient des améliorations et la prise en charge de contextes particuliers. |
| AAA | Le niveau AAA ne peut pas s'appliquer à tous les types de contenus et de situations. « Il n'est pas recommandé de faire de la conformité au niveau AAA une politique générale pour des sites entiers parce qu'il n'est pas possible de satisfaire tous les critères de succès de niveau AAA pour certains contenus. » Source WCAG |
« Sont accessibles aux personnes handicapées […] les services de communication au public en ligne des organismes suivants »
Article 47 de la loi de 2005
Les personnes morales :
- de droit public (administrations…) ;
- de droit privée délégataire d’une mission de service public (gestion de l’eau, des transports…) ;
- de droit privé constituées spécifiquement pour satisfaire les besoins d’intérêt général autre que financier ou commercial (office de tourisme, culturel, social…).
Les entreprises dont le chiffre d’affaires excède un certain seuil (250 millions d’euros).
- Être conforme au RGAA.
- Publier une déclaration d’accessibilité avec l’état et le niveau de conformité.
- Mettre en place un moyen de contact dédié et porter assistance aux utilisateurs dans un délai raisonnable.
- Afficher le statut de conformité (pas conforme, partiellement conforme, conforme) sur la page d’accueil.
- Publier un schéma pluriannuel de mise en accessibilité, décliné en plans d’action annuels.
Décret n°2019-768 du 24 juillet 2019 relatif à l'accessibilité aux personnes handicapées des services de communication au public en ligne
Sanction maximale de 20 000 € par site et par an pour défaut de publication (schéma et plans, statut, déclaration d’accessibilité)
Note : les délais de mise en conformité des sites existants ne peuvent excéder trois ans.
Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité), c’est :
- des règles de mise en œuvre ;
- une méthode de vérification.
La méthode technique du RGAA permet de vérifier qu’une page web – c’est-à-dire tout contenu HTML (HTML4, XHTML1 et HTML5) - est conforme aux 50 critères de succès des niveaux A et AA de la norme internationale WCAG 2.1 qui ont été retenus dans la norme européenne de référence (.pdf 2Mo) pour établir le niveau d’exigence légale en matière d’accessibilité numérique.
La méthode technique du RGAA propose un cadre opérationnel de vérification de la conformité aux exigences d’accessibilité.
Elle comporte 106 critères de contrôle RGAA incluant une moyenne de 2,5 tests par critère. Certains tests font référence à des techniques d’implémentation (HTML, CSS, JavaScript…) pour vérifier que le critère est respecté afin de réduire la marge d’interprétation quant au respect des normes d’accessibilité.
En cas d’absence de mise à jour du référentiel sous 3 ans pour prendre en compte de nouveaux standards ou spécifications techniques, il est possible de créer ses propres tests en complément de ceux existants.
Certains tests, concernant notamment les composants d’interface développés en JavaScript, requièrent de vérifier la restitution des contenus avec des technologies d’assistance associées à des navigateurs et des systèmes d’exploitation. L’environnement de test (ou « Base de référence ») est décrit dans la partie 2.4.
106 critères répartis dans 13 rubriques
> En savoir plus
| Statut | Dérogation | Comment | ||
|---|---|---|---|---|
| 1 | Images | |||
| 1.1 | Chaque image porteuse d’information a-t-elle une alternative textuelle ? | C | N | |
| 1.2 | Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ? | NC | D | |
| 1.3 | Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ? | NA | ||
| 1.4 | Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ? | NT | ||
| 1.5 | Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ? | |||
| 1.6 | Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ? | |||
| 1.7 | Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ? | |||
| 1.8 | Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée (hors cas particuliers) ? | |||
| 1.9 | Chaque légende d’image est-elle, si nécessaire, correctement reliée à l’image correspondante ? | |||
| 2 | Cadres | |||
| 2.1 | Chaque cadre a-t-il un titre de cadre ? | |||
| 2.2 | Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? | |||
| 3 | Couleurs | |||
| 3.1 | Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ? | |||
| 3.2 | Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ? | |||
| 3.3 | Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ? | |||
| 4 | Multimédia | |||
| 4.1 | Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ? | |||
| 4.2 | Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ? | |||
| 4.3 | Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ? | |||
| 4.4 | Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ? | |||
| 4.5 | Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ? | |||
| 4.6 | Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ? | |||
| 4.7 | Chaque média temporel est-il clairement identifiable (hors cas particuliers) ? | |||
| 4.8 | Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ? | |||
| 4.9 | Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ? | |||
| 4.10 | Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ? | |||
| 4.11 | La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ? | |||
| 4.12 | La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ? | |||
| 4.13 | Chaque média temporel et non temporel est-il compatible avec les technologies d’assistance (hors cas particuliers) ? | |||
| 5 | Tableaux | |||
| 5.1 | Chaque tableau de données complexe a-t-il un résumé ? | |||
| 5.2 | Pour chaque tableau de données complexe ayant un résumé, celui-ci est-il pertinent ? | |||
| 5.3 | Pour chaque tableau de mise en forme, le contenu linéarisé reste-t-il compréhensible ? | |||
| 5.4 | Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données ? | |||
| 5.5 | Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ? | |||
| 5.6 | Pour chaque tableau de données, chaque en-tête de colonne et chaque en-tête de ligne sont-ils correctement déclarés ? | |||
| 5.7 | Pour chaque tableau de données, la technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée (hors cas particuliers) ? | |||
| 5.8 | Chaque tableau de mise en forme ne doit pas utiliser d’éléments propres aux tableaux de données. Cette règle est-elle respectée ? | |||
| 6 | Liens | |||
| 6.1 | Chaque lien est-il explicite (hors cas particuliers) ? | |||
| 6.2 | Dans chaque page web, chaque lien a-t-il un intitulé ? | |||
| 7 | Scripts | |||
| 7.1 | Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ? | |||
| 7.2 | Pour chaque script ayant une alternative, cette alternative est-elle pertinente ? | |||
| 7.3 | Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage (hors cas particuliers) ? | |||
| 7.4 | Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ? | |||
| 7.5 | Dans chaque page web, les messages de statut sont-ils correctement restitués par les technologies d’assistance ? | |||
| 8 | Eléments obligatoires | |||
| 8.1 | Chaque page web est-elle définie par un type de document ? | |||
| 8.2 | Pour chaque page web, le code source généré est-il valide selon le type de document spécifié ? | |||
| 8.3 | Dans chaque page web, la langue par défaut est-elle présente ? | |||
| 8.4 | Pour chaque page web ayant une langue par défaut, le code de langue est-il pertinent ? | |||
| 8.5 | Chaque page web a-t-elle un titre de page ? | |||
| 8.6 | Pour chaque page web ayant un titre de page, ce titre est-il pertinent ? | |||
| 8.7 | Dans chaque page web, chaque changement de langue est-il indiqué dans le code source (hors cas particuliers) ? | |||
| 8.8 | Dans chaque page web, le code de langue de chaque changement de langue est-il valide et pertinent ? | |||
| 8.9 | Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ? | |||
| 8.10 | Dans chaque page web, les changements du sens de lecture sont-ils signalés ? | |||
| 9 | Structuration de l'information | |||
| 9.1 | Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ? | |||
| 9.2 | Dans chaque page web, la structure du document est-elle cohérente (hors cas particuliers) ? | |||
| 9.3 | Dans chaque page web, chaque liste est-elle correctement structurée ? | |||
| 9.4 | Dans chaque page web, chaque citation est-elle correctement indiquée ? | |||
| 10 | Présentation de l'information | |||
| 10.1 | Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? | |||
| 10.2 | Dans chaque page web, le contenu visible porteur d’information reste-t-il présent lorsque les feuilles de styles sont désactivées ? | |||
| 10.3 | Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ? | |||
| 10.4 | Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins (hors cas particuliers) ? | |||
| 10.5 | Dans chaque page web, les déclarations CSS de couleurs de fond d’élément et de police sont-elles correctement utilisées ? | |||
| 10.6 | xDans chaque page web, chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?xx | |||
| 10.7 | Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ? | |||
| 10.8 | Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ? | |||
| 10.9 | Dans chaque page web, l’information ne doit pas être donnée uniquement par la forme, taille ou position. Cette règle est-elle respectée ? | |||
| 10.10 | Dans chaque page web, l’information ne doit pas être donnée par la forme, taille ou position uniquement. Cette règle est-elle implémentée de façon pertinente ? | |||
| 10.11 | Pour chaque page web, les contenus peuvent-ils être présentés sans perte d’information ou de fonctionnalité et sans avoir recours soit à un défilement vertical pour une fenêtre ayant une hauteur de 256 px, soit à un défilement horizontal pour une fenêtre ayant une largeur de 320 px (hors cas particuliers) ? | |||
| 10.12 | Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ? | |||
| 10.13 | Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ? | |||
| 10.14 | Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ? | |||
| 11 | Formulaires | |||
| 11.1 | Chaque champ de formulaire a-t-il une étiquette ? | |||
| 11.2 | Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) | |||
| 11.3 | Dans chaque formulaire, chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est-elle cohérente ? | |||
| 11.4 | Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés (hors cas particuliers) ? | |||
| 11.5 | Dans chaque formulaire, les champs de même nature sont-ils regroupés, si nécessaire ? | |||
| 11.6 | Dans chaque formulaire, chaque regroupement de champs de même nature a-t-il une légende ? | |||
| 11.7 | Dans chaque formulaire, chaque légende associée à un regroupement de champs de même nature est-elle pertinente ? | |||
| 11.8 | Dans chaque formulaire, les items de même nature d’une liste de choix sont-ils regroupés de manière pertinente ? | |||
| 11.9 | Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent (hors cas particuliers) ? | |||
| 11.10 | Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente (hors cas particuliers) | |||
| 11.11 | Dans chaque formulaire, le contrôle de saisie est-il accompagné, si nécessaire, de suggestions facilitant la correction des erreurs de saisie ? | |||
| 11.12 | Pour chaque formulaire qui modifie ou supprime des données, ou qui transmet des réponses à un test ou à un examen, ou dont la validation a des conséquences financières ou juridiques, les données saisies peuvent-elles être modifiées, mises à jour ou récupérées par l’utilisateur ? | |||
| 11.13 | La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur ? | |||
| 12 | Navigation | |||
| 12.1 | Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents, au moins (hors cas particuliers) ? | |||
| 12.2 | Dans chaque ensemble de pages, le menu et les barres de navigation sont-ils toujours à la même place (hors cas particuliers) ? | |||
| 12.3 | La page « plan du site » est-elle pertinente ? | |||
| 12.4 | Dans chaque ensemble de pages, la page « plan du site » est-elle accessible à partir d’une fonctionnalité identique ? | |||
| 12.5 | Dans chaque ensemble de pages, le moteur de recherche est-il atteignable de manière identique ? | |||
| 12.6 | Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ? | |||
| 12.7 | xDans chaque page web, un lien d’évitement ou d’accès rapide à la zone de contenu principal est-il présent (hors cas particuliers) ?xx | |||
| 12.8 | Dans chaque page web, l’ordre de tabulation est-il cohérent ? | |||
| 12.9 | Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ? | |||
| 12.10 | Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ? | |||
| 12.11 | Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ? | |||
| 13 | Consultation | |||
| 13.1 | Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ? | |||
| 13.2 | Dans chaque page web, l’ouverture d’une nouvelle fenêtre ne doit pas être déclenchée sans action de l’utilisateur. Cette règle est-elle respectée ? | |||
| 13.3 | Dans chaque page web, chaque document bureautique en téléchargement possède-t-il, si nécessaire, une version accessible (hors cas particuliers) ? | |||
| 13.4 | Pour chaque document bureautique ayant une version accessible, cette version offre-t-elle la même information ? | |||
| 13.5 | Dans chaque page web, chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) a-t-il une alternative ? | |||
| 13.6 | Dans chaque page web, pour chaque contenu cryptique (art ASCII, émoticône, syntaxe cryptique) ayant une alternative, cette alternative est-elle pertinente ? | |||
| 13.7 | xDans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?xx | |||
| 13.8 | Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ? | |||
| 13.9 | Dans chaque page web, le contenu proposé est-il consultable quelle que soit l’orientation de l’écran (portrait ou paysage) (hors cas particuliers) ? | |||
| 13.10 | Dans chaque page web, les fonctionnalités utilisables ou disponibles au moyen d’un geste complexe peuvent-elles être également disponibles au moyen d’un geste simple (hors cas particuliers) ? | |||
| 13.11 | Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ? | |||
| 13.12 | Dans chaque page web, les fonctionnalités qui impliquent un mouvement de l’appareil ou vers l’appareil peuvent-elles être satisfaites de manière alternative (hors cas particuliers) ? |
Un critère peut prendre 4 statuts différents :
- C : CONFORME
Le critère est conforme pour l'ensemble des éléments de la page - NC : NON CONFORME
Au moins un des éléments de la page concernés par le critère n'est pas conforme - NA : NON APPLICABLE
Ou bien aucun élément dans la page ne concerne le critère, ou bien le seul qui concerne le critère est exempté, ou bien le seul contenu qui concerne le critère est soumis à dérogation et il propose une alternative numérique plus accessible - NT : NON TESTE
Le critère n'est pas testé. Ce statut sert à mesurer l'évolution de l'audit
Concernant les dérogations, seul un contenu peut l'être (jamais un critère).
- N : PAS DE DEROGATION
- D : DEROGATION
Il faut ensuite lister les pages testées (appelé échantillon).
| ID | Page | URL |
|---|---|---|
| 0000 | Homepage | http://... |
| 1000 | Search Results1 | http://... |
| 1500 | ... | ... |
| ... | ... | ... |
Pour chacune des page, un tableau de synthèse présentera les résultats.
Un tableau de synthèse regroupera et analysera l'ensemble des résultats.
| Page ID | Somme Croitères Conformes | Nb critères applicables | % critères respectés | Niveau RGAA |
|---|---|---|---|---|
| 0000 | xxx | xxx | xx% | A |
| 1000 | xxx | xxx | xx% | AA |
| 1500 | xxx | xxx | xx% | AA |
| ... | xxx | xxx | xx% | AAA |
| Total | xxx | xxx | xx% | AA |
Pourcentage critères respectés = somme critères conformes / nombre critères applicables
Ne pas oublier de définir les environnements de test.
> En savoir plus
- WCAG 2.1 FR
- Site officiel gouvernemental sur l'accessibilité (on y retrouve toute la documentation officielle et tout un tas de ressources)
Rendre son site accessible, ce n'est pas "saupoudrer avant d'envoyer le plat", c'est une attention et un investissement constant de tous les acteurs du projet, de la conception à la mise en production.
Investir dans l'accessibilité numérique est essentiel pour tout type d'organisation :
- Garantir un accès à l'information pour tous
- Toucher une plus grande audience
- Eviter une amende
Bootstrap est "friendly-compatible" avec l'accessibilité et fournit un cadre et des composants faciles à utiliser.
L'accessibilité dépend en grande poartie du balisage de l'auteur. Correctement implémenté, il est possible de créer des interfaces aux normes d'accessibilité.
Les composants interactifs de Bootstrap intègrent l'utilisation des rôles et attributs WAI-ARIA, et sont compatibles avec les technologies d'assistance.
A partir de la version 5, pour les contenus cachés mais accessibles aux technologies d'assistance, il faut utiliser la classe .visually-hidden.
Pour les contenus cachés mais visible au focus, il faut utiliser la classe .visually-hidden-focusable.
A noter que pour les version 4 et antérieures, on utilisait les classes .sr-only et .sr-only-focusable.