Liste de contrôle de l'accessibilité 2.0 – explications

Explications sur les critères de succès et exemples techniques relatifs
à la liste de contrôle 2.0 pour l'aménagement de sites internet sans barrières,
exposé des  "Règles pour l'accessibilité des contenus Web (WCAG) 2.0"

 

Contenu

1.          Principe: perceptible                                                                                                                                             3

1.1.       Les équivalents textuels.                                                                                                                                      3

1.2.       Média temporel : proposer des versions de remplacement aux médias temporels.                                         4

1.3.       Adaptable : créer un contenu qui puisse être présenté de différentes manières.                                             8

1.4.       Distinguable : faciliter la perception visuelle et auditive du contenu par l'utilisateur.                                    13

2.          Principe: utilisable                                                                                                                                              19

2.1.       Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier.                                          19

2.2.       Délai suffisant : laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu.                     20

2.3.       Crises : ne pas concevoir de contenu susceptible de provoquer des crises.                                                      22

2.4.       Navigable : fournir à l'utilisateur des éléments d'orientation pour naviguer.                                                  23

3.          Principe: compréhensible                                                                                                                                   29

3.1.       Lisible : rendre le contenu textuel lisible et compréhensible.                                                                           29

3.2.       Prévisible : faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.                       32

3.3.       Assistance à la saisie : aider l'utilisateur à éviter et à corriger les erreurs de saisie.                                     34

4.          Principe: Robuste                                                                                                                                                39

4.1.       Compatible : optimiser la compatibilité avec les agents utilisateurs actuels et futurs.                                  39

 

 

 

 

 

Adresse de référence:         http://www.ch.ch/accessibility

Version:                                   2.00

 


I.        Référence: Règles pour l'accessibilité des contenus Web (WCAG) 2.0

Les présentes explications se basent sur les "Règles pour l'accessibilité des contenus Web (WCAG) 2.0", reconnues au niveau international. Le document original figure à l'adresse internet suivante : http://www.w3.org/Translations/WCAG20-de/

Rayon d'application

Le présent document contient les textes originaux de la traduction officielle des grands principes, des règles générales et des critères de succès établis dans les WCAG 2.0. A chaque critère de succès correspondent une rubrique "Comprendre" et une rubrique "Exemple", rédigées en des termes simples. Ces explications permettent d'aménager les sites internet au moyen des techniques actuelles les plus courantes et d'appliquer les règles WCAG de manière efficace.

Le présent document ne remplace pas les directives de "l'Initiative pour l'accessibilité du WEB" (WAI). En cas de doute, le texte original de la WAI fait toujours foi pour porter un jugement définitif.

Exigences de conformité de la WCAG 2.0

Pour qu'un site internet soit conforme à l'un des niveaux prévus – A (minimal), AA (recommandé) ou AAA (maximal) –,  il doit remplir tous les critères de succès du niveau correspondant; à défaut, une version de remplacement conforme au niveau est fournie.  

Exigences de conformité: http://www.w3.org/Translations/WCAG20-de/#conformance-reqs

Termes inscrits dans le glossaire

Pour des raisons de place, des textes importants ne figurent pas ici. De nombreux termes sont donc expliqués dans le glossaire délivré avec le présent document.

Glossaire relatif à la liste de contrôle 2: http://www.access-for-all.ch/checklist/

Glossaire relative à la WAI (français): http://www.w3.org/Translations/WCAG20-fr/ - glossary

Application

La liste de contrôle 2 sert à évaluer l'accessibilité des sites internet. Le maintien de la structure des règles originales WCAG 2.0 et la représentation des textes originaux garantissent une conformité maximale.

Certaines exigences concernent plusieurs critères de succès (CS), ce qui permet d'examiner divers aspects en détail. Ces références croisées sont signalées par une remarque, p. ex. : (voir aussi CS 1.3.1).

Pour chaque critère de succès, un outil de vérification et un lien sont fournis; en outre, diverses solutions de remplacement figurent dans la rubrique "Comment satisfaire".

D'autres informations sont données en annexe au présent document.

 

 

 

1. Principe: perceptible

L'information et les composants de l'interface utilisateur doivent être présentés à l'utilisateur de façon à ce qu'il puisse les percevoir.

1.1.      Les équivalents textuels : proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.

1.1.1.  Contenu non textuel (Niveau A)

Contenu non textuel : tout contenu non textuel présenté à l'utilisateur a un équivalent textuel qui remplit une fonction équivalente sauf dans les situations énumérées ci-dessous.

·         Composant d'interface ou de saisie : si le contenu non textuel est un composant d'interface ou s'il permet la saisie d'informations par l'utilisateur, alors il a un nom qui décrit sa fonction. (Se référer à la Règle 4.1 pour des exigences supplémentaires à propos des composants d'interfaces utilisateur ou des contenus qui permettent la saisie d'informations par l'utilisateur.)

·         Média temporel : si le contenu non textuel est un média temporel, alors l'équivalent textuel fournit au moins une identification descriptive du contenu non textuel. (Se référer à la Règle 1.2 pour des exigences supplémentaires concernant les médias temporels.)

·         Test : si le contenu non textuel est un test ou un exercice qui serait invalide s'il était présenté en texte, alors l'équivalent textuel fournit au moins une identification descriptive du contenu non textuel.

·         Contenu sensoriel : si le contenu non textuel vise d'abord à créer une expérience sensorielle spécifique, l'équivalent textuel fournit au moins une identification descriptive de ce contenu non textuel.

·         CAPTCHA : si ce contenu non textuel vise à confirmer que le contenu est consulté par une personne plutôt que par un ordinateur, alors un équivalent textuel est fourni pour identifier et décrire la fonction du contenu non textuel, et des formes alternatives du CAPTCHA sont proposées pour différents types de perception sensorielle afin d'accommoder différents types de limitations fonctionnelles.

·         Décoration, formatage, invisibilité : si le contenu non textuel est purement décoratif, s'il est utilisé seulement pour un formatage visuel ou s'il n'est pas présenté à l'utilisateur, alors il est implémenté de manière à être ignoré par les technologies d'assistance.

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.

Exemple de code :

<p><img src=“dasbild.gif“ alt=“L'organigramme de l'administration. Explication en longue description“ longdesc=“organigramme-administration.html“ /></p>

 

<p><img src=“dasbild.gif“ alt=“L'organigramme de l'administration. Explication dans le paragraphe suivant“ /></p>

Exemple CAPTCHA:

