INTERFACES RICHES ET JAVASCRIPT

Owned by ANNICK LALIBERTE
Last updated: May 16, 2023 by MATHIEU Côté

Table des matières
  • 1.Recommandations génériques interfaces riches et Javascript
    • 1.1 Liens ressources
    • 1.2 Différencier les boutons des liens
    • 1.3 Mettre en place des solutions de remplacement à Javascript
    • 1.4 Mettre en place des solutions de remplacement à Flash
      • 1.4.1 Pour les médias
      • 1.4.2 Pour les animations
    • 1.5 Permettre le contrôle des scripts à la fois avec la souris et le clavier
    • 1.6 Permettre la mise en pause des animations automatiques et des rafraîchissements automatiques de page
  • 2. Cas d'usage
    • 2.1 Personnalisation des balises d'actions
    • 2.2 Menus déroulants
    • 2.3 Accordéons (plier/déplier)
    • 2.4 Onglets
    • 2.5 Carrousels (slideshows)
    • 2.6 Fenêtres modales (popins)
    • 2.7 Boutons "Adfficher plus"
    • 2.8 Infobulles (tooltips)
    • 2.9 Champ à saisie semi-automatique (autocomplete)



Contexte et objectifs

Cette notice regroupe l’ensemble des spécifications à prendre en compte lors du développement des composants riches en Javascript et HTML d’un site ou d’une application web, et ce, quel que soit le périphérique d’affichage ciblé (ordinateur, mobile, etc.).

À qui s’adresse cette notice, comment l’utiliser?

Ce document doit être transmis aux intervenants et/ou prestataires réalisant les spécifications techniques, les gabarits HTML/CSS et les différents développements techniques des interfaces. Il vient en complément aux spécifications techniques d’un projet. Les recommandations peuvent être complétées ou retirées selon les contextes d’utilisation, ce qui peut être notamment réalisé par la maîtrise d’ouvrage.

Les recommandations doivent être prises en compte en phase d’intégration HTML/CSS, et pour certaines d’entre elles, lors de la dynamisation des pages lorsque les gabarits sont affectés à un outil de gestion de contenu (CMS).

Certaines annotations viennent compléter le document, celles-ci sont nécessaires pour la compréhension de chaque recommandation.


REMARQUES

Les remarques permettent de compléter les recommandations en apportant des précisions applicables à des situations techniques précises et ponctuelles.

HTML5

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ASTUCES

Les astuces ne sont pas directement liées à l’accessibilité, mais leur prise en compte permet généralement d’améliorer la qualité générale des interfaces ou de faciliter la prise en compte de l’accessibilité sur les étapes suivantes du projet. À l’inverse, les recommandations de ce document, bien que dédiées à l’accessibilité, rejoignent souvent de bonnes pratiques en matière d’ergonomie, d’expérience utilisateur, de performance ou de référencement.

ASTUCES - BONIFICATION

Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.

ATTENTION

Les avertissements mettent en avant des points particuliers qu’il est important de respecter ou des pièges à éviter pour garantir une bonne accessibilité.

CAPTURES D'ÉCRAN

Des exemples provenant d’ICI Radio-Canada, ICI Musique, ICI tou.tv, ou d’autres exemples pertinents sont inclus dans le document.

RESSOURCES

Des liens sont inclus pour faciliter l'application des normes : ils mènent soit à des sites externes (lectures, meilleures pratiques, etc.), ou font référence à d'autres sections du présent guide.

Mention légale

La société Atalan est l'auteure et la responsable du site web : www.accede-web.com. Les documents disponibles dans Repères sont une version modifiée des normes d’accessibilité de www.accede-web.com.

 


AcceDe Web - La démarche accessibilité


Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.