tag:van11y.net,2016-08-16:blog_en Van11y: a collection of accessible scripts Vanilla-accessibility! 2019-03-25T16:02:44+00:00 Nicolas Hoffmann https://van11y.net/ tag:van11y.net,2019-03-25:Some-updates-for-carousel-script Some updates for carousel script 2019-03-25T15:57:21+00:00 2019-03-25T16:02:44+00:00

Dean Hamack from Paciello Group suggested me to have an option to disable arrows for speech synthesis/keyboard users (which transforms the carousel into tabs basically), and to change the value of the tabindex that is set up to headings in carrousel contents (from 0 to -1).

The attribute data-carousel-hide-arrows-focus will make next/previous buttons not focusable for keyboard users and not visible for speech synthesis. The second demo of accessible carousel shows it.

In addition to this, the tabindex values have been updated for headings in carousel content, as recommended.

This fix has been published on Github/NPM (See Github repositery of Van11y carousel script). Documentation of the accessible carousel has also been updated.

A big thanks to Dean Hamack from Paciello Group for the suggestions!

tag:van11y.net,2018-11-03:Version-3-for-accessible-accordion Version 3.0 for accessible accordion 2018-11-03T22:03:02+00:00 2018-11-03T22:04:07+00:00

Same as version 3.0.0 of accessible tooltips, here are release notes of the 3.0 version for accessible accordions:

  • Code has been deeply restructured.
  • Plugin is now callable with a customized configuration (See demo, second example and default config documentation).
  • This update will allow to add easily new methods in a near future.
  • New attributes are now customisable.
  • Documentation has also been updated.
  • Demos on the website are now using SRI.

The counterpart for these updates is a slight weight gain. Anyway, the size of the script is 2.8kb minified and gzipped, so that is very reasonable.

This update has been published on Github/NPM a few weeks ago (See Github repositery of Van11y accessible accordion script).

An important point: this update does not break the compatibility with previous versions.

By the way, a huge thank to @CharlotteCMJ and to @lewcrewco for reporting an issue and a solution.

tag:van11y.net,2018-08-15:Simplification-of-the-design-pattern-for-accordion Simplification of the design pattern for the accordion 2018-08-15T16:28:52+00:00 2018-08-15T18:08:39+00:00

The accordion design pattern has been updated, and it is far simpler: no more keyboard shortcuts needed when you are in accordion contents. All buttons are now focusable, which is also far simpler. By the way, some of these shorcuts did not work, as they were in conflict with some browser keyboard shortcuts, so no regrets.

The script is thus lighter (no need to manage these shortcuts), and is now compliant with the last version of accordion design pattern.

This fix has been published (in 3 steps due to bugs) on Github/NPM today (See Github repositery of Van11y accordion script). Documentation of the accessible accordion has also been updated.

A big thank to @goetsu and @zigazou for mentionning this point!

tag:van11y.net,2018-07-22:Version-3-for-accessible-tooltips Version 3.0 for accessible tooltips 2018-07-22T16:00:32+00:00 2018-07-22T16:27:59+00:00

Same as version 3.0.0 of collapsible regions, here are release notes:

  • Code has been deeply restructured.
  • Plugin is now callable with a customized configuration (See demo, third example and default config documentation).
  • This update will allow to add easily new methods in a near future.
  • New attributes are now customisable.
  • Documentation has also been updated.
  • Demos on the website are now using SRI.

The counterpart for these updates is a slight weight gain. Anyway, the size of the script is 2kb minified and gzipped, so that is very reasonable.

This update has been published on Github/NPM today (See Github repositery of Van11y accessible tooltip script).

An important point: this update does not break the compatibility with previous versions.

One more time, a huge thank to Aurélien Garroux which made this possible, and without whom this project would not exist.

tag:van11y.net,2018-07-06:7th-Van11y-project-released-accessible-carrousel 7th Van11y project released: an accessible carrousel 2018-07-06T12:03:13+00:00 2019-03-25T15:17:44+00:00

This project took some time to be released because a bit complex to code, it is inspired by the jQuery plugin accessible carrousel.

