Accessibilité

Définition du handicap : toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant.

Les Règles pour l'accessibilité des contenus Web WCAG (Web Content Accessibility Guidelines) permettent de rendre les contenus Web plus accessibles aux personnes handicapées. Les sites web doivent être :

  • perceptibles : faciliter la perception visuelle et auditive du contenu par l’utilisateur ; proposer des équivalents textuels à tout contenu non textuel ; 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) ;
  • utilisables : fournir à l’utilisateur des éléments d’orientation pour naviguer, trouver le contenu ; rendre toutes les fonctionnalités accessibles au clavier ; laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu ; ne pas concevoir de contenu susceptible de provoquer des crises d’épilepsie ;
  • compréhensibles : faire en sorte que les pages fonctionnent de manière prévisible ; aider l’utilisateur à corriger les erreurs de saisie.
  • robustes : optimiser la durée dans le temps, la compatibilité avec les utilisations actuelles et futures, y compris avec les technologies d’assistance.

Source : https://accessibilite.numerique.gouv.fr/obligations/notions-accessibilite-numerique/

Perception

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.

captcha
Recaptcha

Remarque : Le CAPTCHA rappelle cet extrait d'un chef-d'oeuvre du cinéma où Harisson Ford tente de différencier les robots des humains.

Décorations et formatage

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

Par exemple, une mosaïque décorative en arrière-plan n'est pas concernée par les règles ci-dessus.

Décoration

Le fond de la manchette du site Bonne Maman n'est pas concerné par les règles d'accessibilité https://www.bonne-maman.com/confitures-intenses.html

Proposer des versions de remplacement aux médias

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

Les contenus textuels peuvent être proposés en audio

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

Contenu facile à extraire

  • Un contenu facile à extraire et permettant de présenter cette information aux utilisateurs sous différentes formes. Exemple : flux RSS du journal Le Monde. Le navigateur Opera permet de composer facilement un journal avec les flux RSS avec l'option Actualités personnalisés.

Ordre séquentiel logique

Caractéristiques sensorielles

  • L'utilisation du contenu ne doit pas reposer uniquement sur les caractéristiques sensorielles. Par exemple, une galerie photo doit contenir du texte, idem pour les documents audios.

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.
  • Outils Contrast Finder et Color Safe
  • 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. Exemple de son contrôlable avec SoundCloud.
    Un mauvais exemple de site où le son se déclenche directement.

Redimensionnement du texte

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

Texte sous forme d'image

  • Logos autorisés
  • Textes purement décoratifs

Exemple avec ce logo.

Arrière-plan sonore

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

Utilisation

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 : slider, diaporama

Exemple avec le site officiel de Steam où le slider se met en pause au survol.

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é sont déconseillés

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,
    • menu responsive type burger,
    • sidebar, etc.

Titre de page

  • Les pages Web présentent un titre qui décrit leur sujet ou leur but : balise <title>

Parcours du focus

  • Conforme à la hiérarchie des contenus. Par exemple, le parcours dans les champs d'un formulaire doit être logique.

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. On parle de maillage interne.

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 : https://www.gastonlagaffe.com/

En-têtes de section

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

Compréhension

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. Exemple : Faire des liens vers des glossaires. Balises <dl>, <dt>, <dd>

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.

Exemple : Leboncoin

À 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

Robustesse

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.

Les cancres de l'accessibilité

Les sites publicitaires agressifs respectent rarement les règles du WCAG :

Exemples :

Les sites très design sont certes magnifiques, mais représentent un vrai casse-tête pour les personnes handicapées : https://patrickheng.com/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.