tag:van11y.net,2016-08-16:blog_fr Van11y : une collection de scripts accessibles Vanilla-accessibility! 2019-03-25T16:19:40+00:00 Nicolas Hoffmann https://van11y.net/fr/ tag:van11y.net,2019-03-25:Mises-à-jour-script-carrousel Mises à jour sur le script de carrousel 2019-03-25T16:17:28+00:00 2019-03-25T16:19:40+00:00

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 !

tag:van11y.net,2018-11-03:Version-3-accordéon-accessible Version 3.0 de l’accordéon accessible 2018-11-03T21:39:53+00:00 2018-11-03T22:00:56+00:00

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 :

  • Le code a été totalement restructuré.
  • Le plugin est désormais appelable avec une configuration personnalisée (Voir la démo, second exemple et la documentation de la configuration par défaut).
  • La restructuration permettra l’ajout de méthodes à l’avenir.
  • De nouveaux éléments sont paramétrables pour le fonctionnement du script.
  • La documentation a été également mise à jour.
  • Les démos sur le site utilisent désormais SRI.

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 !

tag:van11y.net,2018-08-15:Simplification-du-design-pattern-pour-accordéon Simplification du design pattern pour l’accordéon 2018-08-15T16:18:07+00:00 2018-08-15T18:08:16+00:00

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 !

tag:van11y.net,2018-07-22:Version-3-infobulles-accessibles-tooltips Version 3.0 des infobulles accessibles (tooltips) 2018-07-22T15:50:31+00:00 2018-07-22T15:50:31+00:00

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.

tag:van11y.net,2018-07-06:Septième-projet-Van11y-carrousel-accessible Septième projet Van11y : un carrousel accessible 2018-07-06T11:43:13+00:00 2019-03-25T15:17:54+00:00

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 :

  • La version jQuery utilisait toute une artillerie lourde en JavaScript pour ajouter une classe 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).
  • Les éléments sont devenus beaucoup plus simples à styler : finis les .carrouselslide-1-x.slide > div à répétition, bonjour les [data-carrousel-active-slide="1"].transition > .carrousel__content bien plus simples.
  • Certaines classes générées ont été abandonnées, et d’autres ajoutées, pour plus de consistance pour les personnes qui s’en serviront.

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 !

tag:van11y.net,2018-06-30:Un-fix-pour-WebPack-et-tooltips Un fix pour les utilisateurs de WebPack et des tooltips 2018-06-30T16:28:12+00:00 2018-07-02T09:05:35+00:00

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.

tag:van11y.net,2018-06-30:Fix-namespacing-classes-modale-accessible Fix du namespacing des classes de la modale accessible 2018-06-30T14:32:29+00:00 2018-06-30T14:33:54+00:00

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).

tag:van11y.net,2018-06-28:fix-utilisateurs-WebPack-accordéon Un fix pour les utilisateurs de WebPack et de l’accordéon 2018-06-28T14:59:31+00:00 2018-06-28T14:59:31+00:00

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 !

tag:van11y.net,2018-05-13:Version-3-des-panneaux-dépliants-accessibles Version 3.0 des panneaux dépliants accessibles 2018-05-13T15:02:13+00:00 2018-05-14T09:29:21+00:00

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.

tag:van11y.net,2018-05-05:Ajouter-aria-describedby-à-la-modale Ajouter aria-describedby à la modale 2018-05-05T01:07:48+00:00 2018-05-05T01:09:07+00:00

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).

tag:van11y.net,2018-04-28:Les-accordéons-imbriqués-sont-désormais-possibles Les accordéons imbriqués sont désormais possibles 2018-04-28T17:20:21+00:00 2018-04-28T17:21:57+00:00

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 !

tag:van11y.net,2018-04-02:multiples-ajouts-script-tooltip-modal-accessible Multiples ajouts sur le script de tooltip modal accessible 2018-04-02T15:04:35+00:00 2018-04-02T18:42:53+00:00

