jQWidgets Accessibility Overview

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.

To help users create accessible web applications our widgets come with Keyboard Support, Right-To-Left Languages Support, built-in WAI-ARIA Support and a High Contrast theme to help users with low vision or other visual disabilities.

WAI-ARIA

WAI-ARIA defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.

WAI-ARIA is built-in our widgets and is enabled by default. Our widgets will automatically add the necessary "role" and "attributes" according to the W3C's "Widget Design Patterns".

Example with the jqxSlider widget.
- Add a DIV tag with ID="slider". 
<div id='slider'></div>
- Initialize the jqxSlider widget. 
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () { 
            $('#slider').jqxSlider({min: 0, max: 10, value: 5 });
        });
    </script>
</head>
<body class='default'>
       <div id='slider'></div> 
</body>
</html>
- When we inspect the result in the browser by using the developer tools, we will see the following attributes added to the Slider's DIV tag: 
<div id="slider" role="slider" class="jqx-slider jqx-widget" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10" aria-disabled="false" tabindex="0" style="width: 300px; height: 30px;">
In case you want to turn the WAI-ARIA support off, then before the initialization of the widgets do the following: 
$.jqx.ariaEnabled = false;

Right-to-Left(RTL) Support

You can rely on our widgets when creating international web pages that include support for right-to-left reading order and mirroring UI elements. Thus, your web sites will be more accessible for users working in Right-to-left languages like Arabic and Hebrew.

If you need to switch a widget to right-to-left representation, just set the specifically designed property - "rtl" to true. 
 $("#checkbox").jqxCheckBox({rtl: true });

WCAG 2.0 AAA Compliant High Contrast Theme

The High Contrast theme(jqx.highcontrast.css) was developed to provide enough contrast between texts and backgrounds so that texts displayed on the widgets can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).

WCAG 2.0 AAA compliance requires a minimum contrast ratio of 7:1 because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them). The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well.

Contrast ratios of our High contrast theme:

Normal Text Color:Background = 21
Hover Text Color:Background = 21
Selected Text Color:Background = 15.13

In order to apply the high contrast theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.highcontrast.css" type="text/css" />
- Set the widget's theme property to 'highcontrast' when you initialize it. 
 $("#checkbox").jqxCheckBox({theme: 'highcontrast' });

Keyboard Support

To make our widgets even more accessible, we provided support for multiple Keyboard keys so that your end-users can easily and quickly interact with the widgets.

For additional details about the Keyboard support in each widget, click any link below:
  • jqxGrid
  • jqxListBox
  • jqxComboBox
  • jqxDropDownList
  • jqxCalendar
  • jqxDateTimeInput
  • jqxSlider
  • jqxWindow
  • jqxTree
  • jqxTabs