Illustration 1: deux variantes de CAPTCHAS conformes aux règles d’accessibilité. A gauche, le mot de passe est présenté sous forme de fichier audio ; à droite, l’utilisateur est invité à résoudre un problème de calcul simple.

WCAG 2.0, 1.1.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all

Outil de vérification:        barre d'outils pour développeur Web ou barre d'outils AIS, analyse du texte source

1.2.      Média temporel : proposer des versions de remplacement aux médias temporels.                                    

1.2.1.  Contenu seulement audio ou vidéo (pré-enregistré) (Niveau A)

Pour des médias pré-enregistrés seulement audio et pré-enregistrés seulement vidéo, sauf si l'audio ou la vidéo sont un média de remplacement pour un texte et qu'ils sont clairement identifiés comme tels :

·         Contenu pré-enregistré seulement audio : fournir une version de remplacement pour un média temporel, présentant une information équivalente au contenu seulement audio.

·         Contenu pré-enregistré seulement vidéo : fournir, soit une version de remplacement pour un média temporel, soit une piste audio (présentant une information équivalente) pour un contenu pré-enregistré seulement vidéo.

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).

WCAG 2.0, 1.2.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-av-only-alt

Outil de vérification:        vérification de visu

1.2.2.  Sous-titres (pré-enregistrés) (Niveau A)

Fournir des sous-titres pour tout contenu audio pré-enregistré dans un média synchronisé, excepté lorsque le média est un média de remplacement pour un texte et qu'il est clairement identifié comme tel.

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.

WCAG 2.0, 1.2.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-captions

Outil de vérification:        vérification de visu

1.2.3.  Audiodescription ou version de remplacement pour un média temporel (pré-enregistré) (Niveau A)

Fournir une version de remplacement pour un média temporel ou une audiodescription du contenu vidéo pré-enregistré pour un média synchronisé, excepté quand le média est un média de remplacement pour un texte et qu'il est clairement identifié comme tel.

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).

WCAG 2.0, 1.2.3, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc

Outil de vérification:        vérification de visu

1.2.4.  Sous-titres (en direct) (Niveau AA)

Fournir des sous-titres pour tout contenu audio en direct, sous forme de média synchronisé.

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.

WCAG 2.0, 1.2.4, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-real-time-captions

Outil de vérification:        vérification de visu

1.2.5.  Audiodescription (pré-enregistrée) (Niveau AA)

Fournir une audiodescription pour tout contenu vidéo pré-enregistré, sous forme de média synchronisé.

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.

WCAG 2.0, 1.2.5, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc-only

Outil de vérification:        vérification de visu

1.2.6.  Langue des signes (pré-enregistrée) (Niveau AAA)

Fournir une interprétation en langue des signes pour tout contenu audio pré-enregistré, sous forme de média synchronisé.

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   http://www.pisourd.ch/

WCAG 2.0, 1.2.6, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-sign

Outil de vérification:        vérification de visu

1.2.7.  Audiodescription étendue (pré-enregistrée) (Niveau AAA)

Lorsque les blancs présents dans le fond sonore ne sont pas suffisants pour permettre à l'audiodescription de transmettre le sens de la vidéo, fournir une audiodescription étendue pour tout contenu vidéo pré-enregistré sous la forme de média synchronisé.

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.

WCAG 2.0, 1.2.7, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-extended-ad

Outil de vérification:        vérification de visu

1.2.8.  Version de remplacement pour un média temporel (pré-enregistrée) (Niveau AAA)

Fournir une version de remplacement pour un média temporel, pour tout contenu de type média synchronisé pré-enregistré et pour tout média pré-enregistré seulement vidéo.

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.

Exemple:

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

WCAG 2.0, 1.2.8, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-text-doc

Outil de vérification:        vérification de visu

1.2.9.  Seulement audio (en direct) (Niveau AAA)

Fournir une version de remplacement pour un média temporel, donnant une information équivalente pour un contenu seulement audio en direct.

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.

WCAG 2.0, 1.2.9, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-live-audio-only

Outil de vérification:        vérification de visu

 

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

1.3.1.  Information et relations (Niveau A)

L'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte.

Comprendre 1.3.1 A.  Structure des en-têtes:

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.

Exemple 1.3.1 A Structure des titres

Illustration 2: A gauche on voit un aperçu schématique d’un site Web typique avec ses blocs d’informations sur fond gris, à droite le langage de balisage qui s’y réfère. Les blocs d’informations peuvent être structurés à l’aide de titres (h1, h2, ..., h6) et de listes (ul).

Exemple de code En-têtes invisibles:

Les codes de la classe CSS permettent de masquer les en-têtes; celles-ci sont alors déplacées hors de la fenêtre d'affichage. Ces codes sont en règle générale définis comme liens invisibles, accessibles uniquement à des utilisateurs de lecteurs d'écran.

.hidden {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

Comprendre 1.3.1 B. Enumérations et listes:

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 (<ul> ou <ol>) et les sous-catégories dans une autre liste.

-       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).

-       Les listes doivent être correctement imbriquées (voir exemple de code).

Exemples de code:

<ul id="menue"><!—veiller à l'imbrication correcte -->

   <li><a href="#">point supérieur 01</a>

        <ul class="submenue" id="active">

           <li><a href="#">sous-menu 1.a</a></li>

           <li><a href="#">sous-menu 1.b</a></li>

           <li><a href="#">sous-menu 1.c</a></li>

        </ul>

   </li>         

<li> ... </li>

</ul>

 

<dl><!—Liste de définitions -->

  <dt><a href="website.htm">Website</a></dt>

  <dd>Description ou commentaire du lien contenu dans l'élément DT</dd>

  <dd>Egalement possible avec plusieurs cellules de définitions</dd>

</dl>

 

Comprendre 1.3.1 C. Liaisons entre formulaires:

Il faut utiliser l'élément <label> pour relier logiquement les étiquettes et les champs de saisie des formulaires. L'élément <fieldset> sert à créer des sections dans les longs formulaires et à regrouper les cases à cocher et les boutons radio.

Meilleures pratiques pour les formulaires: http://www.usability.com.au/resources/wcag2/
Remarque:

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

Exemple de code:

 

<form action="formulaire.html">

    <fieldset>

         <legend>

               Données personnelles

         </legend>

         <label for="vn">

               Prénom:

         </label>

         <input type="texte" id="vn" title="Veuillez saisir votre prénom" name="Prénom" value="">

         <br />

         <label for="nn">

               Nom:

         </label>

         <input type="texte" id="nn" title="Veuillez saisir votre nom" name="Nom" value="">

         <br />

         Veuillez cocher:

         <input type="checkbox" id="sélection" name="agb" value="">

         <label for="sélection">

               J’ai lu les conditions générales de vente.</label>

         <br />

    </fieldset>

