Page Comparison

1.1 Liens ressources

1.2 Différencier les boutons des liens

Pour une meilleure compréhension des interfaces riches par les utilisateurs, les boutons sont à différencier des liens :

• Les boutons <button> / <input>  permettent à l’utilisateur de déclencher des actions. Ils sont à employer pour soumettre des informations, pour afficher l’élément suivant ou précédent dans un carrousel, pour fermer une fenêtre modale, etc.
• Les liens <a>  permettent à l’utilisateur de naviguer. Ils sont à employer pour pointer sur une autre page ou sur une zone précise de la page courante par l’intermédiaire d’un système d’ancres.

REMARQUES

Il est recommandé d'utiliser la balise <input type="button">  à l'intérieur d'un <form>  (bouton Envoyer, etc...) et d'utiliser la balise <button>  lorsque c'est une action (flèche, bouton fermer, etc...).

Image ModifiedRESSOURCES

• Voir aussi le document HTML et CSS : Différencier les boutons des liens

1.3 Mettre en place des solutions de remplacement à Javascript

On prend pour acquis que Javascript est une composante intégrale du navigateur, du poste ou de l’appareil de l’utilisateur en se fiant au fait que les contenus générés ou les interactions gérées par script sont conformes aux guides d’accessibilité. D’autre part, lorsque Javascript est volontairement désactivé sur le poste ou l’appareil de l’utilisateur, le message « Pour une expérience optimale, merci d’activer le module JavaScript » s’affichera en en-tête des sites.

Cependant dans certains cas il faut prévoir le comportement suivant :

• Pour la gestion des erreurs d’un formulaire, même si la validation des données est effectuée côté client par Javascript, la validation des données doit être effectuée côté serveur également.
• Pour les composantes comme les accordéons, les tabulations et les carrousels, l’initialisation des styles doit être effectuée côté Javascript et non au chargement des feuilles de styles. Ainsi, si le JavaScript est désactivé, le contenu peut être visible.

1.4 Mettre en place des solutions de remplacement à Flash

Chaque fois que des contenus ou des fonctionnalités sont proposés par l’intermédiaire de Flash, penser à en informer l’utilisateur :

• indiquer à proximité de la mention HTLML : « Autre version non disponible ».
• préciser par une icône que l’animation est en Flash.

ASTUCES

Dans le cas où l'utilisation de flash est indispensable, considérer ce contenu comme une image informative complexe (DataV).

• Voir la remarque de HTML et CSS : Préciser un text alternatif sur les images informatives
• Voir Contributeur éditoriaux pour le type de donnée entrée : Images informatives complexes (DataV), cartes interactives et contenus riches et multimédia

ATTENTION

Puisque sa compatibilité dans les navigateurs est très base, il est fortement déconseillé d'utiliser la technologie Flash.

Image ModifiedRESSOURCES

• Préciser un text alternatif sur les images informatives (HTML et CSS)
• Images informatives complexes (DataV), cartes interactives et contenus riches et multimédia (Contributeur éditoriaux)

1.4.1 Pour les médias

À Radio-Canada, nous utilisons un lecteur audio/vidéo maison qui a été développé avec la technologie HTML5.

Image ModifiedASTUCES

Lorsqu’une vidéo est affichée sur une page, sa transcription peut être considérée comme solution de remplacement. Autre possibilité, la vidéo en téléchargement (en supplément de la transcription).

Image ModifiedRESSOURCES

• Voir aussi le document HTML et CSS : Contenus multimédia

1.4.2 Pour les animations

Sur Radio-Canada, il n’y a plus de contenu Flash sauf la section « Je joue » de la zone Jeunesse, dont les jeux seront retirés à l’expiration des licences.

On préconise l’utilisation des outils qui génèrent des animations en non-Flash (HTML5, Javascript, CSS3, etc.). Sinon, dans les cas où l’utilisation de Flash est indispensable, indiquer à proximité de la mention HTLML : « Autre version non disponible ». De plus, préciser par une icône que l’animation est en Flash.

Dans le cas des animations faite à l’aide d’une technologie autre que GIF comme Cinématographe/Flixel, animations CSS ou vidéo d’arrière plan décorative n’utilisant pas le contrôleur vidéo de Radio-Canada, nous recommandons l’application suivante :

