Comment effectuer un audit d'accessibilité pour la conformité aux WCAG

WCAG (lignes directrices pour l'accessibilité du contenu Web) a été créé par le consortium World Wide Web (W3C) et est la norme la plus reconnue au monde en matière d'accessibilité.

Dans cet article, nous décrivons les tâches requises pour effectuer un audit afin de vérifier la conformité à la norme WCAG 2.1.

L'accessibilité consiste à garantir que le contenu et les fonctionnalités de votre site Web sont accessibles à un public plus large.

Par exemple:

• Barrière d'accessibilité temporaire – Quelqu'un a perdu ses lunettes !
• Problèmes d'appareil - Ils se trouvent sur un appareil restrictif, par exemple un téléphone portable
• Situationnel - Plein soleil, pièce sombre, etc.
• Invalidité permanente - Pas de vue, pas d'ouïe, problèmes cognitifs, etc.
• Problèmes de bande passante – Une connexion très lente

Comme vous pouvez le constater, il existe de nombreuses formes de handicap dont vous devez tenir compte.

Les lignes directrices des WCAG sont réparties comme suit :

Avant de parcourir chaque section, voici une liste de ce dont vous aurez besoin pour effectuer les tests :

1. Perceptible

• Une sélection de navigateurs incluant uniquement du texte (par exemple Lynx)
• Un outil pour vérifier les balises alt, les titres, etc. (par exemple ScreamingFrog)
• Un lecteur d'écran tel que NVDA
• Un outil de test d'accessibilité de site Web
• Outils de développement Chrome
• Accès à une sélection d'appareils

Il s'agit de s'assurer que le contenu est accessible sous diverses formes. Par exemple, quelqu'un peut voir le contenu, l'écouter, utiliser le toucher pour comprendre le contenu, etc. Cela inclut également les éléments de l'interface utilisateur tels que les menus et les boutons.

L'outil d'accessibilité WAVE est l'un des nombreux outils qui peuvent être utilisés pour trouver des problèmes dans ce domaine :

Dans l'exemple ci-dessus, la page fonctionne plutôt bien. Il n'a qu'une erreur et 5 erreurs avec des problèmes de contraste de couleur.

La seule erreur est que cette page n'indique pas la langue.

Mais il y a beaucoup de bonnes choses sur la page. Par exemple, dans l'image de droite où vous voyez 2 éléments surlignés en vert, ces deux éléments utilisent les étiquettes "ARIA" pour aider un lecteur d'écran à comprendre ce contenu. Plus tard, nous expliquerons plus à ce sujet.

Passons en revue les lignes directrices et les critères de réussite.

Directive 1.1 -Fournir des alternatives textuelles au contenu non textuel

Existe-t-il des alternatives textuelles au contenu non textuel ?

Lorsque vous avez du contenu non textuel sur un écran, vous devez vérifier qu'il existe des descriptions pour chacun de ces éléments.

Avant de donner des exemples, je veux discuter d'ARIA qui est un moyen de fournir des descriptions supplémentaires aux éléments et ne doit être utilisé que lorsque le HTML standard n'est pas possible.

Lorsque vous utilisez HTML, vous obtenez automatiquement le contrôle du clavier, le focus, etc. et c'est la préférence, mais ARIA peut être utilisé comme sauvegarde.

Qu'est-ce qu'ARIA ?

ARIA (Applications Internet Riches Accessibles) est un moyen de décrire un contenu qui ne peut pas être décrit suffisamment à l'aide du langage HTML standard. Son objectif principal est pour les lecteurs d'écran. Si vous pouvez utiliser le HTML standard, c'est la meilleure approche car il fournira automatiquement le focus à l'élément et au contrôle du clavier. Lorsque ce n'est pas possible, ARIA est l'alternative.

Images descriptives

Une image descriptive est quelque chose qui représente quelque chose de significatif. Par exemple, une photo d'une voiture Toyota Prius.

Si vous ne pouvez pas voir l'image, il doit y avoir un moyen de décrire ce que cette image représente, c'est là qu'intervient une balise Alt.

Sur des plates-formes telles que WordPress, vous pouvez ajouter la balise alt lors du téléchargement de l'image :

Très souvent, nous mettons à jour cette balise alt pour nous assurer que les mots-clés pertinents sont inclus à des fins de référencement, mais nous devons aller au-delà.

Screaming Frog fera une analyse de toutes les images de votre site Web et affichera quelles images n'ont pas de balises alt, des balises alt en double, des balises alt trop longues ou des balises alt trop courtes !

Vous pouvez également voir les images à côté des détails de l'image :

Image décorative

Une image décorative est une image qui est là pour rehausser le design mais il n'y a rien dans l'image qui vaille la peine d'être décrit !

Les images décoratives doivent utiliser la propriété CSS background à moins qu'il n'y ait une bonne raison d'utiliser la balise 'img'. Si un lecteur d'écran voit la propriété CSS background, il sait ignorer l'image.

Voici un exemple d'image décrite comme image d'arrière-plan sur le site Web My Emergency Doctor en Australie :

Voici le code derrière ceci :

Étant donné que cette image n'est pas répertoriée en tant que <img>, elle utilise le role=img pour faire savoir aux lecteurs d'écran qu'il s'agit d'une image. Il utilise le "label Aria" pour donner une bonne description précise de l'image. Il définit également l'image comme 'background-image'.

Remarque : Si vous utilisez la balise 'img' pour une image d'arrière-plan, vous devez définir une balise alt nulle, par exemple alt=" "

Quand devriez-vous utiliser <img> au lieu de background-color ?

Lorsqu'une image est une partie importante du contenu, utilisez <img>. Par exemple, si vous avez une image de produit, il s'agit de <img> . Vous pouvez également avoir des images qui ne sont que des images d'arrière-plan utilisées à des fins de décoration et cela n'a pas de sens de les décrire comme des images (qui seront indexées par Google).

Dans l'exemple ci-dessus, vous pouvez vous demander si l'image affichée doit être définie comme img, mais il s'agit d'une photographie de stock et ils ont décidé de la définir comme une image d'arrière-plan à la place, ce qui est correct.

Remarque : <img> est une balise HTML mais background-image est un style CSS que vous utilisez.

Contrôles de l'interface utilisateur

Il existe divers contrôles d'interface utilisateur qui nécessitent du texte pour décrire ce que c'est.

Par exemple, un bouton ou un contrôle de formulaire.

Un bouton est utilisé pour aider à compléter une fonction. Il peut s'agir d'un bouton qui n'a qu'une icône et d'un autre qui contient du texte dans le bouton. Les deux pourraient être traités différemment.

En utilisant ARIA, vous pouvez définir 'role=button' mais avec le HTML standard, vous pouvez utiliser la balise <button>. Lequel devriez-vous utiliser?

Voici un exemple de bouton qui ne contient qu'un X qui nous oblige à créer un "label aria" pour décrire ce que fait le bouton.

<button aria-label=”Fermer” onclick=”myDialog.close()”>X</button>

Voici une liste de contrôles d'interface utilisateur typiques que vous devrez tester :

Si vous utilisez des formulaires, vous devez vous assurer que chaque champ est étiqueté correctement. Voici un exemple de bon étiquetage :

<label for="fname">Prénom :</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Nom :</label><br>

<input type="text" id="lname" name="lname">

</form>

Remarque : pour les formulaires, vous devez également vous assurer :

• Marquez clairement les champs obligatoires. Si un champ est obligatoire, il devra également être étiqueté correctement dans le code HTML.
• Il y a des instructions pour l'utilisateur (généralement en haut du formulaire)
• Les utilisateurs obtiennent de l'aide lorsqu'ils font une erreur en remplissant un champ de formulaire (par exemple, format de date incorrect, c'est ce que vous devez saisir).

Captcha

Cela peut être très problématique selon la façon dont il est mis en œuvre. Par exemple, lorsque des images sont affichées et qu'il vous est demandé d'identifier quelle image contient des feux de circulation !

Nous examinerons la mise en œuvre et ferons des suggestions pertinentes.

Contenu multimédia

La vidéo/audio a besoin d'au moins une description pour identifier le sujet de la vidéo/audio.

Liens

Vous voulez vous assurer que les liens ressortent clairement sur la page (par exemple, une couleur différente) et qu'ils utilisent un texte d'ancrage et une description de lien pertinents.

Ligne directrice 1.2 – Médias temporels

Ce domaine concerne la restauration de contenus vidéo et audio qui doivent être rendus plus accessibles.

Existe-t-il une transcription disponible pour l'audio préenregistré uniquement ou la vidéo uniquement ?

La transcription vidéo est la traduction de l'audio de votre vidéo en texte. La transcription n'inclut pas les informations audio décrivant des éléments tels que les éléments visuels affichés dans la vidéo. Ceci est géré séparément.

Astuce de transcription !

Rev.com est un excellent service pour créer des sous-titres/transcriptions pour votre audio/vidéo. Ils fournissent même un service de sous-titrage en direct pour la vidéo Zoom.

Des sous-titres sont-ils disponibles pour l'audio préenregistré ?

La légende est un texte qui apparaît dans la vidéo pour informer l'utilisateur de ce que la personne dit.

Existe-t-il une description audio ou un média alternatif (pré-enregistré) ?

Lorsque vous regardez une vidéo, les sous-titres peuvent ne pas être suffisants pour décrire ce qui est affiché dans la vidéo. C'est là que la description audio est également requise.

Par exemple, une description audio peut décrire ce qui se passe en arrière-plan lorsque quelqu'un parle afin de donner aux utilisateurs un certain contexte.

Voici un exemple de transcription incluant une description audio.

C'est formidable pour le visiteur de votre site Web, mais c'est aussi bon pour le référencement !

Astuce pour sélectionner un lecteur accessible :

Vous voulez vous assurer que le lecteur vidéo que vous utilisez prend en charge ce qui est requis pour l'accessibilité :

1. Prend en charge les sous-titres codés
2. La description audio peut être activée/désactivée
3. Le contrôle par mot-clé peut être utilisé sur le lecteur multimédia
4. Le lecteur multimédia fonctionne sur différents appareils et navigateurs
5. Toutes les commandes sont accessibles.

Y a-t-il des sous-titres pour l'audio en direct ?

Vous n'aurez généralement pas de contenu vidéo ou audio en direct sur votre site Web, mais si c'était le cas, vous auriez besoin d'une création de sous-titres simultanée pour que les utilisateurs voient les sous-titres affichés lorsque la personne parle.

Il existe des outils disponibles pour sous-titrer automatiquement votre vidéo et votre audio en direct.

Existe-t-il une description audio pour les médias synchronisés préenregistrés ?

Ceci est pour les médias qui contiennent de la vidéo et de l'audio. Nous voulons des informations audio qui accompagnent les médias.

Directive 1.3 – Adaptable – Présenter les informations dans un format compréhensible par un logiciel.

Vous devez vous assurer que ce que vous pouvez interpréter visuellement en regardant quelque chose est décrit par programme afin qu'il puisse être interprété correctement par des logiciels tels que des lecteurs d'écran.

Existe-t-il une structure logique du contenu et est-il facile de comprendre la relation avec chaque élément de contenu au sein de cette structure ?

Lorsque vous affichez une page Web, vous voyez normalement des en-têtes, des paragraphes, du contenu en gras, des tableaux, etc. Et lorsque vous affichez les détails d'un tableau, vous voyez des en-têtes et vous voyez clairement quelle ligne correspond à quel en-tête.

Voici ce que vous devrez revoir :

• Le contenu est-il divisé en sous-titres ?
• Les listes, tableaux, etc. sont-ils utilisés le cas échéant ?
• Le code HTML correct est-il utilisé pour les autres éléments structurels dans l'ensemble du contenu ?
• Y a-t-il des étiquettes et du texte alternatif utilisés selon les besoins (par exemple sur les formulaires ?)

Pointe

Un bon point de départ consiste à tester votre site Web à l'aide d'un outil de validation qui vérifie la validité du code HTML (par exemple, le validateur html de W3.org).

Voici un exemple de formulaire qui affiche les champs obligatoires en rouge. C'est correct pour un utilisateur visuel, mais qu'en est-il de quelqu'un qui utilise un afficheur braille ?

Pour surmonter ce problème, le mot "obligatoire" est également ajouté à l'étiquette du nom de famille qui est un champ obligatoire.

 <label for="lastname" class="required">Nom de famille (obligatoire) : </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .obligatoire {
    La couleur rouge;
  }
</style>

Y a-t-il un ordre de contenu qui a du sens ?

• Lorsque vous affichez une page Web, vous verrez une barre de navigation, puis du contenu, des titres, des sous-titres, des paragraphes de texte. Vous voulez vous assurer que cela est présenté dans un ordre logique.
• Utilisez des styles de titre pour indiquer l'importance des sections. Vous n'avez généralement qu'un seul style <h1> pour identifier la page de contenu, puis vous pouvez avoir plusieurs H2, H3, etc.
• Séparez la navigation du contenu (par exemple, définissez la navigation à l'aide de <nav>)
• Utilisez du HTML valide

Voici une structure typique de titres qui ont du sens :

Les utilisateurs peuvent-ils comprendre le contenu lorsqu'ils ne peuvent pas percevoir la forme, la taille ou utiliser des informations sur la forme ou la taille spatiale ?

La façon la plus simple d'expliquer cela est avec un exemple:

Supposons que vous disposiez d'un tableau de comparaison des fonctionnalités d'un produit logiciel et qu'une image en forme de losange s'affiche dans cette colonne lorsqu'un produit possède une fonctionnalité. Ce n'est pas suffisant, vous devrez ajouter du texte pour indiquer ce que représente ce diamant.

Le site Web fonctionne-t-il bien en mode portrait et paysage ?

Le site web doit pouvoir s'adapter en mode portrait ou paysage sans perdre de sens.

Si un site Web a correctement implémenté la conception réactive, lorsque vous changez d'orientation, il s'adapte à une fenêtre d'affichage différente (c'est-à-dire qu'il sélectionne un affichage plus approprié en fonction des dimensions de l'écran).

Les entrées des formulaires sont-elles décrites correctement ?

Le but est de s'assurer que, par programmation, il y a suffisamment d'informations sur n'importe quel champ qui doit être rempli dans un formulaire.

Et si c'est possible, activez le remplissage automatique pour que l'utilisateur n'ait pas à tout remplir !

Le but des éléments d'une page peut-il être déterminé par programmation ?

Un exemple de ceci est l'utilisation de l'élément ARIA 'role' pour les sections d'un site Web.

Par exemple, une bannière contenant le logo/nom de l'entreprise, etc. pourrait être décrite comme 'role=banner'.

ou en utilisant des étiquettes d'entrée sur les formulaires pour l'e-mail, le nom, l'adresse, etc.

Voici comment vous verriez cela en HTML :

<type d'entrée= »courriel>

Existe-t-il une version texte d'un graphique ?

S'il y a un contenu de type graphique, vous voudrez avoir un tableau qui résume de quoi il s'agit.

Directive 1.4 – Voir et entendre du contenu

Il s'agit de permettre aux gens de voir et d'entendre facilement le contenu.

Existe-t-il des alternatives textuelles lorsque la couleur est utilisée pour transmettre des informations ?

Imaginez que vous aviez un formulaire et qu'un champ obligatoire était affiché en rouge.

Cela ne signifie pas grand-chose pour un lecteur d'écran !

Mais vous pouvez ajouter le mot "obligatoire" dans le tableau comme dans l'exemple ci-dessous :

<label for=”lastname” class=”required”>Nom de famille (obligatoire) : </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”text/css”> .required { couleur:rouge; } </style>

Existe-t-il un mécanisme pour mettre en pause ou arrêter l'audio s'il joue pendant plus de 3 secondes ?

Si vous utilisez un lecteur d'écran et qu'une vidéo se lance automatiquement en même temps, vous entendrez deux voix !

Idéalement, il n'y aura pas de lecture automatique de la vidéo, ce qui résoudra ce problème.

S'il y a une lecture automatique, assurez-vous qu'elle dure moins de 3 secondes et si ce n'est pas le cas, assurez-vous qu'il existe un moyen de contrôler l'audio de la vidéo en cours de lecture.

Y a-t-il un bon contraste entre le texte et les images/la couleur en arrière-plan ?

Nous savons tous à quel point les couleurs sont importantes dans la conception et l'image de marque, mais pour les visiteurs malvoyants de votre site, les couleurs ne feront pas beaucoup de différence dans leur expérience.

Par exemple, les personnes daltoniennes ne verront pas de différence entre le rouge, l'orange, le jaune et le vert et vous devez également en tenir compte.

La clé ici est de garder à l'esprit le rapport de contraste, qui est l'un des problèmes d'accessibilité les plus courants rencontrés sur les sites Web.

Le contraste entre la couleur du texte et son arrière-plan est-il suffisant ? Un outil comme le vérificateur de contraste des couleurs peut vous aider à le découvrir !

La couleur de fond est à gauche puis la couleur du texte est à droite. Le score est au milieu.

La recommandation est que le contraste soit d'au moins 4,5:1 ou 3,1 lorsque le texte est grand (par exemple 18 points ou 14 points gras).

Assurez-vous également d'utiliser des outils autres que la couleur pour communiquer le contenu et les informations importantes sur votre site.

Par exemple, votre CTA principal apparaît généralement sur la page en raison d'une couleur qui le fait remarquer aux utilisateurs. Pour rendre les CTA plus accessibles, vous pouvez utiliser la taille, le placement, l'audace, le contraste, pour les rendre visibles pour les personnes daltoniennes.

Le texte peut-il être agrandi et votre site Web fonctionnera-t-il toujours normalement ?

Une évidence consiste simplement à agrandir le texte sur un écran pour aider une personne ayant une déficience visuelle.

Mais vous voulez que le site Web fonctionne normalement si un utilisateur augmente la taille du texte.

Par exemple, lorsqu'un utilisateur agrandit le texte jusqu'à 400 %, vous devez vous assurer qu'aucune information n'est perdue.

Voici une image de W3.org. Je suis sûr que vous ne voulez pas que votre site Web ressemble à celui de droite lorsque vous agrandissez le texte.

L'exigence WCAG 2.1 est que vous devriez pouvoir agrandir de 200% sans aucun problème.

Les images de texte sont-elles évitées à moins que cela ne soit nécessaire ?

Vous pourriez avoir un logo qui contient du texte (par exemple le nom de votre entreprise) qui est correct.

Mais qu'en est-il des images de texte ?

Si vous avez une image de texte, vous devez au moins fournir une étiquette qui la décrit.

Mais il vaut mieux éviter ce type d'images à moins que :

• Il est essentiel
• C'est personnalisable

Le site Web est-il responsive ?

Il est normal de faire défiler vers le bas pour voir la page Web complète, mais pas de faire défiler vers la droite ou vers la gauche.

Lorsque vous passez d'un ordinateur de bureau à un appareil plus petit, l'écran doit s'ajuster automatiquement afin que vous n'ayez toujours pas à faire défiler vers la droite ou vers la gauche.

Le contraste est-il suffisant pour le contenu non textuel ?

Les couleurs adjacentes doivent avoir un rapport de contraste d'au moins 3:1

Cette exigence concerne les personnes ayant une vision relativement basse.

L'espacement/la hauteur de ligne peuvent-ils être ajustés sans aucune perte de performances ?

• La hauteur de ligne (interligne) doit être d'au moins 1,5 fois la taille de la police ;
• L'espacement des paragraphes suivants doit être d'au moins 2 fois la taille de la police ;
• L'espacement des lettres (suivi) doit être d'au moins 0,12 fois la taille de la police ;
• L'espacement des mots doit être d'au moins 0,16 fois la taille de la police.

Le contenu s'affiche-t-il correctement au survol ou au focus ?

Lorsque vous vous concentrez sur un élément (par exemple, tabulez dessus) ou que vous le survolez, vous voyez du contenu supplémentaire.

Par exemple, vous survolez un bouton et une fenêtre contextuelle apparaît.

…ou un sous-menu s'affiche.

Ce contenu doit être :

Dismissable – Par exemple, si vous cliquez sur Escape, le contenu n'est plus affiché.

Hoverable - Lorsque vous survolez le contenu, le contenu est affiché tant que la souris est sur le déclencheur.

Persistant - C'est une combinaison des deux. Le contenu reste visible jusqu'à ce que l'utilisateur le ferme, que l'utilisateur éloigne la souris ou que le contenu ne contienne plus d'informations importantes.

Remarque : Cela ne s'applique pas lorsqu'un élément HTML tel qu'un titre s'affiche lorsque vous survolez quelque chose (par exemple une image).

La police est-elle lisible ?

Certaines polices / polices de caractères sont plus lisibles que d'autres. Il y a une préférence pour serif ou sans serif mais ce n'est pas obligatoire. Leur élément clé est qu'il est lisible.

2. Utilisable

Cela signifie que les utilisateurs doivent pouvoir utiliser la navigation et l'interface utilisateur en interagissant avec elle. Par exemple, ils peuvent « faire fonctionner » l'interface utilisateur à l'aide du clavier.

Ligne directrice 2.1 – Clavier accessible

De nombreux utilisateurs utilisent un clavier au lieu d'une souris ou d'un trackpad, y compris les utilisateurs ayant des barrières d'accessibilité à la mobilité ou ceux utilisant un lecteur d'écran.

C'est pourquoi toutes les fonctionnalités de votre site Web doivent être accessibles via le clavier - liens, boutons, formulaires et autres contrôles.

Est-ce que tout est accessible via un clavier ?

Il est maintenant temps d'arrêter d'utiliser votre souris et d'utiliser uniquement votre clavier.

Vous vérifiez :

Est-ce que tout suit un ordre logique en avant ou en arrière (en utilisant la tabulation pour avancer et la tabulation décalée pour revenir en arrière).

Lorsque vous êtes sur un bouton, une section, etc. en particulier, voyez-vous que cet élément est mis en surbrillance ? Dans l'exemple suivant, il est évident que nous avons tabulé sur "articles".

Tout est-il accessible à l'aide de la touche de tabulation et lorsque vous appuyez sur Entrée lorsque vous avez le focus, active-t-il l'action ?

Remarque : Si une fenêtre contextuelle apparaît, vous devez également pouvoir y naviguer.

Pouvez-vous sauter l'en-tête ?

Lorsque vous utilisez un lecteur d'écran, vous ne voulez pas qu'il lise le même en-tête sur chaque page. Cela vous rendrait fou. Vous devriez donc pouvoir tabuler sur le lien "Passer au contenu", appuyez sur Entrée, puis votre prochain onglet ignorera cette section.

Lorsque vous cliquez sur l'onglet lorsque vous arrivez pour la première fois sur le site Web ci-dessous, vous êtes sur le lien "Passer au contenu". Si vous appuyez sur Entrée, vous accédez directement au contenu.

Si vous appuyez sur un deuxième onglet, vous accédez au lien "Passer à la navigation". Si vous appuyez sur Entrée, vous êtes amené à la navigation.

Si vous appuyez à nouveau sur l'onglet, vous passez à 'passer à la navigation'. Si vous sélectionnez cette option, vous passez directement à la navigation.

Si un caractère, une ponctuation, un chiffre ou un symbole est utilisé comme raccourci, il doit y avoir un moyen de désactiver ou de modifier ce raccourci en un ou plusieurs caractères non imprimables. La seule autre exception est lorsque le raccourci n'est disponible que lorsque l'élément a le focus.

2.1.2 Y a-t-il des situations où vous tombez dans une impasse avec le clavier (un piège à clavier) ?

Vous vous dirigez vers un endroit sur le site Web et vous ne pouvez pas avancer ou reculer.

C'est ce qu'on appelle un piège à clavier. Au fur et à mesure de la chanson…pris dans un piège, je ne peux pas regarder en arrière….

Existe-t-il une alternative à un raccourci clavier implémenté à l'aide d'une lettre ?

Avoir un raccourci de touche de caractère avec quelqu'un qui s'appuie sur un clavier pour la navigation n'est pas bon car il peut finir par appuyer dessus par erreur.

Nous devons donc proposer une alternative.

a) Possibilité de remapper ce personnage vers un autre raccourci

b). Éteignez-le