</form>

 

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é.

Le lecteur d'écran lit par exemple le code ci-dessus de la manière suivante:

„Formulaire

Données personnelles: Champ de saisie Prénom,
Données personnelles: Champ de saisie Nom,
Données personnelles: Champ de selection J’ai lu les conditions générales de vente
Fin du formulaire“

Cases à cocher et boutons radio

Afin que les personnes malvoyantes puissent utiliser correctement les cases à cocher et les boutons radio, ceux-ci doivent être reliés aux étiquettes correspondantes par un "fieldset".

Exemple de code:

<fieldset>

<legend>Titre</legend>

<div>

<input type="radio" name="titre" id="titre_madame" value="1" />

<label for="titre_madame">Madame</label>

</div>

<div>

<input type="radio" name="titre" id="titre_monsieur" value="0" />

<label for="titre_monsieur">Monsieur</label>

</div>

</fieldset>

Commentaire:

Les "ID" (identifiants) sont uniques dans tout le document et ne peuvent donc être utilisés qu'une seule fois. Les attributs "name" des éléments radio sont les mêmes. Les éléments "ID" sont différents.

Comprendre 1.3.1 D. Tableaux de données

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).

Exemple de code 1 pour un tableau de données simple muni d’en-têtes de colonnes avec en-têtes uniquement (<th>):

Comparaison entre trois villes

Coire

Berne

Bâle

1287

2355

2233

 

<table>

    <caption>Comparaison entre trois villes</caption>

    <tr>

         <th>Coire</th>

         <th>Berne</th>

         <th>Bâle</th>

    </tr>

    <tr>

         <td>1287</td>

         <td>2355</td>

         <td>2233</td>

    </tr>

</table>

Exemple de code 2 pour un tableau de données dont les en-têtes de colonne et de ligne sont munis de l’attribut scope:

Offices de poste

2005

2006

2007

Succursales principales

2389

2357

2312

Succursales

657

654

649

Agences

135

129

150

 

<table summary="Comparaison du nombre de succursales principales, de succursales et d'agences en 2005, 2006 et 2007">

    <caption>Offices de poste en Suisse</caption>

    <tr>

                   <th scope="col">Offices de poste</th>

                   <th scope="col">2005</th>

                   <th scope="col">2006</th>

                   <th scope="col">2007</th>

              </tr>

              <tr>

         <th scope="row">Succursales principales</th>

         <td>2'389</td>

         <td>2'357</td>

         <td>2'312</td>

    </tr>

    <tr>

         <th scope="row">Succursales</th>

                   <td>657</td>

                   <td>654</td>

                   <td>649</td>

    </tr>

    <tr>

         <th scope="row">Agences</th>

         <td>135</td>

         <td>129</td>

         <td>150</td>

    </tr>
</table>

 

Comprendre 1.3.1 E. Utilisation des signes

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 <cite> et les extraits avec <blockquote>; d'autres éléments sont aussi employés, tels que <q>, <em> et <strong>, <sup>, <sub>.

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 <pre> 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.

WCAG 2.0, 1.3.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation 

Outil de vérification:        barre d'outils pour développeur Web, barre d'outils Accessibilité du Web, analyse du code source, vérification de visu

1.3.2.  Ordre séquentiel logique (Niveau A)

Lorsque l'ordre de présentation du contenu affecte sa signification, un ordre de lecture correct peut être déterminé par un programme informatique.

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.

Exemple:

Illustration 3: La séquence des contenus est importante au plan visuel (illustration à gauche), mais le sens doit aussi être préservé en cas de désactivation des CSS (illustration à droite).

WCAG 2.0, 1.3.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-sequence

Outil de vérification:        vérification de visu, désactivation des CSS

1.3.3.  Caractéristiques sensorielles (Niveau A)

Les instructions données pour la compréhension et l'utilisation du contenu ne doivent pas reposer uniquement sur les caractéristiques sensorielles des éléments comme la forme, la taille, l'emplacement visuel, l'orientation ou le son.

Note : pour les exigences liées à la couleur, se référer à la Règle 1.4.

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."

WCAG 2.0, 1.3.3, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-understanding 

Outil de vérification:        vérification de visu, Script Greasemonkey

 

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

1.4.1.  Utilisation de la couleur (Niveau A)

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

Note : ce critère de succès traite spécifiquement de la perception des couleurs. Les autres formes de perception sont traitées à la règle 1.3 comme l'accès à la couleur par programme informatique et les autres formes de codage de la présentation visuelle.

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.

Illustration 4: L’illustration à gauche indique quels cours disposent encore de places libres. L’information n’est véhiculée que par les couleurs verte, rouge et jaune. Une personne aveugle ou affectée de troubles de la vision des couleurs ne peut la capter. Il suffit d’un signe supplémentaire (illustration à droite) pour que l’information lui soit accessible indépendamment de la couleur.

WCAG 2.0, 1.4.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-without-color 

Outil de vérification:        vérification de visu, désactivation des CSS, utilisation de réglages des couleurs définis par l'utilisateur

1.4.2.  Contrôle du son (Niveau A)

Si du son sur une page Web est audible automatiquement pendant plus de 3 secondes, un mécanisme est disponible pour le mettre en pause, l'arrêter ou pour en contrôler le volume de façon indépendante du niveau de volume du système général.

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:

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.

WCAG 2.0, 1.4.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-dis-audio 

Outil de vérification:        vérification de visu

1.4.3.  Contraste (minimum) (Niveau AA)

La présentation visuelle du texte et du texte sous forme d'image  a un rapport de contraste d'au moins 4,5:1, sauf dans les cas suivants :

·         Texte agrandi : le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 3:1;

·         Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif.

·         Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque

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écessaire:

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 police de caractère:

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.

Contraste des couleurs

Illustration 5: L’outil « Color Contrast Analyzer » (disponible aussi en français) permet d’analyser et d’adapter les couleurs dès le stade du design.  L’algorithme « luminance » adapte les couleurs aux exigences des WCAG 2.0.

WCAG 2.0, 1.4.3, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Outil de vérification:        vérification de visu, mesure du contraste avec le logiciel Colour Contrast Analyser (logiciel gratuit Win, Mac): http://www.visionaustralia.org.au/info.aspx?page=628

