Dean Hamack du Paciello Group m’a suggéré de proposer une option pour cacher les flèches pour les synthèses vocales ainsi que pour les utilisateurs navigant au clavier (ce qui transforme le carrousel en onglets pour résumer vulgairement), et de changer la valeur du tabindex
qui est sur les titres dans les contenus du carrousel (de 0
à -1
).
L’attribut data-carousel-hide-arrows-focus
rend donc les boutons précédent/suivant non focusables au clavier et les empêchera d’être vocalisés sur des synthèses vocales. La seconde démo de carrousel accessible montre cette option en action.
Et donc comme indiqué plus haut, l’attribut tabindex
a été mis à jour, comme recommandé.
Cette mise à jour a été publiée sur Github/NPM (voir le dépôt Github du carrousel accessible Van11y). La documentation du carrousel accessible a été mise à jour.
Encore un grand merci à Dean Hamack du Paciello Group pour ces suggestions !
Calquée sur la version 3.0.0 des infobulles accessibles, voici la liste des nouveautés de cette version 3.0 des accordéons accessibles :
La contrepartie à tous ces ajouts est un léger gain de poids. Ceci dit, nous restons à environ 2,8kb minifié et gzippé, donc cela reste très raisonnable.
Le tout a été publié sur Github/NPM il y a quelque temps (Voir le dépôt Github du script d’accordéon accessible Van11y).
Un point important : cette mise à jour ne casse pas la compatibilité avec la précédente version.
Entre temps, un immense merci à @CharlotteCMJ et à @lewcrewco pour avoir signalé un souci et sa solution !
Le design pattern a été mis à jour, et ce dernier est beaucoup plus simple : plus besoin de raccourcis clavier pour quand on est dans les contenus des accordéons. Les boutons sont tous atteignables au clavier, ce qui est plus simple aussi. Ajoutons à cela que certains raccourcis entraient de toutes manières en conflit avec certains navigateurs, donc c’est sans regret.
Le script se retrouve donc allégé de la partie qui gérait cela, et respecte bien la dernière version du design pattern des accordéons.
La correction a été publiée (en 3 fois suite à des bugs) sur Github/NPM aujourd’hui (Voir le dépôt Github du script d’accordéon Van11y). La documentation du script d’accordéon accessible a été également mise à jour.
Un grand merci à @goetsu et @zigazou pour avoir signalé cela !
Calquée sur la version 3.0.0 des panneaux dépliants accessibles, voici la liste des nouveautés :
La contrepartie à tous ces ajouts est un léger gain de poids. Ceci dit, nous restons à environ 2kb minifié et gzippé, donc cela reste très raisonnable.
Le tout a été publié sur Github/NPM aujourd’hui (Voir le dépôt Github du script de panneaux dépliants Van11y).
Un point important : cette mise à jour ne casse pas la compatibilité avec la précédente version.
Encore une fois, un immense merci à Aurélien Garroux qui a rendu tout cela possible, et sans qui ce projet n’existerait tout simplement pas.
Ce projet a mis un certain temps à sortir car quelque peu complexe à coder, il est inspiré de son ancêtre, un plugin jQuery de carrousel.
Attention toutefois si vous étiez habitué à utiliser la version jQuery, car même si les fonctionnements sont assez semblables, il existe des différences notables côté utilisation et implémentation :
visibility-off
pour les contenus non affichés quand le carrousel utilisait des transitions… ce système a été abandonné, car il est mis en place au niveau des CSS (beaucoup plus élégamment et léger)..carrouselslide-1-x.slide > div
à répétition, bonjour les [data-carrousel-active-slide="1"].transition > .carrousel__content
bien plus simples.La compatibilité est aux standards habituels : IE9 et supérieurs une fois le script transpilé (fourni sur le dépôt Github dans le répertoire « dist »). Il faudra par contre vérifier que les transitions utilisées avec CSS collent avec vos besoins.
Côté poids, nous en sommes à 3ko minifié et gzippé pour ce script, ce qui reste très raisonnable.
Vous pourrez le trouver ici : carrousel accessible, avec des démos, des exemples et toute la documentation qui va bien.
Voila, c’est une version 1.0, jeune et imparfaite, je travaille déjà à l’améliorer, mais elle fonctionne, et j’espère qu’elle vous servira !
En fait, les listeners n’étaient pas attachés correctement, et cela créait un problème pour les utilisateurs de WebPack au chargement du script.
Le patch a été publié sur Github/NPM récemment (Voir le dépôt Github du script de tooltip Van11y). La documentation du script d’infobulles (tooltips) accessibles a été également mise à jour.
Le namespacing généré par l’attribut data-modal-prefix-class
était incorrect sur le bouton de fermeture, ainsi que sur une autre classe dans ce dernier. C'est corrigé, ainsi ce namespacing pourra faire ce pour quoi il est prévu : isoler totalement chaque design de modale sans risque de collisions entre les styles.
Les démos ont été mises à jour : Démos de la modale accessible Van11y.
L’ajout a été publié sur Github/NPM il y a deux jours (Voir le dépôt Github de la modale accessible Van11y).
En fait, les listeners n’étaient pas attachés correctement, et cela créait un problème pour les utilisateurs de WebPack au chargement du script.
La correction a été publiée sur Github/NPM aujourd’hui (Voir le dépôt Github du script d’accordéon Van11y). La documentation du script d’accordéon accessible a été également mise à jour.
Un grand merci à @Spone pour le fix !
Au début, cela devait être une mise à jour classique, mais les changements ont été tellement nombreux que cette nouvelle version est une version majeure.
La contrepartie à tous ces ajouts est un léger gain de poids. Ceci dit, nous restons à environ 2kb minifié et gzippé, donc cela reste très raisonnable.
Le tout a été publié sur Github/NPM aujourd’hui (Voir le dépôt Github du script de panneaux dépliants Van11y).
Un point important : cette mise à jour ne casse pas la compatibilité avec la précédente version.
Encore une fois, un immense merci à Aurélien Garroux qui a rendu tout cela possible, et sans qui ce projet n’existerait tout simplement pas.
Comme aimablement demandé par @ram1279, c’est désormais possible d’ajouter aria-describedby
au code de la modale.
Pour ce faire, il faut spécifier data-modal-describedby-id="<l’id de la description>"
sur le bouton qui lance la modale, et le script fera le reste.
La troisième démo montre un exemple de cette possibilité.
L’ajout a été publié sur Github/NPM il y a une petite heure (Voir le dépôt Github de la modale Van11y).
Par défaut, le script supporte désormais les accordéons imbriqués. Pour ce faire, le script va aller chercher les enfants directs de js-accordion
(js-accordion__header
). Avant, le script allait chercher tous les enfants de js-accordion
sans se poser de question.
Toutefois, il est possible d’activer un mode moins strict si votre intégration doit avoir des div
entre js-accordion
et js-accordion__header
.
Cela peut se faire avec l’attribut data-accordion-cool-selectors="1"
à poser sur js-accordion
. La première démo illustre cette possibilité.
Le tout a été publié sur Github/NPM aujourd’hui (Voir le dépôt Github du script d’accordéon Van11y). La documentation a été également mise à jour.
Au passage, un nouvel exemple de démo avec des transformations CSS a été ajoutée (ainsi qu’une démo d’accordéons imbriqués), et un fix pour les utilisateurs de WebPack a été ajouté également.
Un grand merci à @intelligence pour la suggestion !
Directement inspirés des derniers ajouts sur le script de modale, voici une salve de nouveautés sur le tooltip modal :
data-modal-focus-toid
, qui permet de spécifier l’id
de l’élément auquel il faut donner le focus dans le tooltip modalpackage-lock.json
.<prefix-class>-tooltip__wrapper
, qui permet de styler le tooltip modal plus aisément dans certains cas.Le tout a été publié sur Github/NPM il y a peu (Voir le dépôt Github du script de tooltip modal Van11y). La documentation a été également mise à jour.
Comme aimablement suggéré par @codemusket, il n’était pas possible de spécifier sur quel élément de la modale donner le focus clavier, une fois la modale lancée.
Je viens d’ajouter cette possibilité, c’est désormais faisable en spécifiant l’id
de l’élément dans la modale auquel vous souhaitez donner le focus, dans l’attribut data-modal-focus-toid
, quand elle est lancée (bouton de fermeture si non spécifié). C’est testable dans le quatrième exemple de la démo.
La correction a été publiée sur Github/NPM il y a une petite heure (Voir le dépôt Github de la modale Van11y).
Au passage, un nouvel exemple de démo avec des transformations CSS a été ajoutée, et un fix pour les utilisateurs de WebPack a été ajouté également.
Encore merci pour avoir proposé cette possibilité !
Le bug se situait dans le code même du tooltip modal, une « " » fermée au mauvais endroit créait un souci non sur le côté « visible », mais gênant côté accessibilité (un rôle était ignoré)
Le fix a été publié sur Github/NPM récemment (Voir le dépôt Github du script de tooltip modal Van11y).
Un grand merci à @martinsam pour me l’avoir signalé !
La version jQuery des panneaux dépliants (jQuery simple and accessible hide-show system) avait des démos qui utilisaient les pseudo-éléments CSS pour générer certains contenus.
Comme cela a été signalé sur le compte Github de ce script, cela peut poser des problèmes sur certaines aides techniques qui vocalisent ces pseudo-éléments.
Après la mise à jour de la version version jQuery, une nouvelle possibilité a donc été ajoutée au script Van11y, à savoir de proposer un élément compris dans le bouton généré par le script, spécifiquement dédié à cet usage, lequel ne sera pas vocalisé.
<span class="expandmore__symbol" aria-hidden="true"></span>
Plutôt qu’un long discours, les démos ont été mises à jour avec un nouvel exemple qui tire parti de cette possibilité (qui affiche + ou − dans le bouton).
L’ajout a été publié sur Github/NPM (Voir le dépôt Github du script de panneaux dépliants accessibles Van11y).
Le bug pouvait survenir si l’on avait un élément HTML enfant dans le bouton généré par le script. Dans ce cas précis, le clic n’était pas détecté sur certains navigateurs. Cela pouvait se voir sur la démo en français, pour le troisième exemple (si l’on cliquait sur « drop down »).
Le bug est fixé, ce problème n’arrivera plus à l’avenir.
La correction a été publiée sur Github/NPM hier (Voir le dépôt Github du script de panneaux dépliants accessibles Van11y), les démos ont été mises à jour.
Comme aimablement reporté par @adamjohnson, le script de tooltip avait un petit problème qui fait clignoter l’infobulle.
La solution a été proposée par @yoanmalie, ajouter pointer-events: none
au pseudo-élément qui dessine le petit triangle. Une autre possibilité est de le dessiner via une transformation CSS.
Le patch a été publié sur Github/NPM récemment (Voir le dépôt Github du script de tooltip Van11y).
Comme aimablement suggéré par @DidierLmn, il peut être utile de pouvoir activer le bouton de fermeture depuis un autre bouton, c’est désormais possible si l’on pose class="js-modal-close"
sur n’importe quel élément du contenu de la modale.
La correction a été publiée sur Github/NPM hier (Voir le dépôt Github de la modale Van11y).
Encore merci pour avoir proposé cette possibilité !
Cette première mise à jour majeure pour ce script permet d’exécuter par exemple le script sur du contenu généré en AJAX. Si vous avez besoin de le faire, vous pourrez utiliser sur <div id="newContent">la source des onglets</div>
:
van11yAccessibleTabPanelAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM récemment (Voir le dépôt Github du script d’onglets accessibles Van11y). La documentation a été également mise à jour.
Autre mise à jour : avant, pour utiliser ce script, il fallait spécifier a href="#id_first" id="label_id_first"
. Ce n’est plus nécessaire, le script ajoutera les id
s à la volée, comme aimablement proposé et ajouté par @gavboulton.
Un point important : même si la source nécessaire pour utiliser le script s’est simplifiée, cette mise à jour ne casse pas la compatibilité avec la précédente version. Si les id
s sont posés, le script les re-génèrera.
Cette première mise à jour majeure permet d’exécuter par exemple le script sur du contenu généré en AJAX. Si vous avez besoin, vous pourrez utiliser sur <div id="newContent">la source du tooltip</div>
:
van11yAccessibleSimpleTooltipAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM récemment (Voir le dépôt Github du script de tooltip Van11y). La documentation a été également mise à jour. Un petit bug a été fixé au passage.
Un point important : comme pour les autres scripts, cette mise à jour ne casse pas la compatibilité avec la précédente version.
Cette première mise à jour majeure pour ce script permet d’exécuter par exemple le script sur du contenu généré en AJAX. Si vous avez besoin de le faire, vous pourrez utiliser sur <div id="newContent">la source du tooltip modal</div>
:
van11yAccessibleModalTooltipAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM récemment (Voir le dépôt Github du script de tooltip modal Van11y). La documentation a été également mise à jour.
Un point important : comme pour les autres scripts, cette mise à jour ne casse pas la compatibilité avec la précédente version.
Cette première mise à jour majeure permet maintenant d’exécuter par exemple le script sur du contenu généré en AJAX. Si vous avez besoin de le faire, vous pourrez utiliser sur <div id="newContent">la source de la modale</div>
:
van11yAccessibleModalWindowAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM récemment (Voir le dépôt Github du script de modale Van11y). La documentation a été également mise à jour.
Un point important : comme pour les autres scripts, cette mise à jour ne casse pas la compatibilité avec la précédente version.
Cette première mise à jour majeure permet maintenant d’exécuter le script sur du contenu généré en AJAX. Si vous avez besoin de le faire, vous pourrez utiliser par exemple sur <div id="newContent">la source des panneaux dépliants</div>
:
van11yAccessibleHideShowAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM aujourd’hui (Voir le dépôt Github du script de panneaux dépliants Van11y). La documentation a été également mise à jour.
Un point important : cette mise à jour ne casse pas la compatibilité avec la précédente version.
Cette première mise à jour majeure permet maintenant d’exécuter le script sur du contenu généré en AJAX. Si vous avez besoin de le faire, vous pourrez utiliser par exemple sur <div id="newContent">la source de l’accordéon</div>
:
van11yAccessibleAccordionAria(document.getElementById('newContent'));
Le tout a été publié sur Github/NPM aujourd’hui (Voir le dépôt Github du script d’accordéon Van11y). La documentation a été également mise à jour.
Un point important : cette mise à jour ne casse pas la compatibilité avec la précédente version.
Un grand merci à @intelligence pour la suggestion, et à @dhoko_, mon mentor en JavaScript, toujours prompt à m’aider.
Suite à une discussion sur Twitter, la demande a été faite sur Github par @ffoodd : avoir un autre style de type « drop down ».
Le style a été ajouté, et la démo a été mise à jour.
Notez que selon votre cas, le composant tooltip modal accessible peut très faire ce travail, à vous de choisir judicieusement. Il sera mis à jour dès que possible.
La demande a été faite sur Github par @hans2103 : pouvoir spécifier un onglet ouvert par défaut.
La réponse a été directement inspirée de la version jQuery du script des onglets : en mettant data-selected="1"
sur le js-tablist__link
que vous souhaitez sélectionner par défaut, le script l’activera automatiquement au chargement de la page.
La page des onglets a été mise à jour, ainsi que la page des démos, les dépôts Github et autres NPM sont également à jour.
Comme aimablement reporté par @sbonaventure, le script ne fonctionnait pas comme il fallait si le bouton qui lançait la modale contenait une image (ou n’importe quel enfant).
La correction a été publiée sur Github/NPM aujourd’hui (Voir le dépôt Github de la modale Van11y).
Encore merci pour avoir signalé ce bug !
Comme ce site est servi en HTTPS, rien ne s’opposait à l’utilisation des Service Workers.
Résultat, le site fonctionne comme une mini-PWA, comme l’indique ci-dessous l’outil Lighthouse utilisé sur ce site.
Concrètement, si vous naviguez sur le site et que subitement vous perdez votre connexion, si votre navigateur le permet, la magie noire des Service Workers fait son office et :
Bref, c’est un début de gestion du hors-ligne, j’espère pouvoir améliorer encore cela à l’avenir !
Ce projet a été codé en allant à Sud Web à Aix-en-Provence, il est tiré du plugin jQuery accessible dialog tooltip.
La compatibilité est aux standards habituels : IE9 et supérieurs une fois le script transpilé (fourni sur le dépôt Github dans le répertoire « dist »).
Côté poids, nous en sommes à 2kb minifié et gzippé pour ce script, ce qui n’alourdira pas trop vos sites.
Vous pourrez le trouver ici : dialog tooltip modal accessible, avec des démos, des exemples et toute la documentation qui va bien.
Voila, c’est une version 1.0, jeune et imparfaite, mais elle fonctionne, et j’espère qu’elle vous servira !
Comme aimablement suggéré par l’incontournable @johan_ramon, le script ajoute désormais l’attribut aria-haspopup
aux éléments qui vont lancer une modale sur la page.
La correction a été publiée sur Github/NPM aujourd’hui (Voir le dépôt Github de la modale Van11y), et les pages d’exemples sur ce site ont également été mises à jour.
Hasard du calendrier, ce projet a été codé ce dernier week-end (ce qui va permettre d’en créer d’autres semblables), il est tiré du plugin jQuery accessible modal window (les comportements sont tout à fait semblables).
La compatibilité est classique : IE9 et supérieurs une fois le script transpilé (fourni sur le dépôt Github dans le répertoire « dist »).
Côté poids, nous avons 2kb minifié et gzippé pour ce script, ce qui reste somme toute très raisonnable.
Vous pourrez le trouver ici : Fenêtre modale accessible, avec des démos et toute la documentation qui va bien.
À proprement parler, il n’est pas conçu en totale amélioration progressive. Toutefois, cela reste totalement possible et à peu de frais, vous pouvez par exemple ne pas cacher les contenus des modales et faire une ancre vers ces derniers. Une fois JavaScript chargé, vous pouvez cacher ces contenus via JavaScript, et la modale prendra le relai.
Voila, c’est une version 1.0, sûrement imparfaite, mais elle fonctionne, et j’espère qu’elle vous servira !
Ajout : le premier bug a été trouvé et éradiqué dans la foulée.
Tous les scripts ont été nettoyés, en utilisant ESLint (variables inutiles supprimées, petites erreurs, etc.) et ont été ré-indentés proprement en utilisant JS Beautifier.
D’autres petites corrections ont également été faites sur les dépôts Github :
Les boutons générés par le script ont maintenant l’attribut type="button"
, ce qui va éviter des soucis sous SharePoint ou dans les formulaires.
La correction a été publiée sur Github/NPM hier (Voir le dépôt Github de l’accordéon Van11y), et les pages d’exemples sur ce site ont également été mises à jour.
Les boutons générés par le script ont maintenant l’attribut type="button"
, ce qui va éviter des soucis sous SharePoint ou dans les formulaires.
Il manquait le fichier Gulpfile.js
sur le dépôt Github, cet oubli est corrigé. Le même dépôt a également enfin un readme
digne de ce nom.
Au passage, le fil RSS du site a été corrigé.
Vous aurez remarqué le petit lien en haut des pages, si vous préférez parler anglais. Toutes les pages ayant une traduction à disposition auront donc un lien direct pour changer de langue, et le site offre en plus un link rel="alternate" hreflang="en"
.
En plus, voici une liste non-exhaustive de toutes les autres mises à jour sur ce site :
Comme toujours, ce n’est pas parfait, mais essayons de faire toujours mieux !
Ce projet a été en fait le premier qui a initié le projet Van11y, grâce au travail d’Aurélien Garroux (alias @dhoko_) et à d’autres suggestions sur le plugin jQuery accessible simple tooltip.
Ce script n’est pas prévu pour créer des infobulles purement décoratives, quand vous vous en servirez, souvenez-vous que l’information dedans sera vocalisée au focus/survol de l’élément qui déclenche l’infobulle.
Vous pourrez le trouver ici : Infobulles accessibles (tooltips)
Je tiens à remercier encore @dhoko_ pour tout. Ce projet n’aurait pas pu exister sans lui.
Les 3 scripts sont maintenant disponibles sur Bower. Vous pouvez donc lancer :
bower install van11y-accessible-accordion-aria
pour l’accordéon ;bower install van11y-accessible-hide-show-aria
pour les panneaux dépliants ;bower install van11y-accessible-tab-panel-aria
pour les onglets.Van11y signifie Vanilla-Accessibility, en bon français « Accessibilité avec JavaScript » (sans rien d’autre que du pur JavaScript).
Ce projet est une réécriture des plugins jQuery de la section accessibilité faits par Nicolas Hoffmann. Tous ces scripts sont codés en ES2015, eu peuvent être transpilés pour devenir compatibles IE9+, en Vanilla JavaScript.
Trois scripts sont déjà prêts, le système d’onglets accessibles, le système d’accordéon accessible, et un système de panneaux dépliants accessibles, j’espère en ajouter de nouveaux dès que possible.
Bref, la peinture est fraiche, tout n’est pas parfait, mais voilà, c’est un début !
Je veux remercier Enza Chaffron pour le design, Aurélien Garroux pour le JavaScript, et Aurélien Lévy pour toutes les questions d’accessibilité.