c). Il n'est actif que lorsque vous vous concentrez dessus. Cela signifie donc que si vous utilisez le raccourci, rien ne se passe à moins que vous ne soyez réellement dessus !

Ligne directrice 2.2 – Assez de temps

Imaginez que vous fixiez une limite de temps pour remplir un formulaire, mais que vous ne preniez en compte que les utilisateurs sans besoin d'accessibilité. Ce délai peut être trop court.

Le timing est-il réglable ?

Désactiver le timing est idéal, mais pouvoir le prolonger (c'est-à-dire lorsque le délai est presque atteint) ou l'ajuster à la nouvelle heure est acceptable.

L'utilisateur du site Web peut-il mettre en pause, arrêter ou masquer le contenu en mouvement, clignotant ou mis à jour automatiquement ?

S'il bouge/clignote ou défile et qu'il :

un). démarre automatiquement

b). dure plus de 5 secondes

c). est présenté en parallèle avec d'autres contenus

Ensuite, il existe un mécanisme de pause, d'arrêt ou de suppression.

Même problème avec la mise à jour automatique du contenu.

Ligne directrice 2.3 – Convulsions et réactions physiques

Cette directive vise à s'assurer que rien n'est conçu qui pourrait provoquer une crise ou une réaction physique.

Les "flashs" à l'écran respectent-ils les directives ?