Be careful if you were a regular user of the jQuery version, even if the way they work are quite similar, there are some strong differences from implementation and deployment point of vue:

  • jQuery version was using a heavy and complex system in JavaScript to add a visibility-off class to hide hidden contents when the carrousel was using transitions… this system is not used anymore, as it is built in using CSS, which is far lighter and smarter.
  • Carrousel elements are now a lot simpler to style: no more repeated .carrouselslide-1-x.slide > div, welcome [data-carrousel-active-slide="1"].slide > .carrousel__content that are really easier to use.
  • Some classes are not used anymore, some other have been added, for more consistence for people that will use the script.

Compatibility is classical: IE9 and greater once the script is transpiled (transpilation is provided on Github repositery in the folder “dist”). You might check that transitions used with CSS are matching your needs.

It weights only 3kb minified and gzipped, which won’t be too heavy for your websites.

You may find it here: accessible carrousel, with the demos, examples and all necessary informations.

Here we are, it is a 1.0 version, young and not perfect, I’m already improving it, but it works, and I hope it will serve you!

tag:van11y.net,2018-06-30:Fix-for-WebPack-users-for-tooltip Fix for WebPack users for tooltip 2018-06-30T16:20:53+00:00 2018-07-01T13:26:27+00:00

In fact, the listeners were not attached properly, and it was creating an issue with WebPack when loading the script.

The fix has been published on Github/NPM yesterday (See Github repositery of Van11y tooltip script). Documentation of the accessible tooltip has also been updated.

tag:van11y.net,2018-06-30:Fix-of-class-namespacing-on-accessible-modal Fix of class namespacing on accessible modal 2018-06-30T14:44:59+00:00 2018-06-30T14:44:59+00:00

The namespacing generated by the data-modal-prefix-class attribute was not correct on close button and on another element inside this close button. It is fixed, so this namespacing can now do correctly its job: isolate each modal design without risking some collisions between them.

Demos have been updated: Demos of accessible modal Van11y.

The update has been published two days ago on Github/NPM (see Github repositery of Van11y modal).

tag:van11y.net,2018-06-28:fix-for-webpack-users-for-accordion Fix for WebPack users for accordion 2018-06-28T14:52:14+00:00 2018-06-28T14:53:41+00:00

In fact, the listeners were not attached properly, and it was creating an issue with WebPack when loading the script.

This fix has been published on Github/NPM today (See Github repositery of Van11y accordion script). Documentation of the accessible accordion has also been updated.

A big thank to @Spone for the fix!

tag:van11y.net,2018-05-13:Version-3-for-accessible-collapsible-regions Version 3.0 for accessible collapsible regions 2018-05-13T15:21:47+00:00 2018-05-14T09:30:15+00:00

At the beginning, it was supposed to be a simple update, but changes were so huge that this new version is a major update.

  • Code has been deeply restructured.
  • Plugin is now callable with a customized configuration (See demo, fourth example and default config documentation).
  • This update will allow to add easily new methods in a near future.
  • Documentation has also been updated.
  • Demos on the website are now using SRI.

The counterpart for these updates is a slight weight gain. Anyway, the size of the script is 2kb minified and gzipped, so that is very reasonable.

This update has been published on Github/NPM today (See Github repositery of Van11y hide/show script).

An important point: this update does not break the compatibility with previous versions.

One more time, a huge thank to Aurélien Garroux which made this possible, and without whom this project would not exist.

tag:van11y.net,2018-05-05:Adding-aria-describedby-to-the-modal Adding aria-describedby to the modal 2018-05-05T00:58:59+00:00 2018-05-05T01:08:51+00:00

As kindly requested by @ram1279, it is now possible to add aria-describedby to the modal code.

To do this, you have to specify data-modal-describedby-id="<the id of the description>" on the button that launches the accessible modal, and the script will add it.

The third demo has an example of this new feature.

The update has been published one hour ago on Github/NPM (see Github repositery of Van11y modal).

tag:van11y.net,2018-04-28:Nested-accordions-are-now-possible Nested accordions are now possible 2018-04-28T17:36:57+00:00 2018-04-28T17:38:37+00:00