Directement inspirés des derniers ajouts sur le script de modale, voici une salve de nouveautés sur le tooltip modal :

  • Ajout de l’attribut data-modal-focus-toid, qui permet de spécifier l’id de l’élément auquel il faut donner le focus dans le tooltip modal
  • Ajout d’un nouvel exemple de démo avec des transformations CSS
  • Modification du fichier package-lock.json
  • Ajout d'une classe .<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.

tag:van11y.net,2018-03-31:multiples-ajouts-sur-script-modale-accessible Multiples ajouts sur le script de modale accessible 2018-03-31T17:16:48+00:00 2018-03-31T17:35:24+00:00

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é !

tag:van11y.net,2018-02-23:Correction-bug-tooltip-modal-code Correction d’un bug sur le tooltip modal 2018-02-23T14:42:59+00:00 2018-02-23T14:49:09+00:00

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é !

tag:van11y.net,2018-01-29:Ajout-possibilité-pseudo-element-panneaux-dépliants-accessibles Ajout d’une possibilité pour les panneaux dépliants accessibles 2018-01-29T18:08:35+00:00 2018-01-29T18:20:36+00:00

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).

tag:van11y.net,2018-01-12:Correction-bug-enfants-panneaux-depliants-accessibles Correction d’un bug pour les panneaux dépliants accessibles 2018-01-12T15:07:35+00:00 2018-01-12T15:07:35+00:00

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.

tag:van11y.net,2017-12-24:Fix-pour-le-script-de-tooltip Fix pour le script de tooltip 2017-12-24T17:21:01+00:00 2017-12-24T17:21:01+00:00

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).

tag:van11y.net,2017-12-24:Nouvelle-option-pour-le-script-de-modale Nouvelle option pour le script de modale 2017-12-24T16:56:15+00:00 2017-12-24T17:02:56+00:00

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é !

tag:van11y.net,2017-10-30:Version-2.0-du-script-onglets-accessibles-et-simplification Version 2.0 du script d’onglets accessibles et simplification 2017-10-30T09:37:36+00:00 2017-10-30T09:37:36+00:00

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 ids à 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 ids sont posés, le script les re-génèrera.

tag:van11y.net,2017-10-27:Version-2-0-du-script-de-tooltip Version 2.0 du script de tooltip 2017-10-27T10:26:06+00:00 2017-10-27T10:27:19+00:00

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.

tag:van11y.net,2017-10-25:Version-2-0-du-script-de-modale-tooltip Version 2.0 du script de tooltip modal 2017-10-25T11:13:58+00:00 2017-10-25T11:13:58+00:00

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.

tag:van11y.net,2017-10-23:Version-2-0-du-script-de-modale-accessible Version 2.0 du script de modale accessible 2017-10-23T22:29:34+00:00 2017-10-23T22:29:34+00:00

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.

tag:van11y.net,2017-10-20:Version-2-0-du-script-des-panneaux-dépliants-accessibles Version 2.0 du script des panneaux dépliants accessibles 2017-10-20T16:11:30+00:00 2018-01-12T15:00:53+00:00

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.

tag:van11y.net,2017-10-15:Version-2-0-du-script-d-accordéon Version 2.0 du script d’accordéon 2017-10-15T22:25:05+00:00 2017-10-16T11:28:07+00:00

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.

tag:van11y.net,2017-09-25:Nouvel-exemple-sur-les-panneaux-dépliants-accessibles Nouvel exemple sur les panneaux dépliants accessibles 2017-09-25T15:27:25+00:00 2017-09-25T15:27:56+00:00

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.

tag:van11y.net,2017-09-13:Nouvelle-possibilité-pour-les-onglets Nouvelle possibilité pour les onglets 2017-09-13T23:40:02+00:00 2017-09-13T23:40:02+00:00

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.

tag:van11y.net,2017-07-12:fix-pour-la-modale Fix pour la modale 2017-07-12T17:06:18+00:00 2017-07-12T17:07:38+00:00

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 !

