Guide complet de l'accessibilité du Web (partie 1) : Le principe de perceptibilité

Une analyse détaillée du premier pilier des WCAG, avec des règles techniques et des conseils pour un site Web véritablement inclusif.

‍

Bienvenue dans le premier volet de notre série sur l'accessibilité du Web ! Dans les quatre prochains articles, nous aborderons les WCAG (Règles pour l'accessibilité des contenus Web) principes, connus sous l'acronyme POUR. Ces principes constituent la base de la création d'expériences numériques ouvertes à tous et sont définis comme suit : Perceptible, utilisable, compréhensible, et Robuste.

‍

Aujourd'hui, nous nous concentrons sur la pierre angulaire de l'accessibilité : Perceptibilité.

‍

Qu'est-ce que cela signifie pour un site d'être perceptible ?

‍

Le principe de perceptibilité exige que les informations et les composants de l'interface utilisateur soient présentables aux utilisateurs d'une manière qu'ils peuvent percevoir, c'est-à-dire par la vue, l'ouïe ou le toucher. En d'autres termes, le contenu ne peut pas être indétectable par tous les sens de l'utilisateur. Si une personne malvoyante ne peut pas accéder aux informations contenues dans une image, ou si un utilisateur malentendant ne peut pas comprendre une vidéo, votre site n'est pas perceptible.

‍

Niveaux de conformité aux WCAG

‍

Avant d'entrer dans les détails techniques, il est important de comprendre comment les directives WCAG sont classées. Pour chaque principe, les règles entrent dans l'une des trois catégories suivantes, qui indiquent le degré d'accessibilité atteint :

Niveau A : Il s'agit du niveau de conformité minimum. Le non-respect de ces directives crée des obstacles importants pour les utilisateurs handicapés.
Niveau AA : Ce niveau inclut toutes les exigences du niveau A, ainsi que les exigences supplémentaires. Il s'agit de la norme de référence pour la plupart des législations mondiales, y compris l'Acte européen sur l'accessibilité (EAA), offrant un niveau d'accessibilité moyen et robuste.
Niveau AAA : Le niveau de conformité le plus élevé et le plus complexe. Il comprend toutes les exigences des niveaux A et AA et est généralement adopté par des organisations spécialisées ou pour du contenu destiné à un public spécifique ayant des besoins distincts.

Guide technique détaillé sur le principe de perceptibilité

‍

Ci-dessous, nous avons repris et structuré les règles techniques et les conseils exactement tels qu'ils sont définis dans les directives officielles afin de fournir un outil pratique aux développeurs et aux créateurs de contenu.

‍

1.2 Fournir des alternatives textuelles pour tout contenu non textuel

‍

1.2.1. [AAA] Contenu non textuel

Toutes les images et tous les boutons d'image doivent comporter un texte alternatif suggestif.
Pour les images d'arrière-plan, les arrière-plans générés par CSS sont préférés. Si des images sont utilisées comme arrière-plan, elles doivent comporter un texte alternatif nul explicitement marqué.
Les boutons de formulaire doivent avoir une valeur descriptive.
Les entrées de formulaire doivent comporter des libellés de texte descriptifs.
Le contenu multimédia doit être identifié par un texte descriptif accessible.
Tout cadre utilisé doit avoir un titre.

Astuces :

AIR : Utilisez aria-label, aria-labelledby ou aria-describedby pour ajouter des libellés ou des alternatives textuelles.
Général : Pour un groupe d'images devant être interprété collectivement, un alt non nul peut être ajouté à la première image pour décrire le groupe, tandis que les autres contiennent des textes alternatifs explicitement nuls.
HTML/XHTML : Pour améliorer l'accessibilité, il est recommandé que les liens aient une représentation textuelle et graphique. Il est recommandé d'utiliser un seul élément contenant à la fois le texte et l'image, mais l'image doit avoir un attribut alt explicitement nul.
HTML/XHTML : Comme variante du cas précédent, le texte alternatif de l'image peut être non nul si l'image est une icône qui transmet un message visuel. Par exemple, si l'icône suggère que le fait de cliquer sur le lien ouvre un fichier PDF, le texte alternatif de l'image devrait en avertir les utilisateurs non-voyants.
HTML/XHTML : Pour les éléments d'applet, l'alternative textuelle sera créée à la fois à l'aide de l'attribut alt et en fournissant du texte à l'intérieur de l'élément d'applet. Les deux sont nécessaires car la prise en charge de l'élément applet varie selon les agents utilisateurs.
HTML/XHTML : Pour les images utilisées comme boutons de formulaire, le texte alternatif sera fourni via l'attribut alt de l'élément de saisie de type img.
HTML/XHTML : les éléments d'entrée de type text, checkbox, radio, file, password, ainsi que les éléments textarea et select, peuvent être associés à une étiquette à l'aide d'un élément label dont l'attribut for doit avoir la même valeur que l'attribut id de l'élément étiqueté. Cette méthode ne peut pas être utilisée pour étiqueter les entrées d'envoi, de réinitialisation, d'image ou de type bouton.
HTML/XHTML : Dans les cas où un élément d'étiquette ne peut pas être utilisé (par manque d'espace ou cela n'a pas de sens), l'attribut title peut être utilisé pour étiqueter les champs d'interaction du formulaire.
HTML/XHTML : les éléments d'objet peuvent contenir l'alternative textuelle dans leur corps ou peuvent contenir une image/vidéo dont l'alternative textuelle est à son tour fournie via son propre attribut alt.