1.4.4.  Redimensionnement du texte (Niveau AA)

À l'exception des sous-titres et du texte sous forme d'image, le texte peut être redimensionné jusqu'à 200 pour cent sans l'aide d'une technologie d'assistance et sans perte de contenu ou de fonctionnalité.

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:

o    Internet Explorer 7, 8, fonction zoom : 200%.

o    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:

o    Internet Explorer 7, 8 : "Taille du texte grande"

o    Firefox: agrandissement du texte : appuyer deux fois sur "strg" + "+" (agrandir avec fonction "Texte uniquement" activée).:

Exemple Agrandissement du texte

Illustration 6: A gauche, la page Web dans sa présentation normale, à droite avec un agrandissement à 200 % dans le navigateur Firefox. Tous les textes doivent rester lisibles.

WCAG 2.0, 1.4.4, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale 

Outil de vérification:        Internet Explorer, Firefox, vérification de visu

1.4.5.  Texte sous forme d'image (Niveau AA)

Si les technologies utilisées peuvent réaliser la présentation visuelle, du texte est utilisé pour véhiculer l'information plutôt que du texte sous forme d'image sauf dans les cas suivants :

·         Personnalisable : le texte sous forme d'image peut être personnalisé visuellement selon les exigences de l'utilisateur;

·         Essentielle : une présentation spécifique du texte est essentielle à l'information véhiculée.

Note : les logotypes sont considérés comme essentiels (le texte qui fait partie d'un logo ou d'un nom de marque).

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.

WCAG 2.0, 1.4,5, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-presentation 

Outil de vérification:        Internet Explorer, Firefox, réglage des couleurs défini par l'utilisateur, vérification de visu

1.4.6.  Contraste (amélioré) (Niveau AAA)

La présentation visuelle du texte et du texte sous forme d'image a un rapport de contraste d'au moins 7:1, sauf dans les cas suivants :

·         Texte agrandi : le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 4,5:1;

·         Texte décoratif : aucune exigence de contraste pour le texte ou le texte sous forme d'image qui fait partie d'un composant d'interface utilisateur inactif, qui est purement décoratif, qui est invisible pour tous ou qui est une partie d'une image contenant un autre contenu significatif.

·         Logotypes : aucune exigence de contraste pour le texte faisant partie d'un logo ou d'un nom de marque.

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

WCAG 2.0, 1.4.6, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast7 

Outil de vérification:        logiciel Color Contrast Analyser

1.4.7.  Arrière-plan sonore de faible volume ou absent (Niveau AAA)

Pour un contenu seulement audio pré-enregistré qui (1) contient principalement de la parole au premier plan, (2) n'est pas un CAPTCHA ou un logo sonore et (3) qui n'est pas une vocalisation dont l'intention est principalement d'être musicale comme une chanson ou un rap, au moins l'une des conditions suivantes est vraie :

·         Sans arrière-plan : le contenu audio ne contient pas d'arrière-plan sonore.

·         Désactivation : l'arrière-plan sonore peut être désactivé.

·         20 dB : l'arrière-plan sonore est au moins 20 décibels plus faible que le contenu parlé au premier plan sauf pour certains effets sonores occasionnels durant seulement une ou deux secondes.

Note : par la définition du "décibel", le volume de l'arrière-plan sonore correspondant à cette exigence est approximativement quatre fois plus faible que le contenu parlé au premier plan.

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.

WCAG 2.0, 1.4.6, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-noaudio 

Outil de vérification:        vérification de visu

1.4.8.  Présentation visuelle (Niveau AAA)

Pour la présentation visuelle des blocs de texte, un mécanisme est disponible permettant de réaliser ce qui suit :

·         Les couleurs de premier plan et d'arrière-plan peuvent être choisies par l'utilisateur.

·         La largeur n'excède pas 80 caractères ou glyphes (40 si CJK).

·         Le texte n'est pas justifié (aligné simultanément à droite et à gauche).

·         L'espacement entre les lignes (interlignage) est d'une valeur d'au moins 1,5 dans les paragraphes et l'espacement entre les paragraphes est au moins 1,5 fois plus grand que la valeur de l'interligne.

·         La taille du texte peut être redimensionnée jusqu'à 200 pour cent sans l'aide d'une technologie d'assistance et sans que l'utilisateur soit obligé de faire défiler le texte horizontalement pour lire une ligne complète dans une fenêtre plein écran.

Comprendre:

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

WCAG 2.0, 1.4.8, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-visual-presentation 

Outil de vérification:        vérification de visu

1.4.9.  Texte sous forme d'image (sans exception) (Niveau AAA)

Le texte sous forme d'image est utilisé seulement pour du texte purement décoratif ou lorsqu'une présentation spécifique du texte est essentielle à l'information véhiculée.

Note : les logotypes (le texte qui fait partie d'un logo ou d'un nom de marque) sont considérés comme essentiels.

Comprendre:

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

WCAG 2.0, 1.4.9, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-images 

Outil de vérification:        vérification de visu

 

2. Principe : utilisable

Les composants de l'interface utilisateur et de navigation doivent être utilisables.

2.1.      Accessibilité au clavier : rendre toutes les fonctionnalités accessibles au clavier.

2.1.1.  Clavier (Niveau A)

Toutes les fonctionnalités du contenu sont utilisables à l'aide d'une interface clavier sans exiger un rythme de frappe propre à l'utilisateur, sauf lorsque la fonction sous-jacente nécessite une saisie qui dépend du tracé du mouvement effectué par l'utilisateur et pas seulement des points de départ et d'arrivée de ce tracé.

