A11y toolkit module

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
btopro's picture

Just wanted to blast it here as well that I made an accessibility toolkit module which provides a block to help provide ways of improving your site for different visual impairments; most resolving around dyslexia (like a font that makes it easier to read). We also store the setting in a cookie and in the future will do this on the serverside so it doesn't have to reload each time (as the screencast currently shows).

Support, feedback and improvement suggestions always welcome: https://drupal.psu.edu/blog/post/a11y-accessibility-toolkit-module

Comments

Thank you and just curious

Charles Belov's picture

1) Is there a reason it hasn't been implemented at the site that talks about it?
2) Does it play well with Varnish?
3) A "disable all animation" setting would be nice, although I don't know how you would do that for JavaScript.

Charles Belov
Webmaster
San Francisco Municipal Transportation Agency (SFMTA)

At the time of the post I had

btopro's picture
  1. At the time of the post I had literally just published it, your right though this would be good to enable on our site; I'll talk to the PSU DUG community about the best place to put something like this on our interface.
  2. I don't see why not, currently it's loading client side / using client side JS cookies so won't impact varnish (yet)
  3. That is a really good idea! Apparently jQuery has a built in global setting exactly for this -- https://api.jquery.com/jquery.fx.off/ which we could toggle based on checking the box

Add an issue to our queue referencing this one; thanks for the feedback! https://github.com/elmsln/elmsln/issues/800

CSS too (on animation)

Charles Belov's picture
  1. Glad to hear jQuery handles the JavaScript issue. Just so it's mentioned, choosing no animation would also set at least the following CSS properties:
  • {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    }

and perhaps others.

Charles Belov
Webmaster
San Francisco Municipal Transportation Agency (SFMTA)

Thanks for the feedback; I've

btopro's picture

Thanks for the feedback; I've added the css/js animation disabling to the a11y module. There's also a Dyslexia simulator that's been added since I originally posted this.