La règle numéro un est d'éviter tout objet clignotant, mais si cela n'est pas possible, assurez-vous qu'il ne clignote pas plus de 3 fois par seconde ou qu'il ne clignote pas en dessous des seuils de flash général ou rouge.

Ligne directrice 2.4 – Navigable

Il s'agit de faciliter la navigation sur le site.

Pouvez-vous ignorer les blocs répétitifs ?

Imaginez que vous utilisez un lecteur d'écran et que chaque fois qu'il accède à une nouvelle page, il lit la navigation. Ça ne serait pas amusant. Vous devez donc pouvoir les ignorer. J'en ai donné un exemple plus tôt.

Toutes les pages sont-elles correctement intitulées ?

Vous avez besoin de bons titres descriptifs sur toutes les pages. C'est bon pour l'accessibilité mais aussi bon pour le référencement.

Vous pouvez utiliser Screaming Frog pour consulter les titres des pages en un seul endroit :

L'ordre de mise au point préserve-t-il le sens ?

Si vous parcourez le contenu mais que vous tabulez dans un ordre qui n'a pas de sens, vous devrez résoudre ce problème.

Pouvez-vous déterminer le but du lien à partir du texte du lien ?

'Cliquez ici' n'est pas un texte d'ancrage très utile. Vous devez avoir des mots qui décrivent le contenu vers lequel le lien va.