tag:van11y.net,2017-06-14:Le-site-Van11y-en-mini-PWA Le site Van11y en mini-PWA 2017-06-14T14:34:24+00:00 2018-01-16T16:00:08+00:00

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.

100% aux tests PWA avec Lighthouse

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 :

  • si vous revenez sur une page que vous avez déjà visitée, vous ne verrez pas de différence ;
  • si vous essayez de visiter une page non encore vue, le site vous affichera une belle page qui vous dit que vous êtes déconnecté.

Bref, c’est un début de gestion du hors-ligne, j’espère pouvoir améliorer encore cela à l’avenir !

tag:van11y.net,2017-06-08:Un-nouveau-projet-dialog-tooltip-modal-accessible Un nouveau projet : un dialog tooltip modal accessible 2017-06-08T17:46:39+00:00 2017-06-14T14:04:42+00:00

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 !

tag:van11y.net,2017-06-07:Amélioration-de-la-modale Amélioration de la modale 2017-06-07T18:19:30+00:00 2017-06-07T18:19:30+00:00

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.

tag:van11y.net,2017-04-19:Un-nouveau-projet-fenêtre-modale-accessible Un nouveau projet : une fenêtre modale accessible 2017-04-19T14:49:16+00:00 2017-04-19T17:55:19+00:00

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.

tag:van11y.net,2017-04-14:Linting-et-ré-indentation-pour-tous-les-scripts Linting et ré-indentation pour tous les scripts 2017-04-14T18:20:33+00:00 2017-04-14T18:21:30+00:00

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 :

tag:van11y.net,2017-03-09:Correction-d-un-bug-pour-le-script-d-accordéon Correction d’un bug pour le script d’accordéon 2017-03-09T14:18:28+00:00 2017-03-09T14:23:57+00:00

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.

tag:van11y.net,2017-03-07:Correction-de-bugs-pour-les-panneaux-dépliants Correction de bugs pour les panneaux dépliants 2017-03-07T17:30:44+00:00 2017-03-07T17:39:06+00:00

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é.

tag:van11y.net,2017-01-10:Van11y-en-français-et-une-tonne-de-mises-à-jour Van11y en français et une tonne de mises à jour 2017-01-10T09:43:38+00:00 2017-01-10T09:44:40+00:00

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 :

  • Van11y est maintenant sur HSTS preload list, donc ce domaine utilisera seulement HTTPS ;
  • D’autres améliorations côté sécurité font obtenir un A+ pour le site Van11y chez Mozilla Observatory, avec un score de 130/100 ;
  • La CSS pour l’impression a été fixée et améliorée ;
  • Quelques mises à jour mineures sur toutes les démos ont été faites ;
  • Les news ont été mises à jour également, pour éviter des adresses dupliquées.

Comme toujours, ce n’est pas parfait, mais essayons de faire toujours mieux !

tag:van11y.net,2016-10-26:nouveau-projet-infobulles-accessibles Un nouveau projet : des infobulles accessibles 2016-10-26T22:27:54+00:00 2016-10-27T09:18:42+00:00

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.

tag:van11y.net,2016-10-19:Tous-les-scripts-dispos-sur-Bower Tous les scripts dispos sur Bower 2016-10-19T14:32:33+00:00 2016-10-19T14:32:33+00:00

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 ;
  • et bower install van11y-accessible-tab-panel-aria pour les onglets.
tag:van11y.net,2016-09-26:Lancement-du-projet-Van11y Lancement du projet Van11y 2016-09-26T17:34:56+00:00 2016-10-19T14:34:26+00:00

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.

  • Tous les scripts sont placés sous licence MIT.
  • La quasi-majorité des paramètres, attributs sont placés dans des variables, ce qui signifie qu’il est possible de créer vos propres conventions/attributs pour le code et les styles (ce qui n’était pas possible dans les plugins jQuery).

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é.