This documentation supports the 21.3 version of BMC Helix Innovation Studio.

To view an earlier version, select the version from the Product version menu.

Best practices to create accessible custom view components

You must follow the following best practices for creating custom view components that are accessible by the visually impaired and are Section 508 Open link  compliant:

  • Ensure that every interactive element in a view component is focusable and accessible from the keyboard. 
  • To comply with WAI-ARIA 1.1 specifications to improve interoperability with assistive technologies, perform the following actions:
    • Add proper ARIA Open link  labels to elements that do not have text representation. For example, a button with an X symbol that closes a dialog box or a calendar icon.
    • Add appropriate ARIA and role attributes while creating your own interactive form elements, such as checkboxes, selects, and so on.
    • Add descriptive labels to all form inputs and placeholders.
  • Avoid using any HTML tags except for <a> with correct ng-href attribute for creating navigation links and for <button> for creating interactive button elements.
    However, if you are adding HTML tags, add proper ARIA and role attributes to allow screen readers to identify such elements. Add descriptive alt attributes for <img> tags.
  • Avoid hover events in your event listeners as those are triggered only by using a mouse.
  • Avoid using only color for identifying interactive elements.   
Was this page helpful? Yes No Submitting... Thank you

Comments