Qu'est-ce qu'un texte d'ancrage ?

Lorsque vous créez un lien vers une autre page de votre site Web ou d'un site Web externe, le texte d'ancrage est le texte visible que vous voyez et qui est lié à la page vers laquelle vous envoyez des personnes. Au lieu d'afficher simplement le lien, il est préférable d'afficher le texte réel.

Existe-t-il plusieurs façons de localiser une page Web ?

Voici quelques exemples:

• Plan du site – Avoir une liste de toutes les pages sur un plan du site
• Liens rapides – Avoir des liens rapides pour accéder aux pages importantes
• Recherche – Rechercher pour trouver une page pertinente

Le focus du clavier est-il visible ?

La question veut tout dire ! Cela était également couvert dans l'une des lignes directrices précédentes. Lorsque vous tabulez quelque part, vous devez être en mesure de voir visuellement que le focus se trouve dans cette zone.

L'en-tête, le corps et le pied de page sont-ils clairement définis ?

Les technologies d'assistance doivent pouvoir identifier clairement l'en-tête, le pied de page et le corps. Il existe des balises html qui définissent ces zones.

Ligne directrice 2.5 Modalités de saisie

Cette directive concerne les interfaces plus récentes dans lesquelles vous ne pouvez pas utiliser un clavier ou une souris pour naviguer. Par exemple, sur les smartphones, vous pouvez balayer, pincer et zoomer, appuyer, etc.

