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!
Same as version 3.0.0 of accessible tooltips, here are release notes of the 3.0 version for accessible accordions:
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.
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!
Same as version 3.0.0 of collapsible regions, here are release notes:
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.
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:
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..carrouselslide-1-x.slide > div
, welcome [data-carrousel-active-slide="1"].slide > .carrousel__content
that are really easier to use.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!
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.
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).
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!
At the beginning, it was supposed to be a simple update, but changes were so huge that this new version is a major update.
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.
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).
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!
Inspired by last update on accessible modal script, here are some updates on accessible modal tooltip script:
data-modal-focus-toid
, which allows to specify the id
of the element in the modal tooltip you want to give the focus to.package-lock.json
file.<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).
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!
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!
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).
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.
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).
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!
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 id
s 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 id
s are set up, they will be overwritten by the script.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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:
Here we are: it is a beginning in offline management, I hope it will be enhanced in a near future!
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!
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.
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.
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:
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.
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.
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:
As always, it is not perfect, but let’s always try to do better!
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.
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;bower install van11y-accessible-tab-panel-aria
for the tab panel.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.
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.