Version

igNumericEditor Accessibility Compliance

igNumericEditor 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 igNumericEditor 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) Keyboard Navigation (igNumericEditor)

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 igNumericEditor has been designed so that it follows these guidelines.

The list below provides details about what changes have been made to the igNumericEditor 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 igNumericEditor will render a tabindex attribute with a corresponding value from the tabindex option of the igNumericEditor, 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 igNumericEditor is decorated with a textbox role. In case there are defined listItems option and list is rendered the editor input is decorated with combobox role.

  • The igNumericEditor is decorated with a aria-label attribute with the corresponding value depending on the locale. The default value is 'Numeric 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.

  • In case list items are rendered

    • The editor input is decorated with aria-owns attribute equal to the id of the list container.
    • The dropdown list is decorated with listbox role.
    • Every list item element has generated id and it's decorated with option role.
    • Every list item element has aria-posinset attribute rendered with the corresponding order number in the list
    • Every list item element has aria-selected attribute rendered by default false. The value is changed according to the selection into the drop down list.
    • Every list item has title attribute rendered equal to the text value of the item

View on GitHub