Tiny User-friendly Accessibility Tools - jQuery A11yKit

Any website that you want to be successful and have visitors spend time needs to be easy to navigate. Accessibility is vital so that everyone has those tools they need to use your website regardless of their limitations. 

User focus, announcement and element selection are important accessibility features that help users who rely on assistive technologies (such as a keyboard or a screen reader) to efficiently browse the web. Ensuring that your website is well-designed for these features means it will be usable for more people.

This jQuery plugin makes interacting with accessibility tools easier than before. It has user-friendly APIs and it improves accessibility by implementing setting focuses, announcing content and selecting interactive elements. You don't have to worry about handling focus or other assistive features by yourself anymore.

How to use it:

1. Download and load the a11y_kit.jquery.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/a11y_kit.jquery.js"></script>

2. Set focus on an element using the access() method. The parameter place_focus_before is used to determine whether to set user focus on a temporary span tag instead.

$('input').access();
$('input').access(true);

3. Show an instant message on the page.

<div id="a11y_announcer" aria-live="polite" class="output"></div>

$.announce('Message Here', 'polite');
$.announce('Message Here', 'assertive');

4. Select all :focusable and :tabbable elements within the document.

$(':focusable')
$(':tabbable')

---

This awesome jQuery plugin is developed by patrickfox. For more Advanced Usages, please check the demo page or visit the official website.