Version

igMaskEditor Accessibility Compliance

igMaskEditor Accessibility Compliance

All of the Ignite UI for jQuery™ controls and components comply with Section 508, Subpart 1194.22 of the Rehabilitation Act of 1973. Table 1 contains the specific rules of Subpart 1194.22 that pertain to the control. Also detailed is how the igMaskEditor control complies with each rule. To meet the requirements each accessibility rule, in some cases, you may need to interact with the control by to setting a specific property, but in other cases the control does the work for you.

Note: As jQuery controls are client-only, some of the rules are not supported and are marked as limitations.

Table 1: Section 508 compliance description

Rules How We Comply with Rules
(c) Using client side events, the user can change attributes of any of the control's DOM element reflecting the current state.
(d) The control's markup is readable without the associated style sheet because it’s a client-side control and depends on the CSS rules.
(l) When the control's scripts are changing the page markup, the new created content complies with the screen reader due to the attributes described in rule (c).
(n) When igMaskEditor is on focus(edit mode) keyboard navigation is available. See the Editors Keyboard Navigation topic for a detailed list of available key operations and their respective action.

WAI-ARIA Support

In 2014 the W3C finalized their WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities. The igMaskEditor has been designed so that it follows these guidelines.

The list below provides details about what changes have been made to the igMaskEditor to support WAI-ARIA. Please note that no special settings are needed to leverage these changes, as they are all enabled by default.

  • The input element of the igMaskEditor will render a tabindex attribute with a corresponding value from the tabindex option of the igMaskEditor, which allows access to the elements through the use of Tab and Shift+Tab keys.

Note: If the tabindex option is not specified - tabindex equal to -1 is rendered as an attribute to the input element.

  • The igMaskEditor is decorated with a textbox role.

  • The igMaskEditor is decorated with a aria-label attribute with the corresponding value depending on the locale. The default value is 'Mask Editor'.

  • In case button is rendered

    • Every rendered button is decorated with button role
    • Every rendered button has id (generated from the id of the widget)
    • Every rendered button has aria-label attribute rendered with value extracted from the loaded locale.

View on GitHub