By default, the script now supports nested accordions. To do this, the script is going to search for direct children of js-accordion (js-accordion__header). Before, the script was searching for all children of js-accordion without any difference between all of them.

However, it is possible to activate a less strict mode if your site requires some div between js-accordion and js-accordion__header.

This can be achieved using data-accordion-cool-selectors="1" attribute to put onto js-accordion. The first demo illustrates this feature.

This update has been published on Github/NPM today (See Github repositery of Van11y accordion script). Documentation has also been updated.

In addition to this, a new demo using CSS transforms has been added (and a nested accordion demo too), and a fix for WebPack users has also been added.

A big thank to @intelligence for the suggestion!

tag:van11y.net,2018-04-02:several-updates-on-accessible-modal-tooltip-script Several updates on accessible modal tooltip script 2018-04-02T18:43:02+00:00 2018-04-02T18:44:14+00:00

Inspired by last update on accessible modal script, here are some updates on accessible modal tooltip script:

  • Added attribute data-modal-focus-toid, which allows to specify the id of the element in the modal tooltip you want to give the focus to.
  • Added a new example in the demo with CSS transforms
  • Update of package-lock.json file
  • Added a class .<prefix-class>-tooltip__wrapper, which allows to style the modal tooltip easily in some cases.

This fix has been published a few hours ago on Github/NPM (See Github repositery of Van11y modal tooltip script).

tag:van11y.net,2018-03-31:multiples-updates-on-accessible-modal-script Multiples updates on accessible modal script 2018-03-31T17:35:28+00:00 2018-03-31T17:37:56+00:00

As kindly suggested by @codemusket, it was not possible to specify on which element the focus has to be given, once it is launched.

I've just added this feature, it is now possible to specify the id of the element in the modal you want to give the focus to, using the attribute data-modal-focus-toid when loading the modal (closing button if not specified).

The update has been published one hour ago on Github/NPM (see Github repositery of Van11y modal).

In addition to this: a new example of demo using CSS transforms has been added, and a fix for WebPack users has also been added.

Thanks again for this idea of feature!

tag:van11y.net,2018-02-23:Bugfix-for-accessible-modal-tooltip-code Bugfix for accessible modal tooltip script 2018-02-23T14:52:22+00:00 2018-02-23T14:53:15+00:00

The bug was in the code of the tooltip modal itself, a “ " ” was not put at the right place, it was creating an issue not on the “visible” part of the script itself, but annoying on accessibility side (a role attribute was ignored).

This fix has been published a few days ago on Github/NPM (See Github repositery of Van11y tooltip modal script).

Thanks to @martinsam for finding this issue!

tag:van11y.net,2018-01-29:New-feature-for-accessible-hide-show-script-pseudo-element New feature for accessible hide/show script 2018-01-29T18:18:38+00:00 2018-01-29T18:19:58+00:00

The jQuery version of this script (jQuery simple and accessible hide-show system) have demos that are using CSS pseudo-elements to generate some contents.

As it has been reported on the Github account of this script, it may create issues on some speech synthesis that are vocalising these pseudo-elements.

So after the update for the jQuery version, a new feature has been added to the Van11y script, it creates an empty element in the generated button, dedicated to use pseudo-element content, which won’t be vocalised.

<span class="expandmore__symbol" aria-hidden="true"></span>

To see it in action, demos have been updated with a new example that is using this feature (which displays + or − in the button).

It has been published on Github/NPM (See Github repositery of Van11y accessible hide/show script).

tag:van11y.net,2018-01-12:Fix-for-accessible-hide-show-script-child Fix for accessible hide/show script 2018-01-12T15:15:49+00:00 2018-01-12T15:16:17+00:00

This bug could happen if there was an HTML element as child of the button generated by the script. In this case, the click was not properly caught by some browsers. You could see the problem on the french demo, on the third example (if you clicked on “drop down”).

The bug has been fixed, this issue won’t happen again.

The fix has been published yesterday on Github/NPM (See Github repositery of Van11y accessible hide/show script), demos have been updated too.

tag:van11y.net,2017-12-24:Fix-for-accessible-tooltip-script Fix for accessible tooltip script 2017-12-24T17:28:24+00:00 2017-12-24T17:28:24+00:00

