⬆️ ⬇️

A plugin for Bootstrap 3 that enhances the accessibility of interfaces

The toolkit Bootstrap is quite popular among developers. However, the interfaces that result from it often have problems with accessibility, that is, accessibility for users with disabilities. As a result, the resulting interface may not meet the requirements imposed on it, since accessibility is often one of the items of the specification, and in principle, the interface is not very accessible - this is already bad.



The PayPal development team has been working for a while on a number of accessibility issues in Bootstrap 3, resulting in the emergence of accessibility plug-in, which has recently been made publicly available. In fact, it allows you to implement the availability of the interface at a basic level without any special knowledge in this area.



The Bootstrap Accessibility Plugin is an optional JavaScript module that connects without modifying the main Bootstrap code. The main accessibility improvements that this plugin provides are the implementation of keyboard navigation and the support of basic screen access programs. In addition, there are some minor improvements to the contrast of alert messages.



For some widgets, such as tabs, carousels, drop-down menus, etc., the onKeyDown event is used to provide control from the computer keyboard. As a result, users who have problems with the mouse, have the opportunity to work with the help of tabs and cursor keys.

')

Immediately after loading, the plugin begins to search for any components of Bootstrap on the page, and, having found it, it adds the necessary roles and states of ARIA to them. This provides additional semantic information for control elements, which improves the accessibility of the interface for screen access programs.



The ratio of background colors and data in the foreground in Bootstrap alert messages may not be sufficient for people with impaired vision, so the plugin also adjusts these parameters, making the overall look more contrast.



Detailed information on the list of interface components to be modified and their changes is available in ReadMe .



The Bootstrap Accessibility Plugin is licensed under the BSD license , and its source code is available on GitHub .

Source: https://habr.com/ru/post/210734/



All Articles