a11y-menu

The goal of this project is to bring to life in a single JS file an accessibility file, self loading. It should bring these functionalities :

• ability to increase/decrease the font size, without zooming on the images, from 50% to 150% of the actual font size
• ability to fix single letter horizontal space to a single value, increasing readability for ppl that have difficulties to read, reading letter to letter
• ability to toggle the font family, to use at least one readable "sans" font, actually Open Sans (that could change in the future) ; and at least one specific font, OpenDyslexic
• this menu should insert at the top of the page, expanding full width (to be sure we don't break the current design of the page)

Screen capture :

How to use it

You need to import the 2 libs Cookies js and jQuery :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Then you can import a11y-helper.js and a11y-helper.css :

<script src="/path/to/a11y_helper.js"></script>
<link rel="stylesheet" href="/path/to/a11y_helper.css" />

or use the CDN :

<script src="https://cdn.jsdelivr.net/gh/gautiermichelin/a11y@master/a11y_helper.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gautiermichelin/a11y@master/a11y_helper.css" />

Fix your CSS

Sometimes you have classes that "stick" on the top of the screen, for example a navbar or a sticky header. You can fix this by adding a class to the element that you want to fix, and add this class to the CSS file.

This is the actual CSS for the navbar :

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

Now, you need to make it go down for 100px to have enough space for the top accessibility menu.

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.accessibility-menu-open .fixed-top {
  top: 100px;
}

TODO

• remove jQuery dependency
• inject the CSS within the JS to have a single file
• embed cookies lib and use the no-conflict mode : https://github.com/js-cookie/js-cookie#namespace-conflicts

Github pages

Project home page

https://gautiermichelin.github.io/a11y

Example page

https://gautiermichelin.github.io/a11y/example/