Interactivité

by admin — last modified 2008-10-08 09:31

Liste des points de contrôle

S'assurer que les pages sont utilisables compte tenu des éléments de programmation. 6.3 (P1)

WCAG 1.0, traduction française d'AccessibilitéWeb

S'assurer que les pages soient utilisables quand les scripts, les applets ou les autres objets programmatiques sont désactivés ou ne sont pas supportés. Si ce n'est pas possible, fournir une information équivalente sur une page alternative accessible.

Section 508 version anglaise

1194.22 (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

1194.22 (m) When a Web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

Exigences de conformité

[...]

4.) Seulement les technologies supportant l’accessibilité :

Seule une technologie Web qui soutien l’accessibilité peut être utilisée pour se conformer aux critères de réussite. Toute information ou fonctionnalité qui est implémentée par une technologie qui ne soutient pas l’accessibilité doit aussi être offerte avec une technologie soutenant l’accessibilité.

5.) Non interférence :
Si une technologie qui ne soutient pas l’accessibilité est utilisée sur une page ou si une technologie soutenant l’accessibilité est utilisée d’une manière non conforme à l’accessibilité, elle n’empêche pas l’utilisateur d’accéder au reste de la page. De plus, la page Web dans son ensemble continue de répondre aux exigences de conformité sous toutes les conditions suivantes :

- quand toute technologie qui ne soutient pas l’accessibilité est activée dans un agent utilisateur et
- quand elle est désactivée dans un agent utilisateur et
- quand est n’est pas soutenue par un agent utilisateur.
Note :
Tous les critères de réussite s’appliquent à l’ensemble d’une page, incluant les technologies qui ne soutiennent pas l’accessibilité ou les technologie dont dépend la conformité à d’autres critères de réussite parce qu’elles interagissent avec certaines choses qui pourraient interférer avec l’utilisation complète de la page : 1.4.2 – Contrôle sonore, 2.1.2 – L’utilisation du clavier n’est pas piégée, 2.3.1 Trois clignotements ou sous le seuil critique et 2.2.2 – Pause, arrêt, masque.

Projet de standard du gouvernement du Québec

01 - 13, a et 02 - 16, a : Un élément de programmation destiné à l’utilisateur doit être utilisable avec les technologies d’adaptation informatiques.

03 - 17, a et 02 - 16, b: Un élément de programmation doit être entièrement utilisable à l’aide du clavier.

RGAA

6.3 Proposer une alternative au code javascript et aux éléments programmables

Test 6.3.1 : Alternative aux éléments applet, object et embed.

Test 6.3.2 : Alternative au code javascript.

AccessiWeb

Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?

Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

WCAG 1.0 est beaucoup plus sévère à ce sujet que la version de travail de WCAG 2.0 ou le Projet de standard du gouvernement du Québec.

Dans WCAG 1.0 :

Si vous utilisez des scripts, vous devez inscrire dans la section <noscript> un contenu équivalent à celui qui devient inaccessible sans les scripts, y compris tous les liens inutilisables sans Javascript.
Il n'est pas nécessaire de placer autant de section <noscript> qu'il y a de scripts. Une seule peut suffire dans laquelle vous regrouperez tout le contenu équivalent aux scripts. Cette balise peut être placée en début ou en fin de page, selon l'utilité de son contenu et n'apparaîtra à l'écran que lorsque javascript est désactivé.
Si les scripts n'ont qu'un effet décoratif comme l'illumination de boutons de navigation, le contenu équivalent peut n'être qu'une simple mention de cette fonction.
Attention ! Malgré ce que l'on pourrait croire, JAWS ne donne pas accès au contenu de l'élément <noscript> parce qu'il supporte Javascript même si ce support a des limites plus ou moins grandes selon la version utilisée.

En fait, JAWS supporte Javascript, mais ne supporte pas toutes les manipulations que l'on peut effectuer avec Javascript. Il ne supporte par, par exemple, les changements de visibilité effectués en manipulant la feuille de style, ce qui rend plusieurs menus déroulant partiellement ou complètement inaccessibles.

Si le système de navigation comporte des menus déroulants ou extensibles, mais que l'en-tête de chacun des menus conduit à une page intermédiaire où l'on trouvera tous les liens contenus dans le menu déroulant, ce menu est tout de même jugé accessible puisque l'utilisateur dispose d'un autre moyen pour accéder au même contenu.

