Comprendre:

Afin que les images contenant des informations soient accessibles tant aux utilisateurs aveugles et malvoyants qu’aux moteurs de recherche, elles doivent être décrites de manière pertinente dans un équivalent textuel.

Lorsque le graphique est une photo ou un symbole (p.ex.: Imprimer, PDF), le contenu représenté doit être décrit de manière équivalente dans le texte alt.

Lorsque le graphique est une infographie, l’équivalent textuel ne suffit souvent pas à décrire le contenu d’un diagramme ou d’un organigramme. L’infographie doit faire l’objet d’une description supplémentaire, ce qui est faisable directement dans le texte proche ou au moyen de l’attribut longdesc.

Comprendre:

Afin que les images contenant des informations soient accessibles tant aux utilisateurs aveugles et malvoyants qu’aux moteurs de recherche, elles doivent être décrites de manière pertinente dans un équivalent textuel.

Lorsque le graphique est une photo ou un symbole (p.ex.: Imprimer, PDF), le contenu représenté doit être décrit de manière équivalente dans le texte alt.

Lorsque le graphique est une infographie, l’équivalent textuel ne suffit souvent pas à décrire le contenu d’un diagramme ou d’un organigramme. L’infographie doit faire l’objet d’une description supplémentaire, ce qui est faisable directement dans le texte proche ou au moyen de l’attribut longdesc.

Comprendre:

Afin que les images contenant des informations soient accessibles tant aux utilisateurs aveugles et malvoyants qu’aux moteurs de recherche, elles doivent être décrites de manière pertinente dans un équivalent textuel.

Lorsque le graphique est une photo ou un symbole (p.ex.: Imprimer, PDF), le contenu représenté doit être décrit de manière équivalente dans le texte alt.

Lorsque le graphique est une infographie, l’équivalent textuel ne suffit souvent pas à décrire le contenu d’un diagramme ou d’un organigramme. L’infographie doit faire l’objet d’une description supplémentaire, ce qui est faisable directement dans le texte proche ou au moyen de l’attribut longdesc.

Comprendre:

Afin que les images contenant des informations soient accessibles tant aux utilisateurs aveugles et malvoyants qu’aux moteurs de recherche, elles doivent être décrites de manière pertinente dans un équivalent textuel.

Lorsque le graphique est une photo ou un symbole (p.ex.: Imprimer, PDF), le contenu représenté doit être décrit de manière équivalente dans le texte alt.

Lorsque le graphique est une infographie, l’équivalent textuel ne suffit souvent pas à décrire le contenu d’un diagramme ou d’un organigramme. L’infographie doit faire l’objet d’une description supplémentaire, ce qui est faisable directement dans le texte proche ou au moyen de l’attribut longdesc.

Comprendre :

Les en-têtes (h1, h2, h3, etc.) introduisent les blocs d'information et reflètent la structure sémantique ainsi que la signification des blocs du site internet. Ce dernier ne doit pas impérativement commencer par un en-tête 1 (h1). Toutefois, les utilisateurs malvoyants apprécient tout particulièrement lorsque les en-têtes sont structurés de manière hiérarchique (h1, suivi de h2, h3, etc.) et qu'il ne manque aucun niveau.

 

Comprendre :

Les en-têtes (h1, h2, h3, etc.) introduisent les blocs d'information et reflètent la structure sémantique ainsi que la signification des blocs du site internet. Ce dernier ne doit pas impérativement commencer par un en-tête 1 (h1). Toutefois, les utilisateurs malvoyants apprécient tout particulièrement lorsque les en-têtes sont structurés de manière hiérarchique (h1, suivi de h2, h3, etc.) et qu'il ne manque aucun niveau.

 

Les listes sont des éléments importants pour le regroupement et la structure sémantiques. Elles aident en particulier les utilisateurs de lecteurs d’écran à déterminer quand des informations sont listées, quels liens vont ensemble et où commence un nouveau groupe de liens. Pour les utilisateurs de lecteurs d'écran, les énumérations non formatées constituent une bande de texte peu lisible dont la durée n'est pas visible. En comparaison, le lecteur d'écran annonce une liste comme suit: "Liste comprenant 12 points …".

• Les énumérations de contenus (p.ex.: listes de produits) ne doivent pas simplement être représentées comme listes, mais doivent aussi être formatées en tant que telles.
• La navigation doit toujours être formatée comme liste, même s’il s’agit d’une navigation horizontale.
• Il faut regrouper les liens dans des unités logiques. Il faut par exemple rassembler plusieurs groupes de catégories principales dans une liste (
  • ou
    1. ) et les sous-catégories dans une autre liste.
    2. Pour les glossaires, les listes commentées de liens ou autres et des listes de définitions (LD) peuvent être utilisées (voir exemple de code).
    3. Les listes doivent être correctement imbriquées (voir exemple de code).

Comprendre :

Il faut utiliser l'élément pour relier logiquement les étiquettes et les champs de saisie des formulaires. L'élément

sert à créer des sections dans les longs formulaires et à regrouper les cases à cocher et les boutons radio.

 

Meilleures pratiques pour les formulaires: Formulaires selon WCAG 2.0

Remarque:

Il faut utiliser l'élément pour relier logiquement les étiquettes et les champs de saisie des formulaires.

Commentaire:

Ce qui a été défini dans le label est lu par synthèse vocale. La commande "legend" sert à étiqueter les sections du formulaire (fieldset). L'étiquetage doit être bref, clair et bien séquencé.

Comprendre :

Il faut utiliser l'élément pour relier logiquement les étiquettes et les champs de saisie des formulaires. L'élément

sert à créer des sections dans les longs formulaires et à regrouper les cases à cocher et les boutons radio.

 

Meilleures pratiques pour les formulaires: Formulaires selon WCAG 2.0

Remarque:

Il faut utiliser l'élément pour relier logiquement les étiquettes et les champs de saisie des formulaires.

Commentaire:

Ce qui a été défini dans le label est lu par synthèse vocale. La commande "legend" sert à étiqueter les sections du formulaire (fieldset). L'étiquetage doit être bref, clair et bien séquencé.

Comprendre :

