Vivid Logo Vivid

Selectable Box

Represents a content box to used in a group where one or more can be selected.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

  • When used as a collection of Selectable Boxes make sure the parent container element has a role of group.
  • If there is no text content inside the Selectable Box (as in the image based boxes use case) make sure the Selectable Box has an aria-label to give it an accessible name.

Resources

Selectable Box: Manual accessibility test