node package manager


Build status — Travis-CI js-semistandard-style GAAD-widget on Npmjs License Total downloads ~ Size of Javascript


Display a banner-link to promote Global Accessibility Awareness Day (GAAD). The banner displays for a configurable period before and after the day.

Global Accessibility Awareness Day

Join us on Thursday, May 18 2017 and mark the sixth Global Accessibility Awareness Day (GAAD). The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

Read the blog post. Built on Datejs (API).

Note ~ this is not an official widget!

Original Gist.



  • Adopted Browserify,
  • Switch from Datejs include, to a lookup of JSON embedded in the Javascript,
    • Reduces Javascript file size from 55 to ~8 kilobytes 💓
  • Renamed Javascript, CSS etc. build/GAAD.widget.jsbuild/gaad-widget.js
  • Renamed default HTML id=".." from id-gaadid-gaad-widget (plus, data- attribute)


  • Added ?gaadwidget=force URL parameter, #2
  • Added iCal and JSON data files.


  • Different after-event message - containing next year's date, #5 - thanks @srinivasu..
  • Added translation into Français/French, #4
  • Added neutral black theme, #2
  • Changed default days_after from 5 to 10.


  • Zero configuration required by default,
  • Paste and forget - the banner appears 10 days before and disappears 10 days after,
  • Configurable,
  • Basic internationalization,
  • Basic automated testing in place (Travis-CI),
  • Accessible ~ let me know if you spot a problem!
  • Responsive design,
  • Compatible with all modern browsers, and MSIE 9-11,
  • CDN courtesy of RawGit (thank you!) - with HTTPS/SSL.


Install and test

npm i gaad-widget
npm run build
npm test


Via unpkg - production CDN:

<div id="id-gaad-widget"></div>
<script src=""></script>

Via RawGit - production CDN:

<div id="id-gaad-widget"></div>
<script src=""></script>

Local hosting:

<div id="id-gaad-widget"></div>
<script src="build/gaad-widget.js" ></script>

Setting the days_before option:

<div id="id-gaad-widget"></div>
<script src="build/gaad-widget.js" data-gaad-widget='{ "days_before": 20 }'></script>

Setting several configuration options:

<div id="custom_id"></div>
  data-gaad-widget='{ "id": "custom_id", "days_after": 10, "theme": "black", "debug": true }'


Translations, #4.

Français (French):

<div id="id-gaad-widget"></div>
<script src="build/gaad-widget.js" data-gaad-widget='{ "lang": "fr" }' ></script>


A plugin for WordPress.


License: MIT.

Twitter: @nfreear, @gbla11yday.