Pour créer un menu déroulant ou extensible dont le contenu sera visible pour JAWS, ce contenu doit être déclaré visible au moment du chargement de la page, quitte à être masqué immédiatement.

Exemple :

<html>
<head>
  <title>WebForm1</title>
  <style type="text/css">
    .open {display: block;} .closed {display: none;} a img {border: 0;}
  </style>
  <script type="text/javascript">
    function toggle(id) { 
      ul = "ul_" + id; 
      img = "img_" + id; 
      ulElement = document.getElementById(ul);
      imgElement = document.getElementById(img); 
      if (ulElement) { 
        if (ulElement.className == 'closed') { 
          ulElement.className = "open"; 
          imgElement.alt = "Cliquez pour fermer le sous-menu.";
          imgElement.src = "j2.gif"; 
        }
        else { 
          ulElement.className = "closed"; 
          imgElement.alt = "Cliquez pour ouvrir le sous-menu.";
          imgElement.src = "j1.gif"; 
        } 
      } 
    } 
  </script>
</head>
<body>
  …
  <ul class="open"> 
    <li id="item1">
      <a href="javascript:toggle('item1')">
        <img id="img_item1" src="j2.gif" alt="Cliquez pour ouvrir le sous-menu." />
        Qui sommes-nous?
      </a>
      <ul id="ul_item1">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>
    <li id="item2">
      <a  href="javascript:toggle('item2')">
        <img id="img_item2" src="j2.gif" alt="Cliquez pour ouvrir le sous-menu." />
        Où allons-nous?
      </a>
      <ul id="ul_item2">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
      </ul>
    </li>
  </ul>
  <!-- Si javascript est activé, ceci va fermer tout les menus 
  à l'ouverture de la page, sinon les menus resteront ouverts. --> 
  <script type="text/javascript">
    document.getElementById('ul_item1').className = "closed";
    document.getElementById('ul_item2').className = "closed";
  </script>
  <noscript>
    <p>Le script de cette page sert à contrôler le menu de navigation.</p>
  </noscript>
</body>
</html>

Note : L'exemple ci-dessus est tiré d'une page réalisée par René Jean.

Dans la version de travail de WCAG 2.0 et dans le Projet de standard du gouvernement du Québec, on n'exige plus que la page demeure utilisable sans javascript, mais plutôt que l'utilisation de javascript soit compatible avec les technologies d'adaptation informatique.

Pour assurer cette compatibilité, on doit, par exemple, utiliser les fonctions du modèle objet de document (DOM, pour Document Object Model, en anglais) pour ajouter du contenu à une page au lieu d'utiliser « document.write » ou « object.innerHTML ». L’instruction « document.write() » ne fonctionne pas avec XHTML lorsque servi avec le MIME approprié de type « (application/xhtml+xml) ». Quant à la propriété « innerHTML », elle ne fait pas partie de la spécification du DOM et doit donc être évitée.

Si les fonctions du DOM sont utilisées pour ajouter du contenu, les agents utilisateur peuvent utiliser le DOM pour retrouver le contenu. La fonction « createElement() » peut être utilisée pour créer des éléments dans le DOM. La fonction « createTextNode() » est utilisée pour créer du texte associé à un élément. Les fonctions « appendChild() », « removeChild() », « insertBefore() » et « replaceChild() » sont utilisées pour ajouter ou enlever des éléments ou des nœuds. Les autres fonctions du DOM sont utilisées pour assigner des attributs aux éléments créés.

Voir aussi Technique 6.3 de WCAG 1.0.

Assurer l'utilisabilité au clavier. 6.4 (P2) et 9.3 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

6.4 : Pour les scripts et les applets, s'assurer que les gestionnaires d'événements soient indépendants du périphérique d'entrée.

9.3 : Pour les scripts, spécifier des gestionnaires d'événements logiques plutôt que des gestionnaires d'événements dépendants du périphérique.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