As kindly reported by par @adamjohnson, the tooltip script had an issue, which was flickering it.

The fix has been proposed by @yoanmalie, adding pointer-events: none to the pseudo-element that draws the small triangle. Another possibility is to draw it using a CSS transform.

The fix has been published on Github/NPM (See Github repositery of Van11y tooltip script).

tag:van11y.net,2017-12-24:New-option-for-modal-script New option for modal script 2017-12-24T17:04:55+00:00 2017-12-24T17:04:55+00:00

As kindly suggested by @DidierLmn, it might be useful to activate the close button from another button, it is now possible if you add class="js-modal-close" on any element in the modal content.

The update has been published yesterday on Github/NPM (see Github repositery of Van11y modal).

Thanks again for having pointed this problem!

tag:van11y.net,2017-10-30:Version-2-0-for-accessible-tab-panel-script-and-updates Version 2.0 for accessible tab panel script and updates 2017-10-30T09:27:02+00:00 2017-10-30T09:35:01+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the modal source</div>:

van11yAccessibleTabPanelAria(document.getElementById('newContent'));

This update has been published on Github/NPM (See Github repositery of Van11y tab panel script). Documentation has also been updated.

Another update: to use tab panel script, you had before to specify a href="#id_first" id="label_id_first". This is not needed anymore, the script will add ids on the fly, as kindly proposed and added by @gavboulton.

An important point: even if the requirements have been simplified, this update does not break the compatibility with previous versions. If the ids are set up, they will be overwritten by the script.

tag:van11y.net,2017-10-27:Version-2-0-for-accessible-tooltip-script Version 2.0 for accessible tooltip script 2017-10-27T10:31:15+00:00 2017-10-27T10:31:15+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the tooltip source</div>:

van11yAccessibleSimpleTooltipAria(document.getElementById('newContent'));

This update has been published on Github/NPM (See Github repositery of Van11y tooltip script). Documentation has also been updated, and a small bug has been fixed.

An important point: as for other scripts, this update does not break the compatibility with previous versions.

tag:van11y.net,2017-10-25:Version-2-0-for-accessible-modal-tooltip-script Version 2.0 for accessible modal tooltip script 2017-10-25T11:19:57+00:00 2017-10-27T10:29:58+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the modal tooltip source</div>:

van11yAccessibleModalTooltipAria(document.getElementById('newContent'));

This update has been published on Github/NPM (See Github repositery of Van11y tooltip modal script). Documentation has also been updated.

An important point: this update does not break the compatibility with previous versions.

tag:van11y.net,2017-10-23:Version-2-0-for-accessible-modal-script Version 2.0 for accessible modal script 2017-10-23T22:19:37+00:00 2017-10-23T22:20:28+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the modal source</div>:

van11yAccessibleModalWindowAria(document.getElementById('newContent'));

This update has been published on Github/NPM (See Github repositery of Van11y modal script). Documentation has also been updated.

An important point: this update does not break the compatibility with previous versions.

tag:van11y.net,2017-10-20:Version-2-0-for-accessible-hide-show-script Version 2.0 for accessible hide/show script 2017-10-20T16:07:13+00:00 2017-10-20T16:08:01+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the expand source</div>:

van11yAccessibleHideShowAria(document.getElementById('newContent'));

This update has been published on Github/NPM today (See Github repositery of Van11y hide/show script). Documentation has also been updated.

An important point: this update does not break the compatibility with previous versions.

tag:van11y.net,2017-10-15:Version-2-0-for-accordion-script Version 2.0 for accordion script 2017-10-15T22:15:31+00:00 2017-10-16T11:27:41+00:00

This first major update now allows to execute the script on AJAX generated content. If you need to do so, you may use for example on <div id="newContent">the accordion source</div>:

van11yAccessibleAccordionAria(document.getElementById('newContent'));

This update has been published on Github/NPM today (See Github repositery of Van11y accordion script). Documentation has also been updated.

An important point: this update does not break the compatibility with previous versions.

A big thank to @intelligence for the suggestion, and to @dhoko_, my JavaScript mentor, always here to help me.

