@esscorp/accessibility NPM

bootstrap-accessibility

Overview

Collection of jQuery plugins with the goal of making bootstrap-powered pages more accessible.

Install

npm install @esscorp/accessibility;

Use

Move accessibility.js and accessibility.css to your static assets folder (e.g., public/libs).

mkdir -p public/libs/bootstrap-accessibility;
cp -a node_modules/@esscorp/accessibility/accessibility.js public/libs/bootstrap-accessibility/accessibility.js;
cp -a node_modules/@esscorp/accessibility/accessibility.css public/libs/bootstrap-accessibility/accessibility.css;

When your site wants to run in accessibility mode, send the above files to the browser.

<script type="text/javascript" src="/libs/bootstrap-accessibility/accessibility.js"></script>
<link rel="stylesheet" href="/libs/bootstrap-accessibility/accessibility.css">

No initialization needed. But if you add DOM elements after the page is loaded, you'll need to re-run the jQuery accessibility plugins. Do this by triggering the 'activate.accessibility' event on any DOM element in the <body>. Example:

<script type="text/javascript">
    $(function() {
        $('body').append('<p><i class="fa fa-user"></i> This icon needs an aria-hidden tag.</p>');
        $('body').trigger('activate.accessibility');

        // this will generate the same result as above
        var added = $('body').append('<p><i class="fa fa-user"></i> This icon needs an aria-hidden tag.</p>');
        added.trigger('activate.accessibility');
    });
</script>

accessibility accessible bootstrap font-awesome jQuery $

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago