Web Experience Toolkit (WET)

History

Instructions d'utilisation pour la BOEW v2.0

Table des matières

Vue d'ensemble

  • Évolution du modèle de page de la NSI (soutient la mise en page et conception de la NSI 2.0)
  • Outils et solutions pour construire des sites Web novateurs qui sont accessibles, utilisables et interopérables
  • Outils et solutions de logiciel source ouverte protégé par le droit d'auteur de la Couronne du gouvernement du Canada et distribué sous la licence MIT.
  • Collaboration ouverte entre les communautés du Web du GC et d'externes.

Avantages

  • Encourage une expérience utilisateur cohérente à travers les sites Web;
  • Soutient l'usage de solutions et les services Web communes;
  • Fait appel à des technologies nouvelles et novatrices pour rendre les sites plus novateurs et interactifs :
    • HTML5, CSS3 et jQuery
    • prévoira l’ajout d’une série toujours croissante de plugiciels et gadgets de source ouverte
  • Permet une grande diversité de mises en page et conceptions pour les sites Web internes et externes (y compris les applications);
  • Respecte l'accessibilité (WCAG 2.0 AA et WAI-ARIA), l'utilisabilité et l'interoperabilité;
  • Facilitent la réutilisation et la réduction de coûts.

Composantes

25 composantes sont incluses dans la BOEW v2.0. Les avantage suivants s'appliquent à toutes les composantes :
  • Conformes à WCAG 2.0 AA
  • Approche d'amélioration progressive
  • Soutien pour Firefox, Opera, Safari, Chrome et IE 6+

Pour soumettre les problèmes ou suggérer des améliorations pour ces coposantes, s'il vous plaît enregistrer pour un compte de RICan et suivre les instructions dans le Guide à l’intention du réviseur de la BOEW.

Cadre fondamental

Support de balisage principal pour HTML5

Vue d'ensemble : Cette composante combine les balises sémantiques HTML5, la conformité XML, la spécification WAI-ARIA et le codage accessible pour créer la couche structurelle du cadre fondamental de la BOEW.

Avantages :
  • Possibilité d’utilisation dans les sites Web, les applications Web et d’autres outils Web
  • Possibilité d’une vaste gamme de mises en page et de concepts
  • Recours aux balises sémantiques HTML5 et à la spécification WAI-ARIA pour accroître l’accessibilité
  • Regroupe le gros de la navigation sous le domaine du contenu
  • Conformité aux critères HTML5 et XML

Page de projet : Support de balisage principal pour HTML5

Support de balisage principal pour XHTML 1.0 Strict

Vue d'ensemble : Cette composante combine XHTML 1.0 Strict et le codage accessible pour créer la couche structurelle du cadre de base de la BOEW.

Avantages :
  • Possibilité d’utilisation dans les sites Web, les applications Web et d’autres outils Web
  • Possibilité d’une vaste gamme de mises en page et de concepts
  • Recours aux balises sémantiques HTML5 et à la spécification WAI-ARIA pour accroître l’accessibilité
  • Regroupe le gros de la navigation sous le domaine du contenu
  • Conformité aux critères XHTML 1.0 Strict

Page de projet : Support de balisage principal pour XHTML 1.0 Strict

Couche présentation de CSS

Vue d'ensemble : Cette composante fournit la couche de présentation des CSS du cadre de base de la BOEW.

Avantages :
  • Peut s’appliquer aux sites Web, aux applications sur le Web et à d’autres outils Web;
  • Permet une vaste gamme de mises en page et de concepts;
  • Instaure une approche thématique qui facilite la configuration des mises en page et des concepts;
  • Les liens des sauts de navigation deviennent visibles en pointant avec la souris ou en ciblant avec le clavier
  • Comprend une fonction imprimable intégrée

Page de projet : Couche présentation de CSS

Intégration jQuery

Vue d'ensemble : Cette composante utilise le cadre de JavaScript jQuery pour créer un plugiciel en vue d’améliorer le cadre fondamental de la BOEW.

Avantages :
  • Comprend la bibliothèque jQuery JavaScript qui « simplifie le déplacement des documents HTML, la gestion des événements, l’animation et les interactions d’Ajax pour le développement rapide du Web » (source : http://jquery.com)
  • Fournit une architecture de style plugiciel qui peut charger des scripts et des fichiers CSS sans avoir à utiliser de liens ou d’éléments de script
  • Permet d’intégrer les plugiciels jQuery et autres fichiers JavaScript au cadre de la BOEW par bouclage dans un plugiciel avec la BOEW
  • Simplifie le développement du plugiciel en fournissant des fonctions utilitaires pour les paramètres de chargement à partir d’un identificateur de script et le chargement dynamique des fichiers de la bibliothèque JavaScript ainsi que les fichiers CSS (voir section 6.1 pour les instructions sur la façon de créer un plugiciel avec la BOEW)
  • Nécessite seulement une ligne de codes dans une page Web pour activer et configurer les plugiciels avec la BOEW (pour plus de détails, voir la section 6.2)

Page de projet : Intégration jQuery

Variants du cadre

Abstraction XML/XSLT

Vue d'ensemble : Cette composante utilise les langages XML et XSLT pour séparer entièrement les balises de base et le contenu d’une page Web.

Avantages :

Page de projet : Abstraction XML/XSLT

Variante pour PHP

Vue d'ensemble : Cette composante adapte la structure de balisage principale pour HTML5 à une utilisation avec le langage PHP.

Avantages :
  • Permet de réduire le dédoublement de contenu et de codes (comme dans les titres et les dates).
  • Permet un contrôle central des colonnes de gauche et de droite.
  • Améliore l’uniformité en séparant le contenu du code de gabarit.
  • Automatise le fil d’Ariane (chemin de navigation).
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : "Variante pour PHP:

Variante pour SSI

Vue d'ensemble : Cette composante adapte la structure de balisage principale pour HTML5 à une utilisation avec le langage Server Side Includes (SSI).

Avantages :
  • Permet de réduire le dédoublement de contenu et de codes (comme dans les titres et les dates).
  • Permet un contrôle central des colonnes de gauche et de droite.
  • Améliore l’uniformité en séparant le contenu du code de gabarit.
  • Automatise le fil d’Ariane (chemin de navigation).
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Variante pour SSI

Amélioration d'affichage

Coins arrondis d'éléments sans image

Vue d'ensemble : Cette composante applique des coins arrondis filtrés et sans image au moyen soit des propriétés de CSS, soit des paramètres de JavaScript.

Avantages :
  • Il est plus facile d’appliquer et de maintenir les coins sans image que les coins reposant sur des images
  • Les coins sont filtrés
  • Aucun logiciel d’édition d’image n’est requis
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Coins arrondis d'éléments sans image

Mise en surbrillance des termes recherchés

Vue d'ensemble : Cette composante met automatiquement en surbrillance certains mots dans une page Web. La nature des mots ainsi mis en évidence peut être déterminée manuellement ou au moyen d’un formulaire de recherche simple.

Avantages :
  • Aide les utilisateurs à trouver certains mots sur une page Web
  • Comporte un formulaire de recherche simple permettant aux utilisateurs de stipuler les mots à mettre en surbrillance
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Mise en surbrillance des termes recherchés

Rayage du zèbre

Vue d'ensemble : Cette composante permet l’ajout du rayage du zèbre aux listes et aux tableaux en colorant un élément de liste et une rangée de tableau sur deux.

Avantages :
  • Permet de distinguer nettement chacun des éléments de liste et des rangées de tableau

Page de projet : Rayage du zèbre

Système de grille de CSS

Vue d'ensemble : Cette composante offre une grille de présentation qui permet la division horizontale et verticale de l’espace. Elle permet de créer des présentations visuellement attrayantes en assurant le placement uniforme du contenu.

Avantages :
  • Permet le placement uniforme du contenu.
  • Facilite la création de présentations visuellement attrayantes en aidant à appliquer la « règle des tiers » et la « section d’or » à la conception des pages Web.
  • Réduit dramatiquement la quantité d’effort requis pour produire des présentations de page Web visuellement attrayantes (comparativement à la production de présentations sur CSS à partir de zéro).
  • Prend en charge l’emboîtement des grilles pour créer des conceptions complexes avec peu d’effort.
  • Facilite la production de présentations asymétriques pour créer une texture visuelle.
  • Réduit la quantité d’effort requis pour repositionner des éléments et pour changer les propriétés d’affichage (typographie, marges, etc.).
  • Permet de créer un « magazine » et des thèmes à prime pour les plates­formes de blogues.

Page de projet : Système de grille de CSS

Amélioration d'interface

Contenu en arborescence affichable/masquable

Vue d'ensemble : Cette composante permet aux utilisateurs d’afficher et de masquer un contenu.

Avantages :
  • Permet aux utilisateurs d’afficher et de masquer un contenu en vue de faciliter la consultation de certaines portions en particulier
  • Utilise un texte de lien descriptif afin d’aider les utilisateurs ou lecteurs d’écran à déterminer si un lien permet d’afficher ou de masquer un contenu
  • Soutient le texte de lien personnalisé aux fins des liens servant à afficher/masquer
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Contenu en arborescence affichable/masquable

Coulisse coda

Vue d'ensemble : Cette composante affiche un contenu à l’utilisateur une section à la fois. Une petite table des matières peut être utilisée pour déterminer quelle section est affichée. Un effet de défilement/glissement sera utilisé en changeant le contenu qui est affiché.

Avantages :
  • Permet de répartir une grande quantité de contenu en des blocs faciles à gérer
  • Aide les utilisateurs à se concentrer sur le contenu pertinent
  • Ajoute les liens « Précédent/Suivant » (« Next » / « Previous ») pour simplifier la navigation
  • Peut être utilisé en conjonction avec un système de grilles pour créer des présentations côte à côte
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Coulisse coda

Diaporama

Vue d'ensemble : Cette composante améliore la présentation visuelle et favorise l’économie d’espace précieux en permettant à plusieurs liens d’image de partager le même emplacement sur une page.

Avantages :
  • Allie élégance de conception et convivialité des commandes pour un résultat à la fois accessible et agréable à l’œil
  • Fait défiler les images automatiquement à une vitesse prédéterminée
  • Offre les commandes d’arrêt et de démarrage du diaporama, de même que le défilement manuel des images
  • Compare la fréquence d’affichage des images entre elles
  • Permet l’affichage des images dans un ordre aléatoire
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Diaporama

Géocarte

Vue d'ensemble : Cette composante ajoute une carte Web à votre page au moyen d’un simple adaptateur pour OpenLayers (http://www.openlayers.org/). Toute exécution réalisable avec OpenLayers, l’est également avec la fonction Géocarte.

Avantages :
  • Insère des cartes dynamiques dans n’importe quelle page Web
  • Permet de télécharger des feuillets de carte, des couches superposées et des balises à partir de la plupart des sources locales et éloignées
  • Permet d’effectuer des consultations géographiques
  • Peut comporter une barre d’outils pour créer des couches superposées personnalisées
  • Peut comporte des fils RSS munis de géobalises
  • Fonctionne avec les protocoles WMS et WFS
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Géocarte

Lecteur multimédia

Vue d'ensemble : Cette composante affiche un lecteur multimédia qui soutient les fichiers FLV et MP3.

Avantages :
  • Prend en charge plusieurs lecteurs sur la même page Web
  • La visionneuse vidéo et la barre d’outils sont séparées, ce qui permet d’utiliser d’autres lecteurs multimédia pour la visionneuse vidéo sans changer de barre d’outils.
  • La barre d’outils est codée aux langages HTML et CSS pour faciliter la personnalisation de son apparence et éviter les anciens problèmes de tabulateur à l’aide de contrôles flash
  • Échelle de légende ramenée à la taille du lecteur multimédia
  • Ratio implicite 16:9 prédéfini pour optimiser la lecture vidéo
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Lecteur multimédia

Amélioration de navigation

Barre d'outils flottée

Vue d'ensemble : Cette composante installe une barre d’outils flottante dans la partie inférieure de la fenêtre du navigateur. Cette barre d’outils devient visible lorsque l’utilisateur fait défiler l’écran à partir du haut de la page.

Avantages :
  • Offre un accès rapide et facile aux liens « Accueil » et « Haut de la page », et à un formulaire de recherche
  • Remplace l’inclusion de liens « Haut de la page » dans toute la page
  • Aide à réduire le nombre de liens « Haut de la page » que les utilisateurs du lecteur d’écran doivent visualiser
  • Peut être utilisé avec un système de grille
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Barre d'outils flottée

Nouvelle fenêtre/Nouvel onglet

Vue d'ensemble : Cette composante fait en sorte que les liens comportant les éléments rel="external" et rel="internal" ouvrent une nouvelle fenêtre ou un nouvel onglet. Elle ajoute également une mise en garde type sur ce changement à chaque lien.

Avantages :
  • Empêche de perdre la progression sur la page Web actuelle à l’ouverture d’un lien.
  • Empêche la perte d’une séance sécurisée à l’ouverture d’un lien.
  • Donne une mise en garde préalable type pour chaque lien qui ouvre une nouvelle fenêtre ou un nouvel onglet.

Page de projet : Nouvelle fenêtre/Nouvel onglet

Interface de formulaire

Amélioration de liste de case à cocher

Vue d'ensemble : Cette composante améliore l’aspect d’une liste de cases à cocher et en facilite l’utilisation

Avantages :
  • Regroupe visuellement les cases à cocher
  • Facilite la distinction entre les cases cochées et celles non cochées
  • Ajoute la rangée principale à la zone sélectionnable de chaque case
  • Contrôle le nombre de cases qui sont visibles (utilisation de la barre de défilement pour voir les autres)
  • Ajoute les boutons « Tout sélectionner » et « Tout déselectionner »
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Amélioration de liste de case à cocher

Cases à cocher exclusifs

Vue d'ensemble : À l’exemple des boutons radio, cette composante restreint à une pour chaque groupe la sélection des cases à cocher. Toutefois, à la différence des boutons radio, elle permet également d’annuler la sélection des cases à cocher.

Avantages :
  • Possibilité pour les utilisateurs de faire une sélection, ou de n’en faire aucune
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Cases à cocher exclusifs

Mise en commun de l'information

Feuille de réponse

Vue d'ensemble : Cette composante permet aux utilisateurs de présenter leurs commentaires relativement à une page Web en particulier ou au site Web en général.

Avantages :
  • Prestation aux utilisateurs d’une façon commune de présenter des commentaires
  • Facilitation de la présentation de commentaires utiles provenant des utilisateurs
  • Masquage des champs que les utilisateurs ne doivent pas remplir
  • Prise en compte, dans la validation des champs de la feuille de réponse, du côté client et du côté serveur
  • Intégration de l’option d’envoi à un compte courriel des données soumises
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Feuille de réponse

Gadget d'actualisation de RSS

Vue d'ensemble : Cette composante est un gadget logiciel permettant de regrouper et d’afficher des fils RSS dans une page Web.

Avantages :
  • Prestation aux utilisateurs d’une façon commune de présenter des commentaires
  • Facilitation de la présentation de commentaires utiles provenant des utilisateurs
  • Masquage des champs que les utilisateurs ne doivent pas remplir
  • Prise en compte, dans la validation des champs de la feuille de réponse, du côté client et du côté serveur
  • Intégration de l’option d’envoi à un compte courriel des données soumises
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Gadget d'actualisation de RSS

Gadget de partage

Vue d'ensemble : Cette composante fournit un gadget logiciel permettant de partager une page Web dans divers réseaux sociaux.

Avantages :
  • Permet aux utilisateurs de partager plus facilement des pages Web dans divers réseaux sociaux
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Gadget de partage

Personalisation

Fichiers CSS côté client

Vue d'ensemble : Cette composante permet aux utilisateurs de modifier la présentation des pages Web à l'aide de la BOEW afin de répondre à leurs besoins d'accessibilité.

Avantages :
  • Option permettant de rendre les liens des sauts de navigation visibles
  • Option permettant de rendre la page Web extensible
  • Option permettant de souligner tous les liens
  • Option permettant de changer toutes les couleurs des liens
  • Option permettant d'utiliser une bannière à contraste élevé pour la page de contenu (clf2-nsi2 et thèmes généraux)
  • Option permettant d'utiliser une zone de message à contraste élevé pour la page d'accueil (thème clf2-nsi2)

Page de projet : Fichiers CSS côté client

Sélecteur de style

Vue d'ensemble : Cette composante permet aux utilisateurs de modifier la présentation des pages Web à l'aide de la BOEW afin de répondre à leurs besoins d'accessibilité.

Avantages :
  • Aide les utilisateurs à configurer un site Web adapté à leurs besoins.
  • Recours aux WAI-ARIA pour accroître l’accessibilité

Page de projet : Sélecteur de style