tag:van11y.net,2017-09-25:New-example-for-collapsible-regions New example for collapsible regions 2017-09-25T15:36:08+00:00 2017-09-25T15:36:08+00:00

Following a discuss on Twitter, the request has been made on Github by @ffoodd: having a drop down style for accessible hide/show (collapsible regions) script.

Style have been added, and the demo has been updated too.

You may note, depending of your case, that the Accessible dialog tooltip (modal) can also be used to do this job, up to you to choose the best solution. This component will be updated as soon as possible to show an example.

tag:van11y.net,2017-09-13:New-feature-for-accessible-tab-panel-script New feature for accessible tab panel script 2017-09-13T23:48:52+00:00 2017-09-13T23:48:52+00:00

The request has been made on Github by @hans2103: being possible to specify a tab panel opened by default.

The solution has been taken from the jQuery version of tab panel accessible script: by putting data-selected="1" on the js-tablist__link you want to be selected by default, the script will make it opened automatically when displaying the page.

The tab panel page has been updated, and the demo page too, Github repositery and NPM are also up to date.

tag:van11y.net,2017-07-12:Fix-for-modal-script Fix for modal script 2017-07-12T17:10:53+00:00 2017-07-12T17:11:15+00:00

As kindly reported by @sbonaventure, the script was not working properly if the button that is launching the modal was containing an image (or any other child).

The update has been published today on Github/NPM (see Github repositery of Van11y modal).

Thanks again for having pointed this problem!

tag:van11y.net,2017-06-14:Van11y-website-as-a-mini-PWA Van11y website as a mini-PWA 2017-06-14T14:55:10+00:00 2018-01-16T15:59:35+00:00

As this website is served through HTTPS, nothing could prevent it using Service Workers.

Now, the website is working as a mini-PWA, as shown below by the tool Lighthouse, used on this website.

100% to PWA tests on Lighthouse

Concretely, if you browse the website and suddenly you lost connectivity, if your browser allows it, the dark magic of Service Workers comes into action and:

  • if you come back to a visited page, you won’t see any problem;
  • if you try to browse a not yet visited page, the website will display you a special page and tells you that your are offline.

Here we are: it is a beginning in offline management, I hope it will be enhanced in a near future!

tag:van11y.net,2017-06-08:A-new-project-accessible-modal-dialog-tooltip A new project: accessible modal dialog tooltip 2017-06-08T17:51:39+00:00 2017-06-14T13:59:15+00:00

This project has been created while going to Sud Web in Aix-en-Provence, it is inspired by the jQuery plugin accessible dialog tooltip.

Compatibility is classical: IE9 and greater once the script is transpiled (transpilation is provided on Github repositery in the folder “dist”).

It weights only 2kb minified and gzipped, which won’t be too heavy for your websites.

You may find it here: accessible modal dialog tooltip, with the demos, examples and all necessary informations.

Here we are, it is a 1.0 version, young and not perfect, but it works, and I hope it will serve you!

tag:van11y.net,2017-06-07:Enhancement-for-modal-script Enhancement for modal script 2017-06-07T18:24:04+00:00 2017-06-08T17:39:21+00:00

As kindly suggested by @johan_ramon, the modal script adds now the attribute aria-haspopup to the elements that will launch a modal in the page.

The update has been published today on Github/NPM (see Github repositery of Van11y modal), and example pages on this site have also been updated.

tag:van11y.net,2017-04-19:A-new-project-accessible-modal-window A new project: accessible modal window 2017-04-19T15:00:17+00:00 2017-04-19T17:55:58+00:00

This project has been set up last week-end (which will enable to create other similar projects), it is inspired by the jQuery plugin accessible modal window (behaviour are the same).

Compatibility is classical: IE9 and greater once the script is transpiled (transpilation is provided on Github repositery in the folder “dist”).

It weights only 2kb minified and gzipped, which is still very reasonable.

You may find it here: Accessible modal window, with the demos and all necessary informations.

One point: it is not fully built in progressive enhancement. However, it is possible and quite easy to do, you may not hide modal content and put an anchor to it. Once JavaScript is loaded, you may hide these contents using JavaScript, and the modal script will take over.