Tous les contenus sont placés dans un ordre adéquat, afin qu'ils aient aussi un sens par exemple lorsqu'un lecteur d'écran restitue le contenu sans CSS et de façon linéaire.

Comprendre :

Les informations et les instructions doivent être données de sorte à pouvoir être comprises indépendamment de la capacité à discerner les couleurs.

Exemple:

Les points de menu actifs sont non seulement marqués en couleur mais également en gras. Les en-têtes ne figurent pas uniquement en couleur mais également en gras et avec une plus grande police de caractère.

Comprendre :

Les informations et les instructions doivent être données de sorte à pouvoir être comprises indépendamment de la capacité à discerner les couleurs.

Exemple:

Les points de menu actifs sont non seulement marqués en couleur mais également en gras. Les en-têtes ne figurent pas uniquement en couleur mais également en gras et avec une plus grande police de caractère.

Comprendre :

De nombreux malvoyants recourent aux fonctions d'agrandissement du navigateur. Afin qu'ils puissent utiliser ces dernières, la mise en page et les caractères des textes doivent être modifiables.

Exigences :

• la taille des caractères (taille de fonte) est définie dans les CSS en % ou en em;
• l'agrandissement ne doit générer aucune superposition ou suppression de textes. Ceux-ci doivent rester lisibles en tout temps;
• fonction zoom (si disponible) de tout le contenu de la fenêtre jusqu'à 200%, phases de test:
  • Internet Explorer 7, 8, fonction zoom : 200%.
  • Firefox: fonction zoom : 200%; appuyer six fois sur "strg" + "+" (agrandir avec fonction "Texte uniquement" désactivée)
• agrandissement du texte jusqu'à 200% (sans superposition), phases de test:
  • Internet Explorer 7, 8 : "Taille du texte grande"
  • Firefox: agrandissement du texte : appuyer deux fois sur "strg" + "+" (agrandir avec fonction "Texte uniquement" activée).

Comprendre:

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants et malentendants d'accéder aux contenus informatifs pré-enregistrés de type purement audio ou vidéo.

Exemple:

Le contenu visuel d'une vidéo peut être écouté en tant que podcast (fichier audio). A l'inverse, le contenu d'un podcast est décrit visuellement avec des dessins humoristiques. De ce fait, le principe des "deux sens" est respecté.

Alternative : une transcription textuelle (version textuelle) des mots prononcés, avec des références aux actions visibles ou audibles importantes, est mise à disposition sous forme de lien (format RTF ou HTML).

Comprendre:

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants et malentendants d'accéder aux contenus informatifs pré-enregistrés de type purement audio ou vidéo.

Exemple:

Le contenu visuel d'une vidéo peut être écouté en tant que podcast (fichier audio). A l'inverse, le contenu d'un podcast est décrit visuellement avec des dessins humoristiques. De ce fait, le principe des "deux sens" est respecté.

Alternative : une transcription textuelle (version textuelle) des mots prononcés, avec des références aux actions visibles ou audibles importantes, est mise à disposition sous forme de lien (format RTF ou HTML).

Comprendre:

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants et malentendants d'accéder aux contenus informatifs pré-enregistrés de type purement audio ou vidéo.

Exemple:

Le contenu visuel d'une vidéo peut être écouté en tant que podcast (fichier audio). A l'inverse, le contenu d'un podcast est décrit visuellement avec des dessins humoristiques. De ce fait, le principe des "deux sens" est respecté.

Alternative : une transcription textuelle (version textuelle) des mots prononcés, avec des références aux actions visibles ou audibles importantes, est mise à disposition sous forme de lien (format RTF ou HTML).

Comprendre:

Afin que le contenu à caractère informatif de la langue parlée dans des vidéos soit aussi accessible aux utilisateurs malentendants, des sous-titres sont intégrés.

 

 

Comprendre :

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants et malentendants d'accéder aux contenus à caractère informatif de médias pré-enregistrés, p. ex. un podcast audio ou une vidéo sonore. Les actions non-verbales visibles ou audibles doivent être décrites si elles sont importantes au niveau du contenu.

Exemple :

Sous une vidéo figure un lien "audiodescription" vers un document sonore original complété par les commentaires d'un locuteur sur les actions visibles.

Alternative :

une transcription textuelle (version textuelle) des mots prononcés, avec des références aux actions visibles ou audibles importantes, est mise à disposition sous forme de lien (format RTF ou HTML).

Comprendre :

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants et malentendants d'accéder aux contenus à caractère informatif de médias pré-enregistrés, p. ex. un podcast audio ou une vidéo sonore. Les actions non-verbales visibles ou audibles doivent être décrites si elles sont importantes au niveau du contenu.

Exemple :

Sous une vidéo figure un lien "audiodescription" vers un document sonore original complété par les commentaires d'un locuteur sur les actions visibles.

Alternative :

une transcription textuelle (version textuelle) des mots prononcés, avec des références aux actions visibles ou audibles importantes, est mise à disposition sous forme de lien (format RTF ou HTML).

Comprendre :

Des sous-titres sont mis à disposition afin que les contenus audio à caractère informatif transmis en direct soient aussi accessibles aux utilisateurs malentendants.

Exemple :

Le journal télévisé est sous-titré en direct et diffusé sous cette forme.

Comprendre :

Il existe une solution de remplacement qui permet aux utilisateurs malvoyants d'accéder à tous les contenus vidéo pré-enregistrés à caractère informatif. Les actions visibles et les actions non-verbales importantes au niveau du contenu doivent être décrites.

Exemple :

Sous une vidéo figure un lien "audiodescription" vers un document sonore original complété par les commentaires d'un locuteur sur les actions visibles.

Comprendre :

L'utilisation de vidéos en langue des signes est recommandée pour les sites internet qui s'adressent au grand public. Les contenus complexes d'un site doivent être assortis de vidéos en langue des signes, sous forme d'alternative ou de résumé présenté.

La langue maternelle de nombreux malentendants est celle des signes; la langue écrite n'est que leur seconde langue. Ces personnes ont donc souvent de grandes difficultés à comprendre les informations écrites. Seule la langue des signes leur permet d'accéder à toute l'information et leur garantit un niveau de connaissances équivalent. L'usage sans restriction de cette "langue maternelle" contribue ainsi amplement à une transmission non discriminatoire des contenus informatifs aux malentendants.