2.1.1 (niveau A)
Clavier :
Toutes les fonctionnalités du contenu sont utilisables avec une interface au clavier sans exiger une synchronisation spécifique des frappes individuelles, sauf lorsque la fonction sous-jacente dépend du tracé du mouvement et non seulement des points marquant la fin des segments.

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) exige une saisie qui dépend d’un tracé spécifique, mais la fonction sous-jacente (la saisie de texte) ne comporte pas en elle-même une telle exigence.

Note 2 :
Cela n’interdit en rien et ne devrait pas décourager l’utilisation de la souris ou de toute autre méthode de saisie en plus de la saisie au clavier.

Erreurs à éviter :

F54 : Utiliser des événements de scripts seulement à la souris.
F55 : Utiliser un script pour enlever la zone active quand la zone active est déplacée.
F42 : Utiliser des événements de scripts pour émuler des liens.

2.1.2 (niveau A)
L’utilisation du clavier n’est pas piégée :
Si la zone active (focus) peut être déplacée dans un composant de la page par une interface au clavier, la zone active peut alors être déplacée hors de ce composant en utilisant seulement une interface au clavier et, si ce déplacement exige plus que l’utilisation d’une simple touche flèche ou tabulation, l’utilisateur est avisé de la méthode à utiliser pour sortir de ce composant.
Note :
Étant donné qu’un contenu qui ne satisfait pas ce critère de réussite peut interférer avec la capacité du visiteur à utiliser l’ensemble de la page, tout le contenu de la page (qu’il satisfasse ou non à d’autres critères de réussite) doit satisfaire à ce critère particulier. Voir l’item 5 des exigences de conformité : Non interférence.

Erreurs à éviter :

F10 : Combiner plusieurs types de format d’une façon qui peut piéger l’utilisateur à l’intérieur d’un type de format.

2.1.3 (niveau AAA)
Clavier (sans exception) :
Toutes les fonctionnalités du contenu sont utilisables par une interface au clavier sans exiger une synchronisation spécifique des frappes individuelles.

2.4.7 (Niveau AA)
Visibilité de la zone active :
Toute interface utilisable au clavier comporte un mode d’utilisation ou la zone active (focus) est visible.

Erreurs à éviter :

F55 : Utiliser un script pour enlever la zone active quand elle est déplacée.
F78 : Donner un style aux contours ou aux bordures qui rend inopérant ou invisible l’indicateur par défaut de la zone active.

Projet de standard du gouvernement du Québec

01 - 13, a : Un élément de programmation destiné à l’utilisateur doit être utilisable avec les technologies d’adaptation informatiques.
01 - 13, b : Être entièrement utilisable à l’aide du clavier.
01 - 13, c : Si la zone active peut être déplacée dans un composant de la page Web par une interface au clavier, la zone active doit aussi être déplaçable hors de ce composant en utilisant seulement une interface au clavier.

01 - 13, d : Avec une interface au clavier, si un déplacement hors d’un composant d’une page Web exige davantage que l’utilisation d’une simple touche flèche ou tabulation, l’utilisateur doit être informé de la méthode à utiliser pour sortir de ce composant.

03 - 17, b : un élément de programmation doit être entièrement utilisable à l’aide du clavier

RGAA

6.4 Assurer l'indépendance du périphérique d'accès aux fonctions javascript

Test 6.4.1 : Universalité des gestionnaires d'évènements.

Test 6.4.2 : Universalité du gestionnaire d'évènement onclick.

9.3 Assurer l'indépendance d'accès aux gestionnaires d'évènements par les périphériques

Test 9.3.1 : Accessibilité du code javascript utilisant des gestionnaires d'événements sans équivalent universel ou des propriétés propres à un périphérique.

Test 9.3.2 : Accessibilité des éléments object, applet et embed utilisant des gestionnaires d'événements sans équivalent universel ou des propriétés propres à un périphérique.

AccessiWeb

Fiche 7.2 : Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ?

Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?

Fiche 7.2 : Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité motrice.
Personnes ayant une incapacité cognitive.

Explication

Vous devez vous assurer que les événements comme onmouseover ou onmouseout sont dédoublés avec des événements au clavier comme onfocus et onblur.

Ainsi, tous les événements déclenchés à l'aide de la souris pourront également l'être par l'utilisation du clavier. Les utilisateurs ayant des incapacités motrices ou visuelles pourront donc accéder au mêmes fonctionnalités que l'ensemble de vos visiteurs.