La fonctionnalité utilisant des gestes multipoints ou basés sur un chemin peut-elle être actionnée par un seul pointeur sans utiliser le geste (sauf si essentiel) ?

Un geste basé sur le chemin est l'endroit où vous devez vous déplacer dans un chemin spécifique. Par exemple, vous glissez vers le haut pour accéder à certaines fonctionnalités ou vers le bas pour accéder à d'autres. Un geste multipoint est l'endroit où vous utilisez deux ou plusieurs points de contact pour accéder à la fonctionnalité, par exemple, utilisez 2 doigts pour pincer et zoomer.

Existe-t-il un moyen simple de sortir d'une action initiée par un seul pointeur ?

Qu'est-ce qu'un pointeur unique ?

C'est là que vous pouvez accéder aux fonctionnalités avec un point d'interaction avec un écran, par exemple appuyer, cliquer, appuyer longuement, etc.

Au moins une des conditions suivantes doit être vraie :

• Aucun événement vers le bas - le déclencheur est implémenté lorsque vous appuyez sur un bouton
• Abort ou Undo - Vous utilisez un événement up (c'est-à-dire que la fonction est activée lorsque le pointeur est relâché) et il existe un moyen d'abandonner. Par exemple, vous appuyez sur quelque chose avec votre doigt et au lieu de lever votre doigt tout droit, vous le faites glisser vers une autre partie de l'écran et la fonctionnalité est abandonnée.
• Inversion vers le haut - L'événement vers le haut inverse l'événement vers le bas
• Essentiel - Remplir la fonction de l'événement vers le bas est essentiel.

L'étiquette visible d'un composant correspond-elle au nom programmatique de ce composant ?

Si un utilisateur voyant utilise la synthèse vocale, le nom programmatique sera lu et l'expérience sera meilleure s'il correspond à l'étiquette visible.

La fonctionnalité qui est actionnée par le mouvement ou les gestes peut-elle également être actionnée par d'autres commandes d'interface utilisateur ?

Si vous secouez ou inclinez quelque chose pour le contrôler, pouvez-vous utiliser un autre contrôle de l'interface utilisateur pour accéder à cette fonctionnalité ?

Compréhensible

Il s'agit de s'assurer que le langage utilisé sur la page est compréhensible.

3.1 Lisible

Nous couvrons les éléments suivants :

La langue de la page ou des sections de la page peut-elle être déterminée par programmation ?

Vous devriez voir quelque chose comme ça au début de n'importe quelle page. 'Lang' indique la langue de la page.

<html class=”c'est-à-dire ie7″ lang=”en-US”>

Si la langue change sur la page, vous devrez également être en mesure de l'identifier.

3.2 Prévisible

Vous voulez que votre interface utilisateur fonctionne de manière prévisible, pas de surprises !

La navigation est-elle dans le même ordre sur les pages ?

La position de navigation sur une page doit être la même sur toutes les autres pages à moins que l'utilisateur ne modifie la navigation.

Les composants, les images, etc. sont-ils nommés de manière cohérente sur les pages ?

Si vous avez une image sur une page et que vous avez la même image sur une autre page, vous voulez que l'image porte le même nom.

Si vous avez plusieurs pages d'un article et que vous nommez les pages page 1, page 2, page 3 qui sont cohérentes. L'étiquetage n'a pas à être le même s'il n'a pas de sens, mais il doit être cohérent.

3.3 Aide à la saisie

Il s'agit d'aider les utilisateurs à éviter ou à récupérer des erreurs :

Erreur de saisie - Si vous tapez quelque chose de manière incorrecte, vous pouvez voir que c'est faux, mais il doit également y avoir un texte identifiant le problème.

Étiquettes – Lorsque les utilisateurs doivent saisir un texte, une étiquette associée décrit le champ.

Erreur de saisie - Si un utilisateur fait une erreur, il y a une suggestion sur la façon de la corriger.

Prévention des erreurs - Vous devriez être en mesure d'inverser, d'obtenir des commentaires sur l'erreur ou de pouvoir confirmer avant de soumettre.

4. Robuste

En plus d'être accessible, votre contenu doit prendre en charge une variété de navigateurs, de technologies, etc.

Ligne directrice 4.1 Compatible

Cela implique des tests avec une variété d'agents utilisateurs et de technologies d'assistance. Un bon test initial consiste à utiliser l'outil de validation de balisage W3C pour voir s'il y a des erreurs (c'est-à-dire qu'il valide que la structure/syntaxe de html, xhml, etc. est correcte).

Voici un exemple de sortie :

Vous devez également tester plusieurs navigateurs pour vous assurer que le contenu est correctement chargé.

Et cela vaut également la peine de charger la page dans un navigateur texte uniquement (tel que Lynx).

Toutes les données peuvent-elles être analysées correctement ?

Y a-t-il des balises de début et de fin appropriées dans les sections du contenu afin qu'il soit facile d'identifier où une section commence et se termine ?

Les éléments sont-ils correctement imbriqués ?

Existe-t-il des attributs ou des identifiants en double qui rendent difficile la distinction des éléments ?

Toutes les commandes de l'interface utilisateur peuvent-elles être comprises par les technologies d'assistance ?

Voici quelques exemples de contrôles et ce que vous devez être en mesure de comprendre :

• Case à cocher - est-elle cochée ou non ?
• Focus - Quel élément a le focus et cela peut-il être compris par programmation (pas seulement visuellement) ?

Les utilisateurs sont-ils informés des messages d'état qui ne sont pas ciblés d'une manière qui n'interrompt pas nécessairement le travail ?

Imaginez que vous naviguiez sur une page et que, sur cette page, une bannière s'affiche en haut du site Web annonçant une vente.

Les formulaires sont-ils conçus de la bonne manière ?

Pour rendre les formulaires accessibles, vous devez vous assurer que les éléments suivants sont activés :

• Possibilité d'utiliser l'onglet pour naviguer dans le formulaire
• Possibilité d'utiliser l'onglet pour naviguer dans le formulaire

<forme>

<label for="fname">Prénom :</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Nom :</label><br>

<input type="text" id="lname" name="lname">

</form>

• Champs obligatoires clairement indiqués. Si un champ est obligatoire, il devra également être étiqueté correctement dans le code HTML.
• Il y a des instructions pour l'utilisateur (généralement en haut du formulaire)
• Les utilisateurs obtiennent de l'aide lorsqu'ils font une erreur en remplissant un champ de formulaire (par exemple, format de date incorrect, c'est ce que vous devez saisir).

Sommaire

Comme vous pouvez le voir, il y a beaucoup de terrain à couvrir lors de l'exécution d'un audit d'accessibilité complet. Cependant, tout cela est payant et les avantages qu'il apporte à votre entreprise sont nombreux - de la construction d'une image de marque positive à l'atteinte d'un public plus large et à l'amélioration de votre référencement.