<div class="intro-panel">
  <div class="bg-video is-active">
    <video aria-hidden="true" autoplay="" class="background-video" muted playsinline>
      <source src="header-video.mp4" type="video/mp4">
      <source src="header-video.ogv" type="video/ogv">
      <source src="header-video.webm" type="video/webm">
      Votre navigateur ne supporte pas la balise video.
    </video>
    <button type="button">Arreter le video</button>
  </div>
 
  <div class="content">
    <h1 class="hidden-tag">Titre principal H1</h1>
    <img src="main-logo.png" alt="Logo">
  </div>
</div>

1.5 Permettre le contrôle des scripts à la fois avec la souris et le clavier

Chaque fois qu’un script peut être contrôlé par la souris, il doit être possible de contrôler ce dernier également avec le clavier.

C’est-à-dire que chaque fois que la souris permet de contrôler un script depuis un élément (un lien ou un bouton), celui-ci doit :

• Être atteignable au clavier.
• Permettre le contrôle du script avec le clavier une fois le focus placé sur l’élément.

Il est très important de veiller à l’absence de pièges au clavier. Les pièges au clavier bloquent les utilisateurs qui naviguent au clavier, car ils empêchent l’interaction avec certaines zones de la page.

Les pièges se manifestent lorsqu’un utilisateur se retrouve bloqué dans la page lors de la navigation au clavier :

• Soit parce qu’un élément empêche la prise de focus sur les éléments interactifs qui le précèdent ou le suivent.
• Soit parce qu’un élément ne laisse pas le focus le quitter, une fois appliqué sur l’élément.

REMARQUES

L'ajout et la suppression d'action tabulable sur un élément est a proscrire : on doit toujours garder le comportement natif.

• Si vous avez un élément qui doit pouvoir être cliquable/tabulable, utiliser une balise d'action avec la sémantique appropriée (button, link, input, select)
• Un élément qui ne comporte pas d'action ne doit pas pouvoir être tabulable (div, etc...)

ASTUCES

Par défaut, l'événement "click" est très bien supporté par la navigation au clavier, il est nativement associé à la touche "Enter" au clavier.

Source : JavaScript and JQuery Accessibility (en anglais)

ATTENTION

Chaque fois que cela est possible, privilégier l’utilisation d’écouteurs d’événements génériques plutôt que spécifiques à l’appui sur une touche du clavier. Par exemple, privilégier onfocus / onblur à onkeydown. En effet, les raccourcis clavier ne sont pas toujours les mêmes selon les systèmes ou les navigateurs. Par exemple, avec le navigateur Opéra, c’est la touche Maj, associée aux flèches directionnelles, qui permet de naviguer de lien en lien au clavier, contrairement à la plupart des autres navigateurs qui utilisent la touche Tab.

RESSOURCES

• JavaScript and JQuery Accessibility (en anglais)
• Voir aussi le document HTML et CSS : Garantir la visibilité de la prise de focus au clavier
• Voir aussi le document HTML et CSS : Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture

1.6 Permettre la mise en pause des animations automatiques et des rafraîchissements automatiques de page

Un moyen de mettre en pause et de relancer l’animation doit être prévu pour chaque contenu animé (défilement, clignotement, mouvement, mise à jour automatique, etc.).

Sur le site de Radio-Canada, il y a les publicités (à l’occasion), les carrousels, les vidéos/audios et les GIF animés.

Pour les GIF animés, le moyen privilégié est de laisser la configuration et les fonctionnalités natives du navigateur pour figer les images (Safari) ou les faire disparaître (Firefox). Dans tous les cas, il faut s’assurer que le texte qui accompagne l’image est bien représentatif de l’image animée.

À l’instar des animations automatiques, il faut prévoir un moyen de mettre en pause le rafraîchissement automatique de page (par exemple: la page d’accueil de Radio-Canada) afin que les utilisateurs aient le choix de relire ou non la page.

REMARQUES

Quelle que soit la position visuelle de ce bouton dans la page, celui-ci doit toujours être placé avant les éléments animés, dans le DOM. Dans le cas d’un lecteur multimédia, faire en sorte que ce bouton soit le premier élément tabulable du lecteur.

ATTENTION

L’utilisation des GIF animés n'est pas recommandée, car ceux-ci peuvent gravement perturber certains utilisateurs tout en causant de graves problèmes de performance due au poids de tel type de fichiers.

RESSOURCES

• Voir aussi le document Conception graphique : Prévoir l’arrêt manuel de chaque contenu animé
• Voir aussi le document HTML et CSS : Écrire le code HTML en suivant la logique de l’ordre de lecture
• Voir aussi le document Interfaces Riches et JavaScript : Carrousels