Tableau des événements dépendants et indépendants du périphérique
Événements dépendants	Événements indépendants
onmouseover	onfocus
onmouseout	onblur
onmousedown	onkeydown
onmouseup	onkeyup
onclick	Attention ! Cet événement est déjà accessible au clavier, il ne faut donc pas le doubler de son équivalent onkeypress
ondblclick	Attention ! N'a pas d'équivalent

Exemple :

<a href="page.html" tabindex="1"
onmouseover="ChangeImage('image1.gif','image1b.gif')" 
onfocus="ChangeImage('image1.gif','image1b.gif')"
onmouseout="RetourImage('dehors')" 
onblur="RetourImage('dehors')">
  <img src="image1.gif" width="200" height="23" alt="Page d'accueil." />
</a>

Voir aussi Understanding Success Criterion 2.1.1 (Keyboard) et Understanding Success Criterion 2.1.2 (Keyboard (No Exception)).

Assurer la compatibilité avec les technologies d'adaptation informatiques. 8.1 (P1 ou P2) et 9.2 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

8.1 : Rendre les éléments programmes comme les scripts et les applets directement accessibles ou compatibles avec les technologies d'adaptation.

9.2 : S'assurer que tout élément qui possède sa propre interface peut être utilisé de façon indépendante par rapport au périphérique.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

4.1.2 (niveau A)
Nom, rôle et valeur :
Pour tout composant d’une interface utilisateur (incluant mais sans s’y limiter : un élément de formulaire, un lien ou un composant généré par un script) le nom et le rôle peuvent être déterminés par programmation; les états, les propriétés, et les valeurs qui peuvent être mis en place par un utilisateur, peuvent être mis en place par programmation; et les notifications de changement pour ces éléments sont disponibles aux agents utilisateurs, incluant les technologie d’adaptions.

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

Erreurs à éviter :

F59 : En HTML, utiliser des scripts pour transformer div ou span en conposants d’interface utilisateur (pourra être solutionné dans l’avenir).
F15 : Implémenter des éléments d'interface personnalisés qui n'utilisent pas une API d'accessibilité ou le font de façon incomplète.
F20 : Ne pas mettre à jour le texte de remplacement quand le contenu non textuel change.
F68 : L'association entre l'étiquette et le composant d'interface utilisateur ne peut être déterminée par programmation.
F79 : On ne peut déterminer par programmation si le composant d'interface est sous la zone activeo ou les notifications de changement d'état ne sont pas disponibles.
F86 : Une identification n'est pas donnée pour chaque partie d'un champ subdividé en plusieurs partie comme un numéro de téléphone.

Projet de standard du gouvernement du Québec

01 - 13, e : Si l’information, en partie ou en totalité, est mise à jour sans rechargement de la page :

cette information doit être visible pour les technologies d’adaptation informatiques ;
l’utilisateur doit être informé chaque fois qu’il y a une mise à jour ;
l’utilisateur doit être informé au préalable d’une possibilité de mise à jour et de la façon qu’il en sera informé.

01 - 13, f : Le nom et le rôle d’une composante d'une interface utilisateur doivent pouvoir être déterminés par une technologie d’adaptation informatique.
01 - 13, g : L’état, la propriété et la valeur d’une composante d’une interface utilisateur pouvant être déterminés par l'utilisateur doivent également pouvoir être déterminés et configurés par une technologie d’adaptation informatique.
01 - 13, h : L'annonce d’un changement apporté à une composante d’une interface utilisateur et lié aux fonctionnalités de base de l’interface utilisateur doit être accessible à l’aide d’une technologie d'adaptation informatique.

RGAA

8.1 Rendre accessibles les éléments programmables

Test 8.1.1 : Compatibilité des éléments programmables avec les aides techniques.

9.2 Assurer l'indépendance d'accès

Test 9.2.1 : Indépendance du périphérique pour les éléments object, embed, et applet.

AccessiWeb

Fiche 7.2 : Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité motrice.
Personnes ayant une incapacité cognitive.

Explication

Si vous incorporez des objets programmes à vos pages, ceux-ci doivent être accessibles avec les logiciels d'adaptation. Vous devez donc les tester pour vous en assurer.