Note 1 : cette exception ne concerne que la fonction sous-jacente et non la technique de saisie. Par exemple, lorsqu'on utilise l'écriture manuscrite pour saisir du texte, la technique de saisie (l'écriture manuscrite) nécessite une saisie qui dépend d'un tracé, mais la fonction sous-jacente (la saisie de texte) ne le requiert pas.

Note 2 : cela n'interdit pas et ne devrait pas décourager l'utilisation de la souris ou de toute autre méthode de saisie en plus de l'utilisation du clavier.

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.

WCAG 2.0, 2.1.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-keyboard-operable 

Outil de vérification:        vérification de visu

2.1.2.  Pas de piège au clavier (Niveau A)

Si le focus du clavier peut être positionné sur un élément de la page à l'aide d'une interface clavier, réciproquement, il peut être déplacé hors de ce même composant simplement à l'aide d'une interface clavier et, si ce déplacement exige plus que l'utilisation d'une simple touche flèche ou tabulation ou toute autre méthode standard de sortie, l'utilisateur est informé de la méthode permettant de déplacer le focus hors de ce composant.

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:

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:

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

WCAG 2.0, 2.1.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-trapping 

Outil de vérification:        vérification de visu

2.1.3.  Clavier (pas d'exception) (Niveau AAA)

Toutes les fonctionnalités du contenu sont utilisables à l'aide d'une interface clavier sans exiger un rythme de frappe propre à l'utilisateur.

Comprendre:

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

WCAG 2.0, 2.1.3, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-all-funcs 

Outil de vérification:        vérification de visu

2.2.      Délai suffisant : laisser à l'utilisateur suffisamment de temps pour lire et utiliser le contenu.

2.2.1.  Réglage du délai (Niveau A)

Pour chaque limite de temps fixée par le contenu, au moins l'un des points suivants est vrai :

·         Suppression : l'utilisateur a la possibilité de supprimer la limite de temps avant de la rencontrer ; ou

·         Ajustement : l'utilisateur a la possibilité d'ajuster la limite de temps avant de la rencontrer dans un intervalle d'au moins dix fois la durée paramétrée par défaut ; ou

·         Extension : l'utilisateur est averti avant que la limite de temps n'expire et il lui est accordé au moins 20 secondes pour étendre cette limite par une action simple (par exemple, « appuyer sur la barre d'espace ») et l'utilisateur a la possibilité d'étendre la limite de temps au moins dix fois ; ou

·         L'exception du temps réel : la limite de temps est une partie constitutive d'un événement en temps réel (par exemple, une enchère) et aucune alternative n'est possible ; ou

·         l'exception de la limite essentielle : la limite de temps est essentielle et l'étendre invaliderait alors l'activité ; ou

·         L'exception des 20 heures : la limite de temps est supérieure à 20 heures.

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.

WCAG 2.0, 2.2.1, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-required-behaviors 

Outil de vérification:        vérification de visu

2.2.2.  Mettre en pause, arrêter, masquer (Niveau A)

Pour toute information en mouvement, clignotante, défilante ou mise à jour automatiquement, tous les points suivants sont vrais :

·         Déplacement, clignotement, défilement : pour toute information en mouvement, clignotante ou défilante qui (1) démarre automatiquement, (2) dure plus de cinq secondes et (3) est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l'utilisateur pour la mettre en pause, l'arrêter ou la masquer, à moins que le mouvement, le clignotement ou le défilement s'avère un élément essentiel au bon déroulement de l'activité; et

·         Mise à jour automatique : pour toute information mise à jour automatiquement qui (1) démarre automatiquement (2) et est présentée conjointement avec un autre contenu, il y a un mécanisme à la disposition de l'utilisateur pour la mettre en pause, l'arrêter ou pour en contrôler la fréquence des mises à jour à moins que la mise à jour automatique s'avère essentielle au bon déroulement de l'activité.

Note 1 : pour les exigences relatives au contenu scintillant ou flashant, se référer à la règle 2.3.

Note 2 : 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. Lire Exigence de conformité 5 : Non-interférence.

Note 3 : il n'est pas exigé que le contenu mis à jour périodiquement par logiciel ou diffusé en flux à l'agent utilisateur conserve ou présente l'information générée ou reçue entre la mise en pause et la reprise de la présentation, puisque cela peut ne pas être techniquement possible et s'avérer trompeur dans beaucoup de situations.

Note 4 : une animation survenant dans une phase de pré-chargement ou dans une situation similaire peut être considérée comme essentielle si aucune interaction n'est permise à tous les utilisateurs durant cette phase et si l'absence d'indication de progression est susceptible de perturber les utilisateurs ou de leur faire croire que le contenu est figé ou défectueux.

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.

WCAG 2.0, 2.2.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-pause 

Outil de vérification:        vérification de visu

2.2.3.  Pas de délai d'exécution (Niveau AAA)

Le temps n'est pas un facteur essentiel dans le déroulement de l'événement ou de l'activité, à l'exception des médias synchronisés non interactifs et des événements en temps réel.

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.

WCAG 2.0, 2.2.3, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-no-exceptions

Outil de vérification:        vérification de visu

2.2.4.  Interruptions (Niveau AAA)

Les interruptions peuvent être reportées ou supprimées par l'utilisateur, à l'exception des interruptions impliquant une urgence.

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.

WCAG 2.0, 2.2.4, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-postponed

Outil de vérification:        vérification de visu

2.2.5.  Nouvelle authentification (Niveau AAA)

Quand une session authentifiée expire, l'utilisateur peut poursuivre son activité sans perte de données après une nouvelle authentification.

Comprendre:

Aucune explication nécessaire.

WCAG 2.0, 2.2.5, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-server-timeout 

Outil de vérification:        vérification de visu

2.3.      Crises : ne pas concevoir de contenu susceptible de provoquer des crises.

2.3.1.  Pas plus de trois flashs ou sous le seuil critique (Niveau A)

Une page Web doit être exempte de tout élément qui flashe plus de trois fois dans n'importe quel intervalle d'une seconde ou ce flash doit se situer sous le seuil de flash générique et le seuil de flash rouge.

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.

WCAG 2.0, 2.3.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-does-not-violate 

Outil de vérification:        vérification de visu

2.3.2.  Trois flashs (Niveau AAA)

Une page Web doit être exempte de tout élément qui flashe plus de trois fois dans n'importe quel intervalle d'une seconde.

Comprendre:

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

WCAG 2.0, 2.3.2, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-three-times

Outil de vérification:        vérification de visu

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

2.4.1.  Contourner des blocs (Niveau A)

Un mécanisme permet de contourner les blocs de contenu qui sont répétés sur plusieurs pages Web.

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 direct au contenu”

-       regrouper les blocs d’information répétitifs ou les signaler avec des en-têtes

-       clés d’accès facultatives

Recommandations:

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-9 en option (uniquement si nécessaire et pertinent)

 

L’intitulé du lien de saut et de la clé d’accès doit être bref (p. ex. "Contenu", "Recherche", etc.), car le lecteur d’écran annonce "lien Contenu". Cette information est claire. Le verrouillage du clavier numérique évite tout conflit entre les raccourcis clavier du système d’exploitation et les logiciels.

Dans l’idéal, il convient de combiner liens de saut et clés d’accès. Dans l’exemple mentionné ci-dessous, les liens de saut sont indiqués au tout début de la page et, pour les voyants, déplacés hors de la fenêtre d’affichage via la classe CSS "liens de saut".

Exemple de code HTML:

<body>

<ul class="liens de saut">

 <li><a href="#menu principal"  clé d’accès="1" title="[ALT + 1]">navigation principale</a></li>

 <li><a href="#contenu" clé d’accès="2" title="[ALT + 2]">Accès au contenu </a></li>

 <li><a href="#additional" clé d’accès="6" title="[ALT + 6]">Informations complémentaires</a></li>

</ul>

Exemple de code CSS:

.liens de saut {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

WCAG 2.0, 2.4.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip 

Outil de vérification:        vérification de visu

2.4.2.  Titre de page (Niveau A)

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

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.

Exemple:

Actualités – Accès pour tous -  Utilisation des technologies adaptée aux personnes handicapées

Exemple de code HTML:

<head>

  <title>Actualités – Accès pour tous – Utilisation des technologies sans barrières

  </title>

  <meta ...

</head>

WCAG 2.0, 2.4.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-title 

Outil de vérification:        vérification de visu

2.4.3.  Parcours du focus (Niveau A)

Si une page Web peut être parcourue de façon séquentielle et que les séquences de navigation affectent la signification ou l'action, les éléments reçoivent le focus dans un ordre qui préserve la signification et l'opérabilité.

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.

Exemple:

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

WCAG 2.0, 2.4.3, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-order 

Outil de vérification:        vérification de visu

2.4.4.  Fonction du lien (selon le contexte) (Niveau A)

La fonction de chaque lien est déterminée par le texte du lien seul ou par le texte du lien associé à un contexte du lien déterminé par un programme informatique, sauf si la fonction du lien est ambiguë pour tout utilisateur.

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).

Exemple de code 1:

<p><img src="teas003.jpg" alt="Vue sur la fête avec le lac de Zurich en arrière-plan">Cette année, la fête du printemps a rencontré un vif succès. <span class"wt03"><a href="123.html">lire la suite de l’article . . .</a></span></p>

Autres exemples:

Résumé (PDF, 34 KB)

Formulaire de commande (dans une nouvelle fenêtre)

Important:

Un grand nombre d’utilisateurs considèrent que des textes de lien explicites présentent un avantage non négligeable. Il est donc recommandé de se conformer au critère de succès 2.4.9 Fonction du lien (lien uniquement) (Niveau AAA).

WCAG 2.0, 2.4.4, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

Outil de vérification:        barre d’outils Accessibilité du web

2.4.5.  Accès multiples (Niveau AA)

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

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.

WCAG 2.0, 2.4.3, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-mult-loc

Outil de vérification:        vérification de visu

2.4.6.  En-têtes et étiquettes (Niveau AA)

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

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.

WCAG 2.0, 2.4.6, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-descriptive 

Outil de vérification:        vérification de visu

2.4.7.  Visibilité du focus (Niveau AA)

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

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.

Exemple de code CSS:

a:focus, a:hover, a:active
{
text-decoration:underline;
}

Exemple Visibilité du focus

Illustration 7: Lorsque l’utilisateur se sert du clavier (touche tabulateur), tous les liens apparaissent clairement, et les liens d’accès rapide sont eux aussi affichés dans une zone bien visible (en haut à gauche).

WCAG 2.0, 2.4.6, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-visible 

Outil de vérification:        vérification de visu, Firefox et Internet Explorer

2.4.8.  Localisation (Niveau AAA)

L'utilisateur dispose d'informations pour se situer dans un ensemble de pages Web.

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".

WCAG 2.0, 2.4.8, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-location 

Outil de vérification:        vérification de visu

2.4.9.  Fonction du lien (lien uniquement) (Niveau AAA)

Un mécanisme permet de déterminer la fonction de chaque lien par le texte du lien uniquement, sauf si la fonction du lien est ambiguë pour tout utilisateur.

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".

Exemple de code 1:

<p><img src="teas003.jpg" alt="Vue sur la fête avec le lac de Zurich en arrière-plan"> Cette année, la fête du printemps a rencontré un vif succès. <span class"wt03"><a href="123.html">lire la suite de l’article . . .</a></span></p>

WCAG 2.0, 2.4.9, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-link 

Outil de vérification:        barre d’outils Accessibilité du web

2.4.10.       En-têtes de section (Niveau AAA)

Les en-têtes de section sont utilisés pour organiser le contenu. (Niveau AAA)

Note 1 : « en-tête » est utilisé dans le sens général et comprend les titres et autres moyens de structurer les différents types de contenus.

Note 2 : ce critère de succès concerne les contenus de sections et non les composants d'interface utilisateur. Les composants d'interface utilisateur sont traités par le critère de succès 4.1.2.

Comprendre:

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

WCAG 2.0, 2.4.10, AAA 

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-headings

Outil de vérification:        vérification de visu

3. Principe: compréhensible

Les informations et l'utilisation de l'interface utilisateur doivent être compréhensibles.

3.1.      Lisible : rendre le contenu textuel lisible et compréhensible.

3.1.1.  Langue de la page (Niveau A)

La langue par défaut de chaque page Web peut être déterminée par un programme informatique.

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 4.01 avec la déclaration de contenu text/html à laquelle est ajouté l'attribut langue:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang=“de“>

ou sous forme de documents XHTML 1.0 avec la déclaration de contenu xml et text/html. Les deux déclarations nécessitent un attribut langue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-ch" lang="de-ch">

<head>

ou sous forme de documents XHTML 1.1 avec la déclaration de contenu application/xhtml+xml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>

  <title>document écrit en français</title>

  <meta http-equiv="content-type" content="application/xhtml+xml;

  charset=utf-8" /> </head>

  <body>       ...document écrit en français...  </body>

</html>

ou en tant que document HTML 5:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Swapping Songs</title>

</head>

<body>

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

</body>

</html>

WCAG 2.0, 3.1.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-doc-lang-id

Outil de vérification:        barre d'outils Accessibilité du Web

3.1.2.  Langue d'un passage (Niveau AA)

La langue de chaque passage ou expression du contenu peut être déterminée par un programme informatique sauf pour un nom propre, pour un terme technique, pour un mot dont la langue est indéterminée ou pour un mot ou une expression faisant partie du langage courant de la langue utilisée dans le contexte immédiat.

Comprendre:

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:

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

 

<blockquote lang="de">

<p>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 <span lang="fr">Henry Lagrumière</span> eine Violine.</p>

</blockquote>   

 

WCAG 2.0, 3.1.2, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-other-lang-id

Outil de vérification:        barre d'outils Accessibilité du Web

3.1.3.  Mots rares (Niveau AAA)

Un mécanisme est disponible pour identifier la définition spécifique des mots ou expressions utilisés de manière inhabituelle ou de façon limitée, y compris les expressions idiomatiques et le jargon.

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é.

 

WCAG 2.0, 3.1.3, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-idioms

Outil de vérification:        vérification de visu

3.1.4.  Abréviations (Niveau AAA)

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

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 <abbr> ou <acronym> et l'attribut titre.

Si les abréviations sont toujours désignées par <abbr> ou <acronym> 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.

Exemple:

<p>L'Organisation des Nations Unies (ONU) a élu aujourd'hui son nouveau secrétaire.</p>

<p>Vu que l' <abbr title="Organisation des Nations Unies" lang="en">ONU</abbr> s'est longuement penchée sur ...</p>

WCAG 2.0, 3.1.4, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-located 

Outil de vérification:        vérification de visu

3.1.5.  Niveau de lecture (Niveau AAA)

Lorsqu'un texte nécessite une capacité de lecture plus avancée que le premier cycle de l'enseignement secondaire, après la suppression des noms propres et des titres, un contenu additionnel ou une version qui ne requiert pas de capacité de lecture supérieure au premier cycle de l'enseignement secondaire est disponible.

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.

Exemples:

Informations médicales destinées au grand public
Un groupe de chercheurs publie en ligne des contributions sur les découvertes scientifiques récentes. Chaque contribution est introduite par un résumé avec les principales informations rédigées de manière simple.

Formation en ligne
Un cours en ligne sur la civilisation espagnole contient des textes adaptés à différents niveaux de lecture. Des résumés simples, des photos et des infographies illustrent et facilitent la compréhension des concepts complexes. Le cours peut ainsi être suivi en début d'études, notamment par des étudiants de langue étrangère.

WCAG 2.0, 3.1.5, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-supplements 

Outil de vérification:        vérification de visu

3.1.6.  Prononciation (Niveau AAA)

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

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.

Exemple:

<p>When we talk about these guidelines, we often just call them
 <ruby>
   <rb>WCAG</rb>
    <rp>(</rp>
     <rt>Wuh-KAG</rt>
    <rp>)</rp>
 </ruby>.
</p>

WCAG 2.0, 3.1.6, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-pronunciation 

Outil de vérification:        vérification de visu, Internet Explorer, Firefox avec extension "XHTML Ruby"

3.2.      Prévisible : faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.

3.2.1.  Au focus (Niveau A)

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

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.

WCAG 2.0, 3.2.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-receive-focus 

Outil de vérification:        vérification de visu

3.2.2.  À la saisie (Niveau A)

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

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. 

Exemple automatismes lors de la saisie des données

Illustration 8: L’utilisateur risque d’être perturbé ou irrité lorsque les menus déroulants sont programmés avec JavaScript pour un accès rapide provoquant l’activation automatique d’un lien dès la sélection du menu. Le mieux est de prévoir un bouton « sélectionner » qui doit être activé par l’utilisateur.

WCAG 2.0, 3.2.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-unpredictable-change

Outil de vérification:        vérification de visu

3.2.3.  Navigation cohérente (Niveau AA)

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

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.

WCAG 2.0, 3.2.3, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-locations 

Outil de vérification:        vérification de visu

3.2.4.  Identification cohérente (Niveau AA)

Dans un ensemble de pages Web les composants qui ont la même fonctionnalité sont identifiés de la même façon.

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.

WCAG 2.0, 3.2.4, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-functionality

Outil de vérification:        vérification de visu

3.2.5.  Changement à la demande (Niveau AAA)

Un changement de contexte est initié uniquement sur demande de l'utilisateur ou un mécanisme est disponible pour désactiver un tel changement.

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.

WCAG 2.0, 3.2.5, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-no-extreme-changes-context 

Outil de vérification:        vérification de visu

3.3.      Assistance à la saisie : aider l'utilisateur à éviter et à corriger les erreurs de saisie.

3.3.1.  Identification des erreurs (Niveau A)

Si une erreur de saisie est détectée automatiquement, l'élément en erreur est identifié et l'erreur est décrite à l'utilisateur sous forme de texte.

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.

Exemple Messages d’erreur

Illustration 9: Ce message d’erreur au début de la zone du contenu indique les champs qui contiennent une erreur et est assorti d’un lien permettant d’accéder à la première erreur. Les informations sont indiquées sous forme de texte et sont marquées en rouge.

WCAG 2.0, 3.3.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-identified 

Outil de vérification:        vérification de visu

3.3.2.  Étiquettes ou instructions (Niveau A)

Des étiquettes sont présentées ou des instructions sont fournies quand un contenu requiert une saisie utilisateur.

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.

Exemple de code 1:

<form action="post">
<p><label for=" firstName "><span class="hidden">Erforderlich </span>Vorname:*</label>
<input id="firstName" type="text" /></p>

L’exemple montre comment, à l’aide de la catégorie CSS "hidden" (description : cf. exemple de code sous CS 1.3.1. A), on peut indiquer aux utilisateurs d’écrans de lecture, autrement que par *, que le champ doit être obligatoirement rempli.

Exemple de code 2:

<form action="post">
<p><label for="firstName">Vorname:*</label>
<input id="firstName" type="text" aria-required="true" /></p>

 </form>

Légende:

L’exemple montre combien il est simple d’utiliser l’attribut ARIA "aria-required". Il ne fonctionne cependant qu’avec des navigateurs et lecteurs d’écran récents. En cas d’environnements plus anciens, prière d’utiliser la technique ARIA4.

WCAG 2.0, 3.3.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-cues

Outil de vérification:        vérification de visu

3.3.3.  Suggestion après une erreur (Niveau AA)

Si une erreur de saisie est automatiquement détectée et que des suggestions de corrections sont connues, ces suggestions sont alors proposées à l'utilisateur à moins que cela puisse compromettre la sécurité ou la finalité du contenu.

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)

WCAG 2.0, 3.3.3, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-suggestions 

Outil de vérification:        vérification de visu

3.3.4.  Prévention des erreurs (juridiques, financières, de données) (Niveau AA)

Pour les pages Web qui entraînent des engagements juridiques ou des transactions financières de la part de l'utilisateur, qui modifient ou effacent des données contrôlables par l'utilisateur dans des systèmes de stockages de données, qui enregistrent les réponses de l'utilisateur à un test ou un examen, au moins l'une des conditions suivantes est vraie :

Réversible : les actions d'envoi sont réversibles.

Vérifiée : les données saisies par l'utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l'utilisateur de les corriger.

Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale.

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 Boutons permettant d’éviter des erreurs

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.

Illustration 10: Pour éviter que des erreurs se produisent, songez à insérer des pages de confirmation. Le résumé offre un moyen de contrôle, le bouton « traiter » permet de revenir en arrière et de rééditer le processus de commande, le bouton « passer commande » active le processus.

WCAG 2.0, 3.3.4, AA      

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible

Outil de vérification:        vérification de visu

3.3.5.  Aide (Niveau AAA)

Une aide contextuelle est disponible.

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. 

WCAG 2.0, 3.3.5, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-context-help 

Outil de vérification:        vérification de visu

3.3.6.  Prévention des erreurs (toutes) (Niveau AAA)

Pour des pages Web demandant à l'utilisateur de soumettre des informations, au moins l'une des conditions suivantes est vraie :

Réversible : les actions d'envoi sont réversibles.

Vérifiée : les données saisies par l'utilisateur sont vérifiées au niveau des erreurs de saisie et la possibilité est donnée à l'utilisateur de les corriger.

Confirmée : un mécanisme est disponible pour revoir, confirmer et corriger les informations avant leur soumission finale.

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.

WCAG 2.0, 3.3.6, AAA   

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible-all 

Outil de vérification:        vérification de visu

4. Robuste

Le contenu doit être suffisamment robuste pour être interprété de manière fiable par une large variété d'agents utilisateurs, y compris les technologies d'assistance.

4.1.      Compatible : optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris les technologies d'assistance.

4.1.1.  Analyse syntaxique (Niveau A)

À moins que les spécifications ne le permettent, dans un contenu implémenté via un langage de balisage, les éléments ont des balises de début et de fin complètes, ils sont imbriqués conformément à leurs spécifications, ils ne contiennent pas d'attributs dupliqués et chaque ID est unique.

Note: les balises de début et de fin auxquelles il manque un caractère critique, comme un chevron fermant ou un guillemet pour une valeur d'attribut, sont considérées incomplètes.

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: http://www.w3.org/QA/2002/04/valid-dtd-list.html

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. 

WCAG 2.0, 4.1.1, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-parses  

Outil de vérification:        valideur W3C http://validator.w3.org/

4.1.2.  Nom, rôle et valeur (Niveau A)

Pour tout composant d'interface utilisateur (comprenant mais n'étant pas limité aux éléments de formulaire, liens et composants générés par des scripts), le nom et le rôle peuvent être déterminés par un programme informatique ; les états, les propriétés et les valeurs qui peuvent être paramétrés par l'utilisateur peuvent être définis par programmation ; et la notification des changements de ces éléments est disponible aux agents utilisateurs, incluant les technologies d'assistance.

Note : ce critère de succès s'adresse d'abord aux auteurs qui développent ou programment leurs propres composants d'interface utilisateur. Toutefois, les contrôles HTML standard se conforment déjà à ce critère de succès lorsqu'ils sont utilisés conformément à la spécification.

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.

WCAG 2.0, 4.1.2, A        

Comment satisfaire:       http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-rsv 

Outil de vérification:        vérification de visu


 II.  Annexes

Termes importants dans les WCAG 2

Les WCAG 2 (règles pour l’accessibilité des contenus web) contiennent des termes importants inscrits dans le glossaire. Celui-ci est remis avec le présent document.

Glossaire relatif à la liste de contrôle 2.0: http://www.ch.ch/accessibility

Glossaire relatif à la WAI (français): http://www.w3.org/Translations/WCAG20-fr/#glossary 

Exigences de conformité des WCAG 2

Pour qu'un site internet soit conforme à l'un des niveaux prévus – A (minimal), AA (recommandé) ou AAA (le plus élevé) –,  il doit remplir tous les critères de succès du niveau correspondant, à défaut de quoi une version de remplacement conforme au niveau est fournie.  Le logo de conformité figurant sur le site internet doit être accompagné d’une brève explication avec les éléments nécessaires: http://www.w3.org/Translations/WCAG20-de/ - conformance-claims

Conformité partielle conformément aux WCAG 2

Si le site internet remplit tous les critères, mais que les contenus non vérifiés de celui-ci ne sont pas accessibles à tous (p. ex. les indices boursiers d’un fournisseur externe), il est possible de l’indiquer via une « déclaration de conformité partielle », pour autant que les conditions suivantes soient remplies :

a.     Il s’agit de contenus non soumis au contrôle de l’auteur.

b.     Tous les éléments (pages et domaines) sont indiqués de manière compréhensible.

Exigences de conformité de la législation suisse

La législation recommande de prendre en compte les critères de niveau de conformité A et AA inscrits dans les WCAG 2. Voir la directive de la Confédération P028: http://www.isb.admin.ch/themen/standards/alle/03237/

Participants à l’élaboration de la liste de contrôle 2.0

Un groupe de travail composé d’un collaborateur de l’Office fédéral de la communication OFCOM, de la Chancellerie fédérale CF, de la Poste et de Swisscom a élaboré cette liste de contrôle, sous la direction de la fondation « Accès pour tous . Un groupe d’experts a participé à titre gracieux à la révision.

Le groupe des rédacteurs

Prénom

Nom

Entreprise

Isabelle

Haas

La Poste

Beatrice

Stampbach

Swisscom

Markus

Riesch

Accès pour tous

Sven

Jenzer

Accès pour tous

Le groupe d’experts chargé de la révision

Prénom

Nom

Entreprise

Alain

Vérgeres

Swisscom

Oliver

Füri

La Poste

Julia

Dressler

Unic

Christian

Hahnloser

Unic

Kerstin

Probiesch

Experte d'accessibilité indépendante

 

Tina

Kohler

OFIT

Droits d’utilisation

La transmission et la réutilisation de cette liste de contrôle avec les explications et le glossaire sont expressément autorisées, à condition d’inscrire la mention «AG Accessibility Checkliste 2» et d’appliquer les mêmes conditions. Un exemplaire justificatif sera demandé en cas de modifications du document. Contact: checklist@access-for-all.ch

Mise à jour

La version la plus récente se trouve toujours à l’adresse suivante: http://www.ch.ch/accessibility

Si vous avez des suggestions ou si vous souhaitez signaler une erreur, merci de prendre contact avec les auteurs. Contact: checklist@access-for-all.ch