Accessibilité

Les Règles pour l'accessibilité des contenus Web WCAG (Web Content Accessibility Guidelines) permettent de rendre les contenus Web plus accessibles aux personnes en situation de handicap, mais également aux utilisateurs en général.

Source du support : W3C

Perceptible

Proposer des équivalents textuels à tout contenu non textuel

Ce contenu pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, etc.

Parmi les contenus non textuels, on retrouve par exemple :

Des contenus sensoriels

  • des musiques,
  • des photos,
  • des dessins,
  • des vidéos, etc.

Des composants d'interface ou de saisie

  • Formulaire électronique : champs de texte, boutons, cases, etc.
  • Menu

CAPTCHA : Completely Automated Public Turing test to tell Computers and Humans Apart

  • Test automatique ayant pour but de distinguer les humains des ordinateurs.
  • Il conviendra de présenter différentes formes de CAPTCHA : visuels, sonores, textuels, etc.

Décorations et formatage

  • Les mises en formes et autres décorations ne sont pas concernées par les règles d'accessibilités.

Proposer des versions de remplacement aux médias

Les contenus audio et vidéo doivent avoir une information équivalente en texte

  • Sous titres
  • Audio description

Créer un contenu qui puisse être présenté de différentes manières sans perte d'information ni de structure (par exemple avec une mise en page simplifiée).

Responsive

  • Le contenu s'adapte selon les résolutions d'écran

Contenu facile à extraire

  • Un contenu facile à extraire et permettant de présenter cette information aux utilisateurs sous différentes formes. Exemple flux RSS.

Ordre séquentiel logique

  • Titres hiérarchiques

Caractéristiques sensorielles

  • L'utilisation du contenu ne doit pas reposer uniquement sur les caractéristiques sensorielles

Faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan.

Couleur

  • La couleur ne doit pas être utilisée comme la seule façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel.

Contraste

  • Contraste entre l'arrière-plan et le premier plan des textes doit avoir un rapport d'au moins 4,5:1 et 3:1 pour les textes agrandis.
  • Calcul des contrastes
  • Contrastes faibles autorisés pour les logos et textes purement décoratifs

Contrôle du son

  • Si du son sur une page Web est audible automatiquement pendant plus de 3 secondes, un mécanisme spécifique est disponible pour le mettre en pause, l'arrêter ou pour en contrôler le volume.

Redimensionnement du texte

  • Le texte peut être redimensionné jusqu'à 200%

Texte sous forme d'image

  • Logos autorisés
  • Textes purement décoratifs

Arrière-plan sonore

  • Pour les contenus audios, un faible volume est préconisé, voire la désactivation de l'arrière-plan sonore

Utilisable

Rendre toutes les fonctionnalités accessibles au clavier.

Clavier

  • Toutes les fonctionnalités du contenu sont utilisables à l'aide d'un clavier.
  • Focus : touche tabulation pour aller d'une zone à une autre.

Laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu.

Réglage du délai

Mettre en pause

  • Arrêter, pour toute information en mouvement ou défilante. Exemple : slider, diaporama

Mise à jour automatique

  • Mettre en place un mécanisme pour les désactiver au besoin

Ne pas concevoir de contenu susceptible de provoquer des crises.

Pas plus de trois flashs

  • Clignotements, alternance de luminosité

Fournir à l'utilisateur des éléments d'orientation pour naviguer, trouver le contenu et se situer dans le site.

Le contenu du site doit être facilement navigable. On parle de navigabilité.

