jBility is a free set of accessibility functions that uses JQuery.
The goal is to allow people with low vision to see your website's content.
Currently jBility has four functions:
Changes the css of your page, highlighting texts and links. This function uses cookies to work. By default, the cookie die when browser is closed.
Increases all fonts of your page.
Decreases all fonts of your page.
Replaces all fonts on your page with OpenDyslexic.
These functions make it easier to view a page's content.
A simple example can be found in dist/example folder, or online here
Download the latest JQuery version to your project.
Clone jBility project and copy the dist folder to the root of your project using:
git clone https://github.com/urielcaire/jbility.gitOr using the download button.
Reference the css file properly in your HTML <head> tag and add a font-face for OpenDyslexic font
<style>
@font-face{
font-family:OpenDyslexicRegular;
src:url({{url('/jbility/src/fonts/OpenDyslexic-Regular.otf')}});
font-display:fallback;
font-style:normal;
font-weight:normal;
}
</style>
<link rel="stylesheet" type="text/css" href="path/to/jbility/css/jbility.min.css">Insert the code below on your footer or before close body:
<div class="acess-container">
<div id="jbbutton" class="balloon" title="Accessibility"><span class="balloontext">Accessibility</span><img src="img/acessc50.png"></div>
<div id="acess-icons">
<div class="acess-icon balloon"><span class="balloontext">Contrast</span><img id="contrast" src="img/contraste40.png"/></div>
<div class="acess-icon balloon"><span class="balloontext">Increase Font</span><img id="increaseFont" src="img/fontsma40.png"/></div>
<div class="acess-icon balloon"><span class="balloontext">Decrease Font</span><img id="decreaseFont" src="img/fontsme40.png"/></div>
<div class="acess-icon balloon"><span class="balloontext">Dyslexic Font</span><img id="dyslexicFont" src="img/fontsmd40.png"/></div>
</div>
</div>Reference the js files (jQuery and jBility) properly at the bottom of your <body> tag.
<script type="text/javascript" src="path/to/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="path/to/jbility/js/jbility.min.js"></script>
<!-- </body> ->To build your own jBility, you need to clone the repository by running:
git clone https://github.com/urielcaire/jbility.gitAfter that you will need to install the gulp-cli:
npm install --global gulp-cli
# or with yarn
yarn add global gulp-cliNow you are able to build a full version of jBility, so enter the jBility folder and run the build script:
cd jbility && npm build
# or with yarn
cd jbility && yarn buildTo watch files while change your custom version you can use the watch command:
npm watch
# or with yarn
yarn watch