Exemple :

Exemples de vidéos en langue des signes: www.access-for-all.ch et pisourd.ch

Comprendre :

Les utilisateurs malvoyants doivent pouvoir accéder à tous les contenus vidéo pré-enregistrés à caractère informatif. Il s'agit également de décrire les actions visibles non-verbales importantes au niveau du contenu.

Les critères A et AA sont étendus, par exemple lorsque les pauses entre les scènes sont trop courtes pour que le locuteur ait le temps de décrire les actions visibles.

Exemple :

Sous une vidéo figure un lien "audiodescription étendue" vers un document sonore qui interrompt le son original pour décrire les actions visibles.

Comprendre :

Il doit exister une solution de remplacement pour tout média vidéo pré-enregistré. Il peut s'agir d'une transcription ou d'une description des actions et des textes parlés, mise à disposition sous forme de lien.

Les critères A et AA sont étendus et les exigences formulées ci-dessus élargies à toutes les vidéos pré-enregistrées, c'est-à-dire également à celles dont le contenu figure déjà sur le site internet sous une autre forme.

Comprendre :

Il existe une solution de remplacement pour tous les médias audio transmis en direct, afin que les malentendants puissent également comprendre les contenus.

Exemple :

Un journal télévisé transmis en direct est également diffusé sous forme de texte.

Comprendre :

Pour les tableaux de données simples avec un seul en-tête de colonne, la première ligne peut faire office d'en-tête si l'on utilise "th" au lieu de "tr". Il est possible de supprimer les attributs scope (voir exemple de code 1).

Avec des tableaux de données bidimensionnels, les attributs "scope" doivent être utilisés correctement (voir exemple de code 2). Pour les tableaux de données multidimensionnels ou les en-têtes de colonnes résumés, une affectation peut être effectuée avec l'attribut "ID" (voir technique H43).

Les tableaux nécessitent un en-tête; il peut s'agir d'un en-tête placé au-dessus (h2, ..., h6) ou de l'élément "caption", qu'il est possible de masquer pour les utilisateurs visuels (voir exemple de code 1).

Les tableaux complexes requièrent en outre un résumé (summary). Vu que celui-ci est toujours lu par le lecteur d'écran, il devrait être le plus bref et le plus pertinent possible (voir exemple de code 2).

Il ne faut jamais utiliser de cellules vides pour générer un espace. Lorsqu’une cellule est vide, le mieux est d’y placer un trait d’union (-) ou un zéro (0).

Comprendre :

Pour les tableaux de données simples avec un seul en-tête de colonne, la première ligne peut faire office d'en-tête si l'on utilise "th" au lieu de "tr". Il est possible de supprimer les attributs scope (voir exemple de code 1).

Avec des tableaux de données bidimensionnels, les attributs "scope" doivent être utilisés correctement (voir exemple de code 2). Pour les tableaux de données multidimensionnels ou les en-têtes de colonnes résumés, une affectation peut être effectuée avec l'attribut "ID" (voir technique H43).

Les tableaux nécessitent un en-tête; il peut s'agir d'un en-tête placé au-dessus (h2, ..., h6) ou de l'élément "caption", qu'il est possible de masquer pour les utilisateurs visuels (voir exemple de code 1).

Les tableaux complexes requièrent en outre un résumé (summary). Vu que celui-ci est toujours lu par le lecteur d'écran, il devrait être le plus bref et le plus pertinent possible (voir exemple de code 2).

Il ne faut jamais utiliser de cellules vides pour générer un espace. Lorsqu’une cellule est vide, le mieux est d’y placer un trait d’union (-) ou un zéro (0).

Comprendre :

La séparation des informations au niveau de la structure (contenu et HTML) et de la présentation (CSS) est garantie. Le texte est formaté avec un balisage sémantiquement correct, p. ex. les citations avec et les extraits avec

; d'autres éléments sont aussi employés, tels que , et , ^{, _.}

 