Contourner des blocs

  • Un mécanisme permet de contourner les blocs de contenu qui sont répétés sur plusieurs pages Web : Bloc menu (Ajout d'un menu responsive type burger), sidebar, etc.

Titre de page

  • Les pages Web présentent un titre qui décrit leur sujet ou leur but.

Parcours du focus

  • Conforme à la hiérarchie des contenus.

Fonction du lien

  • La fonction de chaque lien est déterminée par le texte du lien seul ou par le contexte du lien : paragraphe, liste, cellule de tableau, attribut title

Accès multiples

  • Une page Web peut être située par plus d'un moyen dans un ensemble de pages Web sauf si cette page est le résultat ou une étape d'un processus.

En-têtes et étiquettes

  • Les en-têtes et les étiquettes décrivent le sujet ou le but.

Visibilité du focus

  • Toute interface utilisable au clavier comporte un mode de fonctionnement où le focus est visible

Localisation

  • L'utilisateur dispose d'informations pour se situer dans un ensemble de pages Web. Par exemple : Marquer la page sur laquelle on se situe dans le menu ou avec un titre.

En-têtes de section

  • Les en-têtes de section sont utilisés pour organiser le contenu. Exemple : balise <header> dans <section>

Compréhensible

Rendre le contenu textuel lisible et compréhensible.

Langue de la page

  • La langue par défaut de chaque page Web peut être signalée.

Exemple :

<html lang="fr">

Langue d'un passage

  • La langue de chaque passage ou expression du contenu peut être signalée.
<p>Commme disait Robert De Niro : <cite lang="en">You talkin' to me?</cite></p>

Mots rares

  • Un mécanisme est disponible pour identifier la définition spécifique des mots ou expressions utilisés de manière inhabituelle ou de façon limitée.

Abréviations

  • Un mécanisme est disponible pour identifier la forme complète ou la signification d'une abréviation.

Exemple :

<p>Le site est codé en <abbr title="Hypertext Markup Language">HTML</abbr> </p>

Prononciation

  • Un mécanisme permet d'identifier la prononciation spécifique des mots dont la signification est ambigüe dans le contexte si leur prononciation n'est pas connue.

Exemple : GNU ou Adobe

Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.

Au focus

  • Quand un composant reçoit le focus, il ne doit pas initier de changement de contexte.

À la saisie

  • Le changement de paramètre d'un composant d'interface utilisateur ne doit pas initier de changement de contexte à moins que l'utilisateur n'ait été avisé de ce comportement avant d'utiliser le composant.

Navigation cohérente

  • Dans un ensemble de pages, les mécanismes de navigation qui se répètent sur plusieurs pages Web se présentent dans le même ordre relatif chaque fois qu'ils sont répétés, à moins qu'un changement soit initié par l'utilisateur.

Identification cohérente

  • Dans un ensemble de pages Web les composants qui ont la même fonctionnalité sont identifiés de la même façon. Exemple d'incohérence : Champ qui s'appelle Rechercher sur une page et Trouver sur une autre.

Changement à la demande

  • Un changement de contexte est initié uniquement sur demande de l'utilisateur ou un mécanisme est disponible pour désactiver un tel changement. Exemple : clic sur Se connecter

Aider l'utilisateur à éviter et à corriger les erreurs de saisie.

Identification des erreurs

  • Si une erreur de saisie est détectée automatiquement, l'élément en erreur est identifié et l'erreur est décrite à l'utilisateur sous forme de texte. Exemple : type="email" ou Appel d'un fonction de vérification de validité d'un champ de texte avec l'événement JavaScript onsubmit

Étiquettes ou instructions

  • Des étiquettes sont présentées ou des instructions sont fournies quand un contenu requiert une saisie utilisateur. Exemple : balises <label>, attribut title et placeholder

Suggestion après une erreur

  • Si une erreur de saisie est automatiquement détectée et que des suggestions de corrections sont connues, ces suggestions sont alors proposées à l'utilisateur

Prévention des erreurs (juridiques, financières, de données)

  • Pour les pages Web qui entraînent des engagements juridiques ou des transactions financières de la part de l'utilisateur, qui modifient ou effacent des données contrôlables par l'utilisateur dans des systèmes de stockages de données, qui enregistrent les réponses de l'utilisateur à un test ou un examen, au moins l'une des conditions suivantes est vraie :
  • Réversible : les actions d'envoi sont réversibles.
  • Vérifiée : les données saisies par l'utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l'utilisateur de les corriger.
  • Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale.

Aide

  • Une aide contextuelle est disponible. Exemple : Déclaration des revenus en ligne

Robuste

Optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris avec les technologies d'assistance.

Analyse syntaxique

  • Dans un langage de balisage, les éléments ont des balises de début et de fin complètes, ils sont imbriqués conformément à leurs spécifications, ils ne contiennent pas d'attributs dupliqués et chaque ID est unique.

Nom, rôle et valeur

  • Pour tout composant d'interface utilisateur, le nom et le rôle peuvent être déterminés par un programme informatique ; les états, les propriétés et les valeurs qui peuvent être paramétrés par l'utilisateur peuvent être définis par programmation ; et la notification des changements de ces éléments est disponible aux agents utilisateurs, incluant les technologies d'assistance.

Articles connexes