1.3 Fournir des alternatives aux médias temporels

‍

1.3.1. [A] Uniquement audio et vidéo uniquement (préenregistré)

Tout contenu uniquement audio doit être accompagné d'une transcription augmentée avec des éléments descriptifs (liés aux éléments nécessaires à la compréhension).
Tout contenu vidéo uniquement doit être accompagné d'une description audio ou textuelle.

Astuces :

Général : L'alternative textuelle d'un podcast peut être son script (s'il est disponible), enrichi de descriptions d'éléments sonores de fond.
Général : L'alternative textuelle pour une présentation PPT convertie en vidéo silencieuse contiendra à la fois la description du contenu des diapositives et les animations/effets nécessaires à la compréhension.
Général : L'alternative audio pour une présentation PPT convertie en vidéo silencieuse décrira le contenu des diapositives, ainsi que les explications fournies par le présentateur à l'appui de certains points de ces diapositives.
HTML/XHTML : les éléments vidéo peuvent être associés à des éléments de piste en HTML5. L'attribut src de l'élément track peut spécifier un fichier contenant la description audio du film synchronisée avec les événements du film.

1.3.2. [A] Sous-titres (préenregistrés)

Tous les contenus audio-vidéo préenregistrés doivent comporter des sous-titres synchronisés, à moins que le contenu audio-vidéo ne soit lui-même une alternative multimédia au texte (et qu'il soit clairement indiqué comme tel).
Astuces :
HTML/XHTML : L'élément de piste peut être utilisé pour sous-titrer un élément vidéo.

1.3.3. [A] Description audio ou alternative multimédia (préenregistrée)

Pour tout contenu audio-vidéo préenregistré, une alternative doit être fournie, soit une description textuelle (qui est plus qu'une simple légende), soit une description audio.

1.3.4. [AA] Sous-titres (en direct)

Tout contenu multimédia en direct comportant un composant audio doit être accompagné de sous-titres synchronisés.
Astuces :
Général : Des services de traduction en temps réel peuvent être utilisés pour générer de tels sous-titres.

1.3.5. [AA] Description audio (préenregistrée)

Pour tous les contenus audio-vidéo préenregistrés, il doit exister une option permettant de sélectionner une bande son alternative contenant la description audio des images présentées.

1.3.6. [AAA] Langue des signes (préenregistrée)

Pour tous les contenus audio, une interprétation en langage des signes doit également être fournie.

1.3.7. [AAA] Description audio étendue (préenregistrée)

Pour tout contenu audio-vidéo dont le fond sonore ne comporte pas de pauses suffisamment longues pour permettre une description audio synchronisée suffisamment complète, une version multimédia segmentée de manière appropriée pour permettre une description audio étendue doit être fournie.

1.3.8. [AAA] Media Alternative (préenregistré)

Pour tout contenu audio-vidéo ou uniquement vidéo, une alternative descriptive (texte lisible par un lecteur d'écran) doit également être proposée.

1.3.9. [AAA] Audio uniquement (en direct)

Pour tout contenu uniquement audio, une alternative multimédia basée sur la vue (sous-titres en temps réel, vidéo en direct avec l'équivalent en langue des signes, etc.) doit également être proposée.

1.4 Créez du contenu qui peut être présenté de différentes manières sans perdre d'informations ou de structure

‍

1.4.1. [A] Informations et relations

Le balisage sémantique du code HTML doit être utilisé de manière appropriée (pour les titres, les listes, les soulignements, etc.).
Les données tabulaires doivent être structurées dans des tableaux avec des titres et des résumés.
Les entrées du formulaire doivent être marquées d'étiquettes textuelles et groupées de manière appropriée.

1.4.2. [A] Séquence significative

L'ordre de lecture et de navigation de la page doit être logique ; les lecteurs d'écran doivent avoir accès aux informations concernant l'ordre des blocs de la page.

1.4.3. [A] Caractéristiques sensorielles

Les instructions relatives à la compréhension et à l'utilisation du contenu ne doivent pas reposer sur des caractéristiques visuelles (par exemple, « il se trouve dans la colonne de gauche » ou « cliquez sur le carré rouge »).
Les instructions relatives à la compréhension et à l'utilisation du contenu ne doivent pas reposer sur des signaux auditifs (par exemple, « attendez le bip »).

1.5 Permettre aux utilisateurs de voir et d'entendre plus facilement le contenu, notamment en séparant le premier plan de l'arrière-plan

‍

1.5.1. [A] Utilisation de la couleur

La couleur ne doit pas être utilisée comme seul moyen de transmettre des informations ou de gérer les interactions.
Pour distinguer les liens du reste du texte, il ne suffit pas qu'ils aient simplement une couleur différente, à moins que le contraste avec l'arrière-plan ne soit d'au moins 3:1 et que le fait de sélectionner le lien ou de le survoler soit accompagné de l'apparition d'un facteur de différenciation (tel qu'un soulignement).

1.5.2. [A] Contrôle audio

Si une page contient du son qui est lu automatiquement, la page doit comporter des mécanismes permettant d'arrêter, de suspendre, de régler ou de désactiver le son.

1.5.3. [AA] Contraste (minimum)

Le texte et les images du texte doivent présenter un contraste minimum de 4, 5:1.
Le texte de grande taille (au moins 18 points ou 14 points en gras) doit présenter un contraste minimum de 3:1.
Le texte de fond ou le texte des logos sont exemptés de ces conditions.

1.5.4. [AA] Redimensionner le texte

La page doit rester fonctionnelle et lisible lorsqu'elle est redimensionnée jusqu'à 200 % de sa taille d'origine.

1.5.5. [AA] Images de texte

Si les informations peuvent être transmises uniquement en utilisant du texte (éventuellement formaté), l'utilisation d'images contenant ce texte doit être évitée.
Une exception à cette règle est lorsque l'image du texte peut être générée dynamiquement et personnalisée selon les besoins de l'utilisateur.

1.5.6. [AAA] Contraste (amélioré)

Le texte et les images du texte doivent présenter un contraste minimum de 7:1.
Le texte de grande taille (au moins 18 points ou 14 points en gras) doit présenter un contraste minimum de 4, 5:1.
Le texte de fond ou le texte des logos sont exemptés de ces conditions.

1.5.7. [AAA] Bruit de fond faible ou nul

Le bruit de fond d'une conversation doit être inexistant ou pouvoir être atténué afin d'éviter des problèmes de compréhension des mots.
Si le bruit de fond ne peut pas être réglé, son volume doit être inférieur d'au moins 20 dB à celui de la conversation.

1.5.8. [AAA] Présentation visuelle

Pour la présentation visuelle des blocs de texte, un mécanisme doit exister pour permettre l'ajustement afin que les règles suivantes soient respectées :
- L'arrière-plan et la couleur du texte peuvent être sélectionnés par l'utilisateur.
- La largeur peut être réglée sur un maximum de 80 caractères par ligne.
- L'alignement du texte ne doit PAS être justifié (aligné à la fois sur les marges gauche et droite).
- L'espacement entre les lignes d'un paragraphe doit être d'au moins 1,5 et entre les paragraphes d'au moins 2,5.
- Le redimensionnement du texte jusqu'à 200 % de la taille initiale ne doit pas nécessiter de défilement horizontal.

1.5.9. [AAA] Images de texte (sans exception)

Les images de texte ne doivent jamais être utilisées à la place du texte réel.

Simplifier la perceptibilité avec Wawsome

‍

La mise en œuvre manuelle de ces règles peut s'avérer laborieuse et source d'erreurs. Génial est conçu pour automatiser et simplifier cet effort.

‍

Correctifs alimentés par l'IA : Notre plateforme ajoute automatiquement du texte alternatif descriptif aux images et aux étiquettes ARIA essentielles, garantissant qu'aucun contenu non textuel ne reste invisible pour les technologies d'assistance.
Personnalisation de l'utilisateur : Le widget Wawsome donne le contrôle aux visiteurs. Ils peuvent ajuster le contraste, les couleurs, l'espacement et la taille du texte, activer des filtres pour le daltonisme ou choisir des profils prédéfinis pour différents besoins, garantissant ainsi une lisibilité optimale pour tous.

‍

Explorez ces puissantes fonctionnalités et bien d'autres encore en début d'un essai gratuit de 7 jours aujourd'hui !

Conclusion

‍

La perceptibilité est bien plus qu'une simple liste d'exigences techniques ; c'est la base sur laquelle repose une expérience numérique véritablement inclusive. En vous assurant que tous les utilisateurs peuvent percevoir votre contenu, vous ouvrez la voie à une communication efficace et vous démontrez un véritable engagement envers chaque membre de votre public.

‍

Dans notre prochain article, nous aborderons le deuxième principe des WCAG : Opérabilité. Nous allons vous montrer comment faire en sorte que tous les utilisateurs puissent naviguer et interagir avec votre site, quel que soit l'appareil ou la méthode de saisie qu'ils utilisent.