^{_{Si les variations d'écriture ont une signification au niveau du contenu, il faut que cela soit clair pour tous les utilisateurs (les lecteurs d'écran n'identifient par exemple pas les textes en italique). Il ne faut pas utiliser des espaces ou des éléments}}

 pour la mise en page.

 

^{_{Il convient d'éviter certains éléments – Del par exemple – que le lecteur d'écran n'interprète pas correctement. Les modifications (p. ex. lorsque plusieurs personnes travaillent sur le même texte) doivent donc apparaître clairement.}}

Comprendre :

Tous les contenus sont placés dans un ordre adéquat, afin qu'ils aient aussi un sens par exemple lorsqu'un lecteur d'écran restitue le contenu sans CSS et de façon linéaire.

Comprendre :

Tous les contenus sont placés dans un ordre adéquat, afin qu'ils aient aussi un sens par exemple lorsqu'un lecteur d'écran restitue le contenu sans CSS et de façon linéaire.

Comprendre :

Tous les contenus sont placés dans un ordre adéquat, afin qu'ils aient aussi un sens par exemple lorsqu'un lecteur d'écran restitue le contenu sans CSS et de façon linéaire.

Comprendre :

Les informations et les instructions doivent être données de sorte à pouvoir être comprises indépendamment d'éventuelles restrictions sensorielles.

Exemple:

Eviter ce genre de formulation:

"Vous trouverez d'autres informations dans l'encadré grisé en haut à droite."

et écrire plutôt:

"Vous trouverez d'autres informations dans l'encadré intitulé "Utilisation d'un en-tête pertinent."

Comprendre :

Le son automatique dérange énormément les utilisateurs de lecteurs d'écran. Il doit pouvoir être coupé ou baissé.

Exemple:

Il convient de mettre des boutons de commande (lecture, stop, etc.) à disposition.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan. De nombreuses personnes malvoyantes procèdent à des réglages individuels supplémentaires, p. ex. l'inversion des couleurs. Afin que ces réglages puissent produire les effets voulus, un contraste suffisant est nécessaire. Il faut en outre prêter une attention particulière aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécéssaire :

Ecriture: rapport de contraste d'au moins 4,5:1
Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 3:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille de la police :

Peu habituel, le Mass Point (Pt) est utilisé par la WAI. Voici comment il se calcule: avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan. De nombreuses personnes malvoyantes procèdent à des réglages individuels supplémentaires, p. ex. l'inversion des couleurs. Afin que ces réglages puissent produire les effets voulus, un contraste suffisant est nécessaire. Il faut en outre prêter une attention particulière aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécéssaire :

Ecriture: rapport de contraste d'au moins 4,5:1
Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 3:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille de la police :

Peu habituel, le Mass Point (Pt) est utilisé par la WAI. Voici comment il se calcule: avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan. De nombreuses personnes malvoyantes procèdent à des réglages individuels supplémentaires, p. ex. l'inversion des couleurs. Afin que ces réglages puissent produire les effets voulus, un contraste suffisant est nécessaire. Il faut en outre prêter une attention particulière aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécéssaire :

Ecriture: rapport de contraste d'au moins 4,5:1
Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 3:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille de la police :

Peu habituel, le Mass Point (Pt) est utilisé par la WAI. Voici comment il se calcule: avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

De nombreux malvoyants recourent aux fonctions d'agrandissement du navigateur. Afin qu'ils puissent utiliser ces dernières, la mise en page et les caractères des textes doivent être modifiables.

Exigences :

• la taille des caractères (taille de fonte) est définie dans les CSS en % ou en em;
• l'agrandissement ne doit générer aucune superposition ou suppression de textes. Ceux-ci doivent rester lisibles en tout temps;
• fonction zoom (si disponible) de tout le contenu de la fenêtre jusqu'à 200%, phases de test:
  • Internet Explorer 7, 8, fonction zoom : 200%.
  • Firefox: fonction zoom : 200%; appuyer six fois sur "strg" + "+" (agrandir avec fonction "Texte uniquement" désactivée)
• agrandissement du texte jusqu'à 200% (sans superposition), phases de test:
  • Internet Explorer 7, 8 : "Taille du texte grande"
  • Firefox: agrandissement du texte : appuyer deux fois sur "strg" + "+" (agrandir avec fonction "Texte uniquement" activée).

Comprendre :

Du texte – plutôt que des images – est utilisé pour transmettre des contenus. Le texte peut être présenté à l'aide de techniques graphiques CSS.

Comprendre :

Du texte – plutôt que des images – est utilisé pour transmettre des contenus. Le texte peut être présenté à l'aide de techniques graphiques CSS.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan.

Ce critère de succès élargit le CS 1.4.3 à des valeurs minimales supérieures.

Il faut en outre prêter une attention particulière aux liens aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécessaire :

Ecriture: rapport de contraste d'au moins 7:1

Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 4,5:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille des caractères :

Avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan.

Ce critère de succès élargit le CS 1.4.3 à des valeurs minimales supérieures.

Il faut en outre prêter une attention particulière aux liens aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécessaire :

Ecriture: rapport de contraste d'au moins 7:1

Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 4,5:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille des caractères :

Avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

Il est très important d'avoir un contraste de couleurs suffisant pour que le texte soit lisible et qu'il se détache bien de l'arrière-plan.

Ce critère de succès élargit le CS 1.4.3 à des valeurs minimales supérieures.

Il faut en outre prêter une attention particulière aux liens aux liens changeant d'apparence au survol du pointeur (pseudo-style hover) ainsi qu'aux liens actifs et ayant le focus.

Contraste minimum nécessaire :

Ecriture: rapport de contraste d'au moins 7:1

Ecriture de grande taille (à partir de 18 Pt ou de 14 Pt + gras): rapport d'au moins 4,5:1 (également valable pour les textes dans des graphiques à contenu informatif, mais pas impératif pour les logotypes)

Remarque sur la taille des caractères :

Avec un écran dont la résolution est de 1200 x 900 pixels, la taille 18 Point correspond au moins à 5,3 mm de hauteur pour le W majuscule; la taille 14 Pt et gras correspond au moins à 4 mm de hauteur pour le W majuscule gras.

Comprendre :

Afin que les utilisateurs tributaires des contenus parlés puissent bien les comprendre, ces derniers ne doivent contenir que peu ou pas d'arrière-plan sonore.

Comprendre :

Le respect des critères typographiques énumérés permet d'améliorer la lisibilité des contenus.

Comprendre :

Le respect des critères typographiques énumérés permet d'améliorer la lisibilité des contenus.

Comprendre :

Le respect des critères typographiques énumérés permet d'améliorer la lisibilité des contenus.

Comprendre :

Le respect des critères typographiques énumérés permet d'améliorer la lisibilité des contenus.

Comprendre :

Le respect des critères typographiques énumérés permet d'améliorer la lisibilité des contenus.

Comprendre :

Du texte - plutôt que des images - est utilisé pour transmettre des contenus importants

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier et non de la souris. Certains périphériques de saisie spécifiques utilisent également le clavier comme interface.

La spécification "Accessibility for Rich Internet Applications" (ARIA) permet d’optimiser les paramètres personnels pour l’utilisation du clavier.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier et non de la souris. Certains périphériques de saisie spécifiques utilisent également le clavier comme interface.

La spécification "Accessibility for Rich Internet Applications" (ARIA) permet d’optimiser les paramètres personnels pour l’utilisation du clavier.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier et non de la souris. Certains périphériques de saisie spécifiques utilisent également le clavier comme interface.

La spécification "Accessibility for Rich Internet Applications" (ARIA) permet d’optimiser les paramètres personnels pour l’utilisation du clavier.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier. Certains éléments tels que des fichiers vidéo ou des paramètres personnels peuvent « asservir » le focus clavier, rendant la navigation inaccessible. Tous les navigateurs actuels doivent empêcher que de tels cas de figure se produisent.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Exemple :

« Fermez la fenêtre Lightbox en appuyant sur la touche ESC ».

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier. Certains éléments tels que des fichiers vidéo ou des paramètres personnels peuvent « asservir » le focus clavier, rendant la navigation inaccessible. Tous les navigateurs actuels doivent empêcher que de tels cas de figure se produisent.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Exemple :

« Fermez la fenêtre Lightbox en appuyant sur la touche ESC ».

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur au moyen du clavier. Certains éléments tels que des fichiers vidéo ou des paramètres personnels peuvent « asservir » le focus clavier, rendant la navigation inaccessible. Tous les navigateurs actuels doivent empêcher que de tels cas de figure se produisent.

Si l’utilisateur reçoit au préalable des informations sous forme textuelle, il est également possible de se servir d’autres touches du clavier que celles habituellement utilisées (tabulation, flèches) pour exécuter une fonction.

Exemple :

« Fermez la fenêtre Lightbox en appuyant sur la touche ESC ».

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur via le clavier. Il doit être possible d’utiliser le clavier sans aucune exception.

Comprendre :

De nombreux utilisateurs se servent de l’ordinateur via le clavier. Il doit être possible d’utiliser le clavier sans aucune exception.

Comprendre :

Un grand nombre de personnes utilisent l’ordinateur très lentement. Les intervalles ou les limites de temps doivent donc être adaptables.

Exemple :

Le temps de session lors de l’exécution d’une commande.

Note :

Ce critère de succès permet de s'assurer que les utilisateurs peuvent compléter leurs tâches sans changement inattendu de contenu ou de contexte résultant de la limite de temps. Il devrait être considéré conjointement avec le critère de succès 3.2.1, qui pose des limites aux changements de contenu ou de contexte résultant d'une action de l'utilisateur.

Comprendre :

Un grand nombre de personnes utilisent l’ordinateur très lentement. Les intervalles ou les limites de temps doivent donc être adaptables.

Exemple :

Le temps de session lors de l’exécution d’une commande.

Note :

Ce critère de succès permet de s'assurer que les utilisateurs peuvent compléter leurs tâches sans changement inattendu de contenu ou de contexte résultant de la limite de temps. Il devrait être considéré conjointement avec le critère de succès 3.2.1, qui pose des limites aux changements de contenu ou de contexte résultant d'une action de l'utilisateur.

Comprendre :

Les contenus qui changent automatiquement peuvent empêcher les utilisateurs éprouvant des besoins cognitifs spécifiques ou ceux travaillant avec des appareils d’assistance (p. ex. un lecteur d’écran) d’exploiter la page.

Exemple :

Un bandeau d’informations défilant automatiquement, un diaporama.

Comprendre :

Les contenus qui changent automatiquement peuvent empêcher les utilisateurs éprouvant des besoins cognitifs spécifiques ou ceux travaillant avec des appareils d’assistance (p. ex. un lecteur d’écran) d’exploiter la page.

Exemple :

Un bandeau d’informations défilant automatiquement, un diaporama.

Comprendre :

Un grand nombre de personnes utilisent l’ordinateur très lentement. Il convient donc d’éviter de fixer des intervalles ou des limites de temps.

Exemple :

Lors de l’exécution d’une commande, la session n’est pas limitée dans le temps

Comprendre :

Pour de nombreux utilisateurs, les incrustations publicitaires ou les bulletins d’information constituent un obstacle s’ils interrompent l’action en cours. Les messages d’avertissement en cas d’erreur de saisie sont considérés comme exceptionnels et sont autorisés.

Exemple :

Les fenêtres publicitaires intempestives de type popup qui affichent une publicité pour un produit devant la page en cours et que l’utilisateur doit fermer.

Comprendre :

Aucune explication nécessaire.

Comprendre :

Certains flashs peuvent provoquer des crises chez les personnes épileptiques sensibles à la lumière. La luminosité de l’écran est une cause directe.

Note :

Puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l'utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu'il soit utilisé pour satisfaire à d'autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l'exigence de conformité 5 : Non-interférence.

Comprendre :

Certains flashs peuvent provoquer des crises chez les personnes épileptiques sensibles à la lumière. La luminosité de l’écran est une cause directe.

Note :

Puisque tout contenu ne satisfaisant pas à ce critère de succès peut interférer avec la capacité de l'utilisateur à exploiter la page entière, tout le contenu présent dans la page Web (qu'il soit utilisé pour satisfaire à d'autres critères de succès ou non) doit satisfaire à ce critère de succès. Voir l'exigence de conformité 5 : Non-interférence.

Comprendre :

Certains groupes d’utilisateurs ont besoin de tutoriels pour pouvoir naviguer sur les sites internet riches en contenu. Grâce à un lien de saut intitulé "accès au contenu", une personne malvoyante peut accéder directement au texte sans devoir réentendre toutes les étapes de la navigation sur chaque page.

Exigences :

 

• au moins 1 lien de saut appelé "accès au contenu direct"
• regrouper les blocs d'information répétitifs ou les signaler avec des en-têtes
• clés d'accès facultatives

 

Recommendations :

La fondation "Accès pour tous" recommande de paramétrer les liens de saut et les clés d'accès comme suit :

0. "Page d'accueil"
1. "Navigation" (lien de saut à l’intérieur de la page internet)
2. "Contenu" (lien de saut à l’intérieur de la page internet)
3. "Contact"
4. "Plan du site"
5. "Recherche" (lien de saut à l’intérieur de la page internet)
6. et + : en option (uniquement si nécessaire et pertinent)

Comprendre :

Certains groupes d’utilisateurs ont besoin de tutoriels pour pouvoir naviguer sur les sites internet riches en contenu. Grâce à un lien de saut intitulé "accès au contenu", une personne malvoyante peut accéder directement au texte sans devoir réentendre toutes les étapes de la navigation sur chaque page.

Exigences :

 

• au moins 1 lien de saut appelé "accès au contenu direct"
• regrouper les blocs d'information répétitifs ou les signaler avec des en-têtes
• clés d'accès facultatives

 

Recommendations :

La fondation "Accès pour tous" recommande de paramétrer les liens de saut et les clés d'accès comme suit :

0. "Page d'accueil"
1. "Navigation" (lien de saut à l’intérieur de la page internet)
2. "Contenu" (lien de saut à l’intérieur de la page internet)
3. "Contact"
4. "Plan du site"
5. "Recherche" (lien de saut à l’intérieur de la page internet)
6. et + : en option (uniquement si nécessaire et pertinent)

Comprendre :

Pour de nombreux utilisateurs, le titre de page constitue le principal point de repère. Il doit donc décrire le lien thématique de la page en cours.

Exemples :

Recommendations :

 

Comprendre :

Nombre d’utilisateurs se servent du clavier (touche tabulation). Ils parcourent le site internet de façon séquentielle et sont contraints de suivre l’ordre logique des liens.

Exemples :

L’ordre de tabulation doit être logique, en particulier pour le traitement de formulaires.

Comprendre :

Beaucoup d’utilisateurs ont besoin que la fonction du lien soit indiquée de manière extrêmement claire (voir les exemples cités).

L’ouverture de nouvelles fenêtres pose problème (target="_blank"). Il n’est plus nécessaire de préciser "Nouvelle fenêtre", puisque les lecteurs d’écran actuels reconnaissent cette action et l’annoncent à l’utilisateur.

Les voyants apprécient l’indication dans l’attribut titre du tag de lien (titre="dans la nouvelle fenêtre").

Exemples :

Dans le texte, un lien donne des renseignements sur les informations relatives à la fonction de ce lien Une page contient la phrase "Le Moyen-Âge est connu pour ses nombreuses effusions de sang". L’expression "Moyen-Âge" constitue le lien.

Une explication sur un élément textuel est signalée par un lien Une page contient la phrase "Plus d’informations relatives à la Commission irlandaise sur le vote électronique sur le site Go Vote !" L’expression "Go Vote" constitue le lien.

Le lien intègre un icône et un texte Un icône représentant une machine de vote et le texte "Commission irlandaise sur le vote électronique" sont associés au même lien. La balise alt de l’icône est vide (alt=““) car la fonction du lien est déjà expliquée dans le texte à côté de l’icône.

Liste avec titres de livres Un certain nombre de livres sont disponibles en trois formats: HTML, PDF et mp3 (livre audio). Pour éviter une triple répétition du titre (une fois pour chaque format), le titre de chaque livre est indiqué uniquement dans le premier lien (HTML), le deuxième lien s’intitule "PDF" et le troisième "mp3".

Aperçu des articles d’information Un site internet contient un certain nombre d’articles d’information. La page d’accueil répertorie les premières phrases de chaque article, suivies d’un lien "lire la suite de l’article". Etant donné que les liens sont intégrés dans le même paragraphe, une fonction permet aux lecteurs d’écran de faire le rapprochement et d’interpréter la fonction du lien (voir exemple de code 1).

Comprendre :

Beaucoup d’utilisateurs ont besoin que la fonction du lien soit indiquée de manière extrêmement claire (voir les exemples cités).

L’ouverture de nouvelles fenêtres pose problème (target="_blank"). Il n’est plus nécessaire de préciser "Nouvelle fenêtre", puisque les lecteurs d’écran actuels reconnaissent cette action et l’annoncent à l’utilisateur.

Les voyants apprécient l’indication dans l’attribut titre du tag de lien (titre="dans la nouvelle fenêtre").

Exemples :

Dans le texte, un lien donne des renseignements sur les informations relatives à la fonction de ce lien Une page contient la phrase "Le Moyen-Âge est connu pour ses nombreuses effusions de sang". L’expression "Moyen-Âge" constitue le lien.

Une explication sur un élément textuel est signalée par un lien Une page contient la phrase "Plus d’informations relatives à la Commission irlandaise sur le vote électronique sur le site Go Vote !" L’expression "Go Vote" constitue le lien.

Le lien intègre un icône et un texte Un icône représentant une machine de vote et le texte "Commission irlandaise sur le vote électronique" sont associés au même lien. La balise alt de l’icône est vide (alt=““) car la fonction du lien est déjà expliquée dans le texte à côté de l’icône.

Liste avec titres de livres Un certain nombre de livres sont disponibles en trois formats: HTML, PDF et mp3 (livre audio). Pour éviter une triple répétition du titre (une fois pour chaque format), le titre de chaque livre est indiqué uniquement dans le premier lien (HTML), le deuxième lien s’intitule "PDF" et le troisième "mp3".

Aperçu des articles d’information Un site internet contient un certain nombre d’articles d’information. La page d’accueil répertorie les premières phrases de chaque article, suivies d’un lien "lire la suite de l’article". Etant donné que les liens sont intégrés dans le même paragraphe, une fonction permet aux lecteurs d’écran de faire le rapprochement et d’interpréter la fonction du lien (voir exemple de code 1).

Comprendre :

Hormis la navigation dans le site internet, il existe au moins une autre méthode permettant d’accéder aux contenus.

Exemple :

Une fonction recherche ou un plan de site (sommaire) ou les deux.

Comprendre :

Hormis la navigation dans le site internet, il existe au moins une autre méthode permettant d’accéder aux contenus.

Exemple :

Une fonction recherche ou un plan de site (sommaire) ou les deux.

Comprendre :

Pour des questions de lisibilité du contenu, il est important d’insérer des en-têtes de section dans les longs textes, ainsi que des en-têtes ou des étiquettes pour les différentes zones d’un site internet. Ces outils aident les utilisateurs à différencier les zones et à s’y rendre. Les zones actives sur les images cliquables (Image-maps) et les liens qui exécutent les fonctions programmées doivent également comporter des étiquettes.

Exemple :

Les étiquettes doivent être succinctes et pertinentes.

Comprendre :

Pour des questions de lisibilité du contenu, il est important d’insérer des en-têtes de section dans les longs textes, ainsi que des en-têtes ou des étiquettes pour les différentes zones d’un site internet. Ces outils aident les utilisateurs à différencier les zones et à s’y rendre. Les zones actives sur les images cliquables (Image-maps) et les liens qui exécutent les fonctions programmées doivent également comporter des étiquettes.

Exemple :

Les étiquettes doivent être succinctes et pertinentes.

Comprendre :

Pour des questions de lisibilité du contenu, il est important d’insérer des en-têtes de section dans les longs textes, ainsi que des en-têtes ou des étiquettes pour les différentes zones d’un site internet. Ces outils aident les utilisateurs à différencier les zones et à s’y rendre. Les zones actives sur les images cliquables (Image-maps) et les liens qui exécutent les fonctions programmées doivent également comporter des étiquettes.

Exemple :

Les étiquettes doivent être succinctes et pertinentes.

Comprendre :

Pour des questions de lisibilité du contenu, il est important d’insérer des en-têtes de section dans les longs textes, ainsi que des en-têtes ou des étiquettes pour les différentes zones d’un site internet. Ces outils aident les utilisateurs à différencier les zones et à s’y rendre. Les zones actives sur les images cliquables (Image-maps) et les liens qui exécutent les fonctions programmées doivent également comporter des étiquettes.

Exemple :

Les étiquettes doivent être succinctes et pertinentes.

Comprendre :

Lorsque l’on utilise le clavier, il est possible de passer d’un lien à un autre avec la touche tabulation. Si un lien est sélectionné et qu’il a ainsi le focus, il doit être visible pour les utilisateurs travaillant visuellement avec le clavier. Le lien qui a le focus doit se distinguer clairement des autres liens. Les liens de saut doivent également être visibles lorsqu’ils obtiennent le focus.

Comprendre :

Lorsque l’on utilise le clavier, il est possible de passer d’un lien à un autre avec la touche tabulation. Si un lien est sélectionné et qu’il a ainsi le focus, il doit être visible pour les utilisateurs travaillant visuellement avec le clavier. Le lien qui a le focus doit se distinguer clairement des autres liens. Les liens de saut doivent également être visibles lorsqu’ils obtiennent le focus.

Comprendre :

L’utilisateur connaît sa position dans un ensemble de pages internet.

Exemple :

La position actuelle est indiquée au cours de la navigation.

OU

La position actuelle est clairement identifiable via le fil d’Ariane.

OU

Une indication est fournie dans le texte: "Vous êtes à l’étape 3 sur 5".

Comprendre :

Les liens facilement compréhensibles sont d’une grande aide pour de nombreuses personnes. Par exemple, une personne malvoyante utilisant un lecteur d’écran recourt souvent à la fonction "Afficher la liste des liens". De cette manière, tous les liens figurant sur la page en cours s’affichent et peuvent être sélectionnés.

Exemple :

Aperçu des articles d’information Un site internet contient un certain nombre d’articles d’information. La page d’accueil répertorie les premières phrases de chaque article, suivies d’un lien "lire la suite de l’article". Pour que les liens soient clairs, il convient de compléter le lien "lire la suite de l’article" avec le titre du bulletin d’information. Le lien s’intitule dès lors "lire la suite de l’article XY".

Comprendre :

Pour des questions de lisibilité du contenu, il est important d’insérer des en-têtes de section dans les longs textes.

Comprendre :

Il est très important de déterminer la langue principale de chaque page, car le lecteur d’écran lirait sinon une page internet de langue française en anglais.

Exemples de code :

Les documents HTML accessibles à tous peuvent être remis en tant que documents HTML 5 avec la déclaration de contenu text/html à laquelle est ajouté l'attribut langue:

 

Comprendre :

Il est très important de déterminer la langue principale de chaque page, car le lecteur d’écran lirait sinon une page internet de langue française en anglais.

Exemples de code :

Afin que les lecteurs d'écran puissent retranscrire correctement l'expression de passages prononcés dans une autre langue, ils sont formatés avec l'attribut lang.

Exemple de code :

 

 

Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, dass kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. Er kaufte sich beim bekannten Geigenbauer Henry Lagrumière eine Violine.

 

Comprendre :

Il est très important de déterminer la langue principale de chaque page, car le lecteur d’écran lirait sinon une page internet de langue française en anglais.

Exemples de code :

Afin que les lecteurs d'écran puissent retranscrire correctement l'expression de passages prononcés dans une autre langue, ils sont formatés avec l'attribut lang.

Exemple de code :

 

 

Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, dass kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. Er kaufte sich beim bekannten Geigenbauer Henry Lagrumière eine Violine.

 

Comprendre :

 

• des mots spéciaux, par exemple des termes techniques, sont expliqués dans le texte courant;
• un mécanisme est à disposition, p. ex. un lien vers un glossaire où le terme est expliqué.

 

Comprendre :

Les abréviations sont toujours expliquées dans le texte courant ou accompagnées d'un lien vers un glossaire.

Lors de leur première occurrence, elles peuvent figurer en toutes lettres. Ensuite, il est possible d'utiliser ou et l'attribut titre.

Si les abréviations sont toujours désignées par ou et par l'attribut titre, il faut que ce dernier soit utilisé de manière à faciliter l'accessibilité des documents. Cette fonctionnalité permet aux lecteurs d'écran de lire l'attribut titre.

Les abréviations connues et courantes (p. ex.: PDF) ne doivent pas être expliquées

Comprendre :

Les abréviations sont toujours expliquées dans le texte courant ou accompagnées d'un lien vers un glossaire.

Lors de leur première occurrence, elles peuvent figurer en toutes lettres. Ensuite, il est possible d'utiliser ou et l'attribut titre.

Si les abréviations sont toujours désignées par ou et par l'attribut titre, il faut que ce dernier soit utilisé de manière à faciliter l'accessibilité des documents. Cette fonctionnalité permet aux lecteurs d'écran de lire l'attribut titre.

Les abréviations connues et courantes (p. ex.: PDF) ne doivent pas être expliquées

Comprendre :

Lorsqu'il s'agit de transmettre des instructions importantes ou des informations spécifiques, la mise à disposition de résumés simples constitue une aide pour les personnes qui comprennent difficilement la langue écrite.

Comprendre :

Les informations sur la prononciation peuvent figurer immédiatement dans le texte après le mot concerné, faire l'objet d'un lien vers un glossaire contenant des informations sur la prononciation ou être donnée avec l'élément RUBY.

Comprendre :

Afin que les sites internet fonctionnent de manière prévisible pour tous les utilisateurs, une fenêtre s'ouvre, un formulaire est envoyé ou une fonction se déclenche seulement lorsqu'un élément reçoit le focus.

Comprendre :

Afin que les sites Internet fonctionnent de manière prévisible pour tous les utilisateurs, aucune nouvelle fenêtre ne doit être ouverte, aucun formulaire envoyé et aucune fonction déclenchée par une simple saisie dans l’un de ces éléments. Dans le cas contraire, l’utilisateur doit être informé à temps du déclenchement de cet automatisme, ce qui signifie qu’une mise en garde doit être placée directement avant l’élément concerné.

Exemples :

Le choix effectué dans un menu déroulant ne crée pas automatiquement un lien; il doit être confirmé par l'utilisateur (p. ex. bouton "sélectionner").

En cochant une case donnée, les options connexes ne s'affichent qu'après activation d'un bouton de commande par l'utilisateur.

Comprendre :

Afin que les sites internet fonctionnent de manière prévisible pour tous les utilisateurs, les mécanismes de navigation doivent être agencés de la même façon dans toutes les pages.

Exemple :

La fonction de recherche est toujours placée au même endroit.

Les catégories de navigation restent identiques, sauf si l'utilisateur génère des sous-catégories, par exemple en activant un lien.

Comprendre :

Afin que les sites internet fonctionnent de manière prévisible pour tous les utilisateurs, les composants identiques qui reviennent dans plusieurs pages doivent être agencés de la même façon.

Exemple :

La fonction de recherche est agencée de la même manière dans toutes les pages.

Comprendre :

Certains utilisateurs ne reçoivent pas les modifications automatiques. Afin que les sites internet fonctionnent de manière prévisible pour tous, les contenus ne sont modifiés que lorsque l'utilisateur procède expressément au changement.

Exemples :

Commande "Actualiser"
Une commande "Actualiser maintenant" remplace l'actualisation automatique.
Déviation

Il arrive que la déviation d'un ancien vers un nouveau site internet s'effectue à l'insu de l'utilisateur.

L'utilisateur peut effectuer une demande en activant un lien, par exemple.

Comprendre :

Lorsque des erreurs de saisie sont détectées automatiquement, par exemple au moment de remplir un formulaire de contact, les indications apparaissent sous forme de texte pour tous les utilisateurs; il peut s'agir d'un message d'erreur ("alerte système") ou d'un texte visible au début du contenu. L'annonce est effectuée devant le formulaire et le champ contenant l'erreur identifié. L'identification apparaît sous forme de texte, mais peut également revêtir une forme visuelle. Il est préférable que les messages d'erreur figurent en tant que liens, ce qui permet d'aller directement au champ incorrect.

Comprendre :

Lorsque des saisies doivent impérativement être effectuées ou qu'un format particulier est exigé lors de la saisie, il faut que les instructions soient claires et lisibles pour tous.

Exemple de champs obligatoires :

Pour l'indication "champ obligatoire", il faut savoir que le signe * (astérisque) est caché aux utilisateurs de lecteurs d'écran, comme tous les signes de ponctuation. Afin que les personnes malvoyantes sachent quel champ nécessite une saisie, les instructions doivent aussi figurer dans le texte du label. Il est également possible d'utiliser des graphiques avec un astérisque, auxquels est intégrée la balise alt "champ obligatoire". Une autre solution consiste à étiqueter les champs obligatoires au moyen du script WAI-ARIA avec "aria-required="true".

Pour éviter toute redondance, il convient de n'appliquer qu'une seule des mesures proposées.

Comprendre :

Lorsque des saisies doivent être effectuées ou qu'un format particulier est exigé lors de la saisie, il faut que les instructions soient claires et lisibles pour tous. Si le format est complexe, un exemple ou des suggestions de correction sont donnés.

Exemple :

Format de la date (jj.mm.aaaa)

Comprendre :

Pour toutes les saisies où les erreurs commises ont des conséquences importantes, il faut que les utilisateurs puissent vérifier, confirmer, modifier ou supprimer les données avant qu'elles ne soient transmises.

Exemple :

Avant l'envoi d'une commande en ligne, une page de confirmation apparaît avec la commande et les données du client. La commande n'est transmise qu'après avoir été confirmée.

Comprendre :

Une aide contextuelle n'est proposée que si le texte du label ne suffit pas pour décrire toutes les fonctionnalités. L'aide doit être visible et disponible pour tous les utilisateurs.

Exemple :

Candidature en ligne
Certaines questions figurant dans le formulaire de candidature sont difficiles à comprendre. Un lien d'aide accompagnant chaque question donne des instructions et des explications.

Comprendre :

Une aide contextuelle n'est proposée que si le texte du label ne suffit pas pour décrire toutes les fonctionnalités. L'aide doit être visible et disponible pour tous les utilisateurs.

Exemple :

Candidature en ligne
Certaines questions figurant dans le formulaire de candidature sont difficiles à comprendre. Un lien d'aide accompagnant chaque question donne des instructions et des explications.

Comprendre :

Basé sur le CS 3.3.4 Prévention des erreurs, ce critère de succès s'applique à toutes les saisies effectuées par les utilisateurs.

Exemple :

Un récapitulatif des données saisies dans un formulaire de contact est présenté à l'utilisateur avant l'envoi. Il est alors possible de le valider ou de procéder à des modifications.

Comprendre :

Le code de la page est vérifié (validé) et corrigé.

Les éléments implémentés via un langage de balise ont des balises de début et de fin complètes et sont imbriqués conformément à leurs spécifications; ils ne contiennent pas d’attributs multiples et chaque ID est unique, sauf si les spécifications permettent autre chose.

Remarque :

Les navigateurs et autres agents utilisateurs tels que les lecteurs d’écran analysent la syntaxe des documents en fonction de la ligne doctype indiquée et utilisent à cet effet la définition Doctype (DTD). La ligne Doctype doit être valide et rédigée correctement.

Liste des lignes Doctypes recommandées: W3C

Pour assurer une navigation et des contenus web de qualité, il est nécessaire que les codes soient valides et articulés correctement. Les documents XHTML exigent une structure et une syntaxe des codes correctes. Les lecteurs d’écran et les loupes en dépendent beaucoup plus que les navigateurs visuels et ne tolèrent guère d’erreurs.

Comprendre :

Les auteurs de sites internet qui programment leurs propres composants doivent respecter les spécifications des normes internet pour les éléments qu’ils ont générés. Différentes technologies disposent de leurs propres API d’accessibilité, tels que Java, Flash, Mozilla-DHTML, qui doivent également être prises en compte.

Les sites internet et les composants UI créés doivent pouvoir être utilisés avec tous les agents utilisateurs courants, qu’il s’agisse de navigateurs, de lecteurs d’écran ou de loupes.