La compagnie SUN a investi beaucoup d'effort pour permettre la réalisation d'applet ou d'applications Java accessibles. Suivez ce lien pour en savoir plus sur la programmation Java et l'accessibilité. Une simple recherche en français sur les mots « java accessibilité » peut également vous fournir une multitude de références dans la langue de Molière.

Pour plus d'information sur les travaux du W3C sur l'accessibilité de AJAX, vous pouvez consulter la synthèse produite par Patrice Lauriston sur AJAX et l'accessibilité.

Voir aussi Keyboard in WCAG 2.0, Keyboard (No Exception) in WCAG 2.0 et Name, Role, Value in WCAG 2.0.

S'assurer que les équivalents pour le contenu dynamique sont mis à jour. 6.2 (P1) et 6.5 (P2)

WCAG 1.0, traduction française d'AccessibilitéWeb

6.2 : S'assurer que les équivalents pour le contenu dynamique soient mis à jour lorsque le contenu dynamique change.

6.5 : S'assurer que le contenu dynamique est accessible ou fournir une présentation ou une page alternative.

Section 508 version anglaise

[No equivalent.]

WCAG 2.0 version de travail, traduction française d'AccessibilitéWeb

1.1.1 (niveau A)
Contenu non textuel :
Tout contenu non textuel présenté à l’utilisateur a un texte de remplacement qui remplit une fonction équivalente […].

Projet de standard du gouvernement du Québec

01 - 13, e et 03 - 17, c : Si l’information, en partie ou en totalité, est mise à jour sans rechargement de la page :

cette information doit être visible pour les technologies d’adaptation informatiques ;

l’utilisateur doit être informé à chaque mise à jour ;

l’utilisateur doit être informé au préalable d’une possibilité de mise à jour et de la façon qu’il en sera informé .

01 - 13, f : Le nom et le rôle d’une composante d'une interface utilisateur doivent pouvoir être déterminés par une technologie d’adaptation informatique .

01 - 13, g : L’état, la propriété et la valeur d’une composante d’une interface utilisateur pouvant être déterminés par l'utilisateur doivent également pouvoir être déterminés et configurés par une technologie d’adaptation informatique .

01 - 13, h : l'annonce d’un changement apporté à une composante d’une interface utilisateur et lié aux fonctionnalités de base de l’interface utilisateur doit être disponible à une technologie d'adaptation informatique.

RGAA

6.2 Mettre à jour les alternatives aux contenus dynamiques

Test 6.2.1 : Source des cadres.

Test 6.2.2 : Mise à jour des alternatives aux éléments non textuels affichés avec des cadres.

Test 6.2.3 : Mise à jour des alternatives aux éléments non textuels dans la page.

6.5 Assurer l'accessibilité des contenus dynamiques

Test 6.5.1 : Alternatives aux cadres.

Test 6.5.2 : Alternative aux éléments iframe.

Test 6.5.3 : Accessibilité des contenus dynamiques en javascript.

Test 6.5.4 : Accessibilité des mises à jour d'un contenu spécifique sans action de l'utilisateur.

Test 6.5.5 : Avertissement d'une mise à jour de contenu en javascript suite à l'action de l'utilisateur.

Test 6.5.6 : Accès aux contenus mis à jour dynamiquement en javascript.

Test 6.5.7 : Utilisation du bouton précédent / suivant de son navigateur après une mise à jour XMLHttpRequest.

AccessiWeb

Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?

Fiche 2.3 : Y a t-il une balise NOFRAMES?

Fiche 2.4 : Le contenu de la balise NOFRAMES est-il pertinent?

Clientèles visées

Personnes ayant une incapacité visuelle.
Personnes ayant une incapacité cognitive.

Explication

Une banque de photos à affichage aléatoire doit inclure un "alt" approprié pour chaque photo de la banque.

De même, le contenu modifié de façon dynamique en utilisant la technologie AJAX doit répondre aux trois conditions suivantes :

Le contenu généré doit être accessible,
Le concepteur doit prévoir une façon d'avertir l'utilisateur de toute mise à jour du contenu,
L'utilisateur doit disposer d'un moyen simple de se déplacer à ce nouveau contenu.

Voir aussi Technique 6.2 in WCAG 1.0 et Technique 6.5 in WCAG 1.0

Liste des thèmes.

Revenir au début de la page.