Here we are, it is a 1.0 version, certainly not perfect, but it works, and I hope it will serve you!

Update: the first bug has been discovered and fixed.

tag:van11y.net,2017-04-14:Linting-and-re-indentation-for-all-scripts Linting and re-indentation for all scripts 2017-04-14T18:12:04+00:00 2017-04-14T18:16:34+00:00

All scripts have been cleaned up, using ESLint (non-necessary variables, mistakes, etc.) and have been re-indented properly using JS Beautifier.

Some minor fixes have also been made on all repositeries on Github:

tag:van11y.net,2017-03-09:A-bug-fixed-for-accordion-script A bug fixed for accordion script 2017-03-09T14:24:17+00:00 2017-03-09T14:25:11+00:00

Buttons generated by the script now have type="button" attribute, which may avoid problems with SharePoint or in forms.

The update has been published yesterday on Github/NPM (see Github repositery of Van11y accordion), and example page on this site have also been updated.

tag:van11y.net,2017-03-07:Some-fixes-for-hide-show-script Some fixes for hide/show script 2017-03-07T17:35:40+00:00 2017-03-07T17:40:38+00:00

Buttons generated by the script have now the attribute type="button", which will avoid problems with SharePoint or with forms.

The Gulpfile.js file was missing on its Github repositery, this is fixed. There is also a real readme on it now.

By the way, the RSS file of the website has been corrected.

tag:van11y.net,2017-01-10:Van11y-in-french-and-a-lot-of-updates Van11y in french and a lot of updates 2017-01-10T09:32:16+00:00 2017-01-10T09:33:14+00:00

You might have noticed the link at the top of the pages, if you prefer speaking french. All pages that have a translation have a direct link for switching language, and website is also providing link rel="alternate" hreflang="fr".

Anyway, here is a list of other updates about this website:

  • Van11y is now on HSTS preload list, so this domain will only use HTTPS;
  • Some others security improvements are providing an A+ for Van11y website on Mozilla Observatory, scoring 130/100;
  • The CSS for printing has been fixed and enhanced;
  • Some minor updates on all demos have been made too;
  • The news have been updated too, to avoid some duplicates.

As always, it is not perfect, but let’s always try to do better!

tag:van11y.net,2016-10-26:new-project-accessible-simple-tooltip A new project: accessible simple tooltip 2016-10-26T22:27:54+00:00 2016-10-27T09:18:42+00:00

This project was in fact the first one that initiated Van11y project, thanks to @dhoko_ fantastic work and other suggestions on the jQuery accessible simple tooltip.

This simple Tooltip is not intended to be a decorative, when you use it, remember that the information in it will be vocalized when you will focus/hover the element with the tooltip.

You may find it here: Van11y Accessible Simple Tooltip

I would like to say again thanks to @dhoko_ for everything. This project could not exist without him.

tag:van11y.net,2016-10-19:all-scripts-on-Bower All scripts on Bower 2016-10-19T14:32:33+00:00 2016-10-19T14:32:33+00:00

All 3 scripts are now available on bower. So you may run:

  • bower install van11y-accessible-accordion-aria for accordion;
  • bower install van11y-accessible-hide-show-aria for hide-show;
  • and bower install van11y-accessible-tab-panel-aria for the tab panel.
tag:van11y.net,2016-09-26:first-launch-of-Van11y-project First launch of Van11y project 2016-09-26T17:34:56+00:00 2016-10-19T14:34:26+00:00

Van11y means Vanilla-Accessibility.

This project is a rewrite of jQuery Plugins in accessibility section made by Nicolas Hoffmann. All these scripts are set up in ES2015, and can be transpiled to IE9+ compatible Vanilla JavaScript.

  • All scripts are placed under MIT license.
  • A lot of parameters, attributes are placed into constants, that means you can set up your own conventions for attributes and styling (which was not possible in jQuery previous versions).

Three scripts are ready for now, Accessible tab panel, Accessible Accordion, Accessible hide/show, I hope to add new ones very soon.

Well, the paint is fresh, everything is not perfect, but here we are!

I would like to thank Enza Chaffron for the design, Aurélien Garroux for JavaScript, and Aurélien Lévy for all accessibility questions.