ColorPicker Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

ColorPicker provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-current, aria-hidden and others. They are applied to the corresponding elements inside the template of the components.

The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.

The ColorPicker's role is "dialog". This means that the component has focusable descendant elements and prompts the user for an action.

The following ARIA attributes are used in the ColorPicker:

  • aria-disabled - indicates that user interaction with the ColorPicker is disabled.
  • aria-hidden - applied to interal elements from the template of the ColorPicker to indicate that they do not take part in the interaction with the component and will not be mapped to the accessibility API.
  • aria-haspopup - indicates that the ColorPicker has popup with selectable color items that can appear/disappear.
  • aria-current - indicates that the currently focused color item inside the popup of the ColorPicker.
  • aria-valuemax - indicates the maximal possible value for the hue, brightness and alpha scales inside the ColorPicker's popup.
  • aria-valuemin - indicates the minimal possible value of the hue, brightness and alpha scales inside the ColorPicker's popup.
  • aria-valuenow - indicates the current value of the hue, brightness and alpha scales that are located inside the ColorPicker's popup.
  • aria-label - used to label the colors inside the popup of the ColorPicker with their HEX value representation.
  • aria-labelledby - indicate that a group of color items is labeld by the group header element inside the popup of the element.
  • aria-expanded - indicates that an ColorPicker popup is expanded and it's contents are visible.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the ColorPicker:

Key Action
Alt + Arrow Down Opens the popup.
Alt + Arrow Up Closes the popup.
Escape Closes the popup.

Additional information on WAI-ARIA for the SMART Framework can be found here.