Exemples pratiques
Essayer nos fonctionalité provisoire et dites nous vos commentaires via GitHub.
| Nom | Catégorie | Description | Mots clés |
|---|---|---|---|
| Ajout au calendrier | Plugiciels | Ajouter un événement à un calendrier (google, Apple, Android, Outlook ou autres). | add-cal |
| Alertes repliables | Plugiciels | Créer des alertes que les utilisateurs peuvent replier. | collapsible-alerts |
| Aléatoire | Plugiciels | Choisi un des éléments enfant aléatoirement. | randomize |
| Archivée - Informations archivées | Autre | Ajoute un avis d'archivage à une page Web. | archived |
| Balise details fermée sur petits écrans | Plugiciels | Garder les éléments details visés fermés sur petits écrans et moins. | details-close |
| Balise details fermée sur écran moyen et moins | Plugiciels | Garder les éléments details visés fermés sur moyens écrans ou plus petits. | details-close |
| Basculer | Plugiciels | Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé. | toggle |
| Calendrier d'événements | Plugiciels | Un calendrier servant à consulter une liste d'événements. | cal-events |
| Chronologie intégrée Twitter | Plugiciels | Aide avec l’implémentation des chronologies intégrées Twitter. | |
| Contenu par pays | Plugiciels | Un enveloppeur de AjaxLoader qui insère de contenu télécharger via AJAX. Le contenu est basée sur l'emplacement des visiteurs comme déterminé par country.is | country-content |
| Contenu superposé | Plugiciels | Un plugiciel fournissant un modèle de contenu superposé flexible et réactif. | overlay |
| Contenu écartable | Plugiciels | Permettre aux utilisateurs d'écarter certains contenus. | dismissable-content |
| Correctif MathML | Correctifs | Émule le MathML pour les navigateurs qui ne le supportent pas. | mathml |
| Correctif « datalist » (saisie automatique) | Correctifs | Émule l'attribut « list » de l'élément « input », ainsi que l'élément « datalist », pour les navigateurs qui ne les supportent pas. Ceci ajoute des fonctionnalités de saisie semi-automatique des champs de « input » spécifiques en affichant dynamiquement une liste de mots qui correspondent à la « datalist ». | datalist |
| Correctif « datalist » (saisie automatique) - Dynamique | Correctifs | Montre comment mettre à jour de façon dynamique le contenu de l'élément « datalist », sur la base de l'entrée utilisateur. Particulièrement utile où il ya un grand nombre de suggestions de saisie semi-automatique. | datalist |
| Correctif « details/summary » (contenu affichable/masquable) | Correctifs | Émule les éléments « details » et « summary » pour les navigateurs qui ne le supportent pas. Les éléments « details » et « summary » éléments permettent au contenu d'être affiché et masqué. | details |
| Correctif « input type="date" » (sélecteur de date) | Correctifs | Émule l’élément <input type="date"> pour les navigateurs qui ne le supportent pas. Cela génère dynamiquement une interface de calendrier pour sélectionner une date dans un formulaire. | datepicker |
| Correctif « input type="range" » (barre coulissante) | Correctifs | Émule l’élément <input type="range"> pour les navigateurs qui ne le supportent pas. Le <input type="range"> permet d'afficher une barre coulissante. | slider |
| Correctif « meter » (compteur) | Correctifs | Émule l’élément « meter » pour les navigateurs qui ne le supportent pas. L'élément « meter » affiche une mesure scalaire dans une gamme connue. | meter |
| Correctif « progress » (barre de progression) | Correctifs | Émule l’élément « progress » pour les navigateurs qui ne le supportent pas. L'élément « progress » de HTML5 affiche la progression d'une tâche. | progress |
| Data Ajax | Plugiciels | Un enveloppeur simple pour AjaxLoader qui insère de contenu télécharger via AJAX. | data-ajax |
| Data Inview | Plugiciels | Affiche de contenu superposé quand une section se déplace hors de la clôture. | data-inview |
| Data JSON | Plugiciels | Insertion de contenu extrait d'un fichier JSON | data-json |
| Data Picture | Plugiciels | Conversion de Picturefill guidé par l'événement. | data-picture |
| Donnée de requête fusionné | Plugiciels | Application de la valeur correspondant à un paramètre dans la requête (URL) de la page vers un champs. | data-fusion-query |
| Envoie via Ajax | Plugiciels | Soumission de formulaire via une requête Ajax. | wb-postback |
| Exemple de plugiciel, Bonjour le monde | Autre | Un tutoriel rapide sur commment créer votre plugiciel BOEW. | helloworld |
| Expiration de la session | Plugiciels | Ferme la session de l'utilisateur après un certain délai. | session-timeout |
| Expiration de la session avec l'option signInUrl | Plugiciels | Ferme la session de l'utilisateur après un certain délai. | session-timeout-signin |
| Facebook embedded pages (TODO FR) | Plugiciels | Helps with implementing Facebook embedded pages. | |
| Favoricône | Plugiciels | Offre la possibilité d'ajouter et de mettre à jour les favoricônes d'une page. | favicon |
| Fils de syndication | Plugiciels | Affiche les articles d’un ou plus fils de syndication. | feeds |
| Filtre | Plugiciels | Filtre du contenu et n'affiche que le contenu ayant un certain mot-clé. | filter |
| Filtre de balise | Plugiciels | Filtre le contenu et affiche/masque le contenu qui correspond à certaines balises. | filter |
| Formulaire de rétroaction | Autre | Un formulaire normalisé pour soumettre une rétroaction au sujet d'une page ou d'un site Web particulier. | feedback |
| Formulaire à étapes | Plugiciels | Converti automatiquement un formulaire en étapes. | stepsform |
| Fusion des erreurs Serveur-Client | Plugiciels | Ce composant fusionne les erreurs de type serveur et client ensemble. | formvalid-server |
| Gabarit HTML 5 | Plugiciels | Prendre avantage de l'élément template du HTML 5 avec le plugiciel data json | data-json |
| Gabarit conditionel | Plugiciels | Association et insertion de contenu JSON tout en suivant un gabarit conditionel. | data-json |
| Gadget de partage | Plugiciels | Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux. | share |
| Gestionnaire JSON | Plugiciels | Gérer des jeux de données et applique des correctifs JSON. | jsonmanager |
| Graphiques - Personalisation | Plugiciels | Personalisation, préréglages personnalisés et plusieurs types de graphique. | charts |
| Graphiques - Personalisation de diagramme circulaire | Plugiciels | Personalisation d'un diagramme circulaire pour créer un diagramme en beigne. | charts |
| Graphiques - Scénarios d'essai spécifiques | Plugiciels | Scénarios spécifiques à des fins d'essaie. | charts |
| Graphiques - Simple | Plugiciels | Génère des graphiques à partir de données d’un tableau. | charts |
| Graphiques - Étiquettage et la valeur de référence | Plugiciels | Comment contrôler l'étiquettage des graphiques et comment contrôler la valeur de référence pour déterminer la valeur des points | charts |
| Géocarte | Plugiciels | Affiche une carte dynamique sur laquelle des informations de sources supplémentaires peuvent être superposées. | geomap |
| Géocarte - avant v4.0.30 | Plugiciels | Affiche une carte dynamique sur laquelle des informations de sources supplémentaires peuvent être superposées. | geomap |
| HTML simplifié | Plugiciels | Passer à la version HTML simplifiée | disable |
| Image d'arrière plan | Plugiciels | Défini une image d'arrière plan pour l'URL passé en paramètre ou tel que spécifier par l'information du group d'image. | bgimg |
| Interface à onglets | Plugiciels | Comprime plusieurs sections de contenu dans le même espace physique et fourni des onglets qui permettent à l'utilisateur de choisi la section de contenu à afficher. | tabs |
| Interface à onglets - Carrousel | Plugiciels | Comprime plusieurs images et légendes superposées et fourni des controls qui permettent à l'utilisateur de choisi l'image à afficher. | tabs, carousel |
| Lecteur multimédia - Audio seulement | Plugiciels | Un lecteur média accessible permettant d'intégrer des contenus vidéo et audio sur les pages Web. | multimedia |
| Lecteur multimédia - Vidéo | Plugiciels | Un lecteur multimédia accessible permettant d'intégrer des contenus vidéo sur les pages Web. | multimedia |
| Lecteur multimédia - YouTube | Plugiciels | Un lecteur multimédia accessible permettant d'intégrer des contenus vidéo de YouTube sur les pages Web. | multimedia, youtube |
| Lightbox | Plugiciels | Afficher des images et d'autres contenus dans une boîte de dialogue, individuellement ou dans le cadre d'une galerie. | lightbox |
| Liste de contrôle pour les tests d'accessibilité mobiles - Boîte à outils de l’expérience Web (BOEW) | Autre | Un guide pour les tests d'accessibilité mobiles au jour le jour – on devrait être capable de répondre «oui» à chaque question. | checklist |
| Menu | Plugiciels | Une barre de menu interactive comprenant des sous-menus optionnels. | menu |
| Mise en surbrillance de texte | Plugiciels | Met en surbrillance sur une page Web les mots choisis. | texthighlight |
| Méthodologie du rapport de conformité à l'accessibilité | Autre | Méthode utilisant une approche itérative afin de produire plusieurs évaluations spécialisées et de produire par la suite un rapport de conformité à l'accessibilité. | acr |
| Méthodologie d’évaluation sur l’accessibilité des sites Web (niveau AA) | Autre | Offre une méthodologie d’évaluation qui permet de mesurer le degré de conformité aux Règles pour l’accessibilité des contenus Web (WCAG) 2.1 pour les critères de succès de niveau A et AA. | wamethod |
| Méthodologie d’évaluation sur l’accessibilité des sites Web (niveau AAA) | Autre | Offre une méthodologie d’évaluation qui permet de mesurer le degré de conformité aux Règles pour l’accessibilité des contenus Web (WCAG) 2.1 pour les critères de succès de niveau A, AA et AAA. | wamethod |
| Notes de bas de page | Plugiciels | Une méthode cohérente et facile d’accès pour répertorier les notes de bas de page. | footnotes |
| Paginer | Plugiciels | Ajoute une pagination à la fin d'une liste d'items | paginate |
| Prettify | Plugiciels | Affiche de la syntaxe des extraits de code source. | prettify |
| Rayage du zèbre | Plugiciels | Rayage du zèbre pour les tableaux | zebra |
| Répartition des responsabilités d'accessibilité (WCAG 2.0) | Autre | Une répartition des responsabilités associées aux critères de succès pour WCAG 2.0 sur l’ensemble de la chaîne de production Web. | arb-rra |
| Sortie de navigation avisé | Plugiciels | Aviser l'utilisateur d'une redirection vers un autre site. | exitscript |
| Table Filters | Plugiciels | Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination. | table filters |
| Tables | Plugiciels | Ajoutes des fonctionnalités aux tableaux telles que la recherche, le tri, le filtrage et la pagination. | tables |
| Transitions | Autre | Transitions CSS | transitions |
| Utilitaires | Autre | Page d'utilitaires ainsi que leurs examples pratiques. | utility |
| Validateur de tableau | Autre | Outils pour les éditeur web qui fourni une assistance afin de produire des tableaux conforme au norme WCAG | tablevalidator |
| Validation de formulaires | Plugiciels | Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis. | formvalid |
| Égalisation des hauteurs | Plugiciels | Un plugiel d'égalisation des hauteurs réactif. | equalheight |
| Égalisation des hauteurs (pure CSS) | Plugiciels | Un plugiel d'égalisation des hauteurs pour les grilles. | eqht-css |
| Thème Canada.ca | Thèmes et style | Ce thème met en place la mise en page et la mise en forme exigés pour le site Canada.ca. | GCWeb |
| Thème de base | Thèmes et style | Un modèle de thème pour la création de nouveaux thèmes. | theme-base |
| Thème de la Boîte à outils de l'expérience Web (BOEW) | Thèmes et style | Un exemple de thème conçu à partir du thème de base. | theme-wet-boew |
| Thème de la Plate-forme de gouvernement ouvert (PGO) | Thèmes et style | Un thème qui met en place la mise en page et la mise en forme pour la Plate-forme de gouvernement ouvert (PGO). | theme-ogpl |
| Thème de la facilité d’emploi Web du gouvernement du Canada | Thèmes et style | Ce thème met en place la mise en page et la mise en forme exigés par la Norme sur la facilité des sites Web. Il est recommandé de se servir de ce thème sur les sites Web du gouvernement du Canada (sauf Canada.ca). | theme-gcwu-fegc |
| Thème du gouvernement du Canada pour les sites intranet | Thèmes et style | Une version du thème de la facilité d'emploi des sites Web du gouvernement du Canada pour les sites intranet. | theme-gc-intranet |
| Variant pour Jekyll | Variants | Adapte la BOEW pour l’utilisation avec Jekyll. | jekyll |
| Correspondance d'URL - Ajax | Plugiciels du thème Canada.ca | Exécute des requête ajax pré-établis selon la correspondance des paramètres de l'URL. (Documentation) | gcweb/urlmapping |
| Correspondance d'URL - Appliquer des correctifs JSON | Plugiciels du thème Canada.ca | Exécute des requête d'application de correctifs JSON pré-établis selon la correspondance des paramètres de l'URL. (Documentation) | gcweb/urlmapping |
| Correspondance d'URL - Filtrer un tableau | Plugiciels du thème Canada.ca | Exécute des requête de filtrage de tableau pré-établis selon la correspondance des paramètres de l'URL. (Documentation) | gcweb/urlmapping |
| Déroulement de champs | Plugiciels du thème Canada.ca | Transforme une simple liste en un liste de choix. (Documentation) | gcweb/fieldflow |
| Déroulement de champs avancé | Plugiciels du thème Canada.ca | Comment aller au-delà avec le déroulement de champs. (Documentation) | gcweb/fieldflow |
| Déroulement de champs avec des configurations de base | Plugiciels du thème Canada.ca | Comment utiliser le déroulement de champs afin de créer des interaction utilisateur à petite échèle. (Documentation) | gcweb/fieldflow |
| Exécuter des actions | Plugiciels du thème Canada.ca | Exécute des actions, tel que filtrer un tableau, selon une configuration pré-établis. (Documentation) | gcweb/doaction |
Documentation du coeur de la BOEW 4
- Date de modification :