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 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 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.   

Related topics

Creating a custom user interface with AngularJS