Accessibility

Accessibility is the ability for applications to be used by everyone, including those with disabilities. This encompasses all types of disabilities, including vision, auditory, motor, and cognitive disabilities.

Accessibility features also benefit users without disabilities. For example, power users may find it faster to interact with your application using a keyboard, rather than a mouse or touch screen. Especially for applications involving a large amount of data entry, good keyboard navigation support can dramatically increase user productivity.

Accessibility in Cimpress UI

Cimpress UI uses React Aria under the hood, which implements accessibility support by following the WAI-ARIA 1.2 specification and the ARIA Authoring Practices Guide.

Cimpress UI components provide many aspects of accessibility out of the box, including full support for screen readers and keyboard navigation. This helps you build inclusive applications that are accessible to everyone. Refer to the API documentation of individual components for details about accessibility considerations and supported keyboard interactions.

Labelling

In order for your application to remain accessible, you must provide a textual label for each control. This gives a screen reader user context about the control they are interacting with.

Form inputs like text fields, checkboxes, and selects usually have a visible label, and Cimpress UI automatically associates the visible label with the control so that assistive technology can describe it properly.

In case a visible label is not desired for some reason, or you’re using a control that doesn’t have a built-in label, you must use the aria-label or aria-labelledby props to identify it to assistive technology. Most Cimpress UI components will display a console warning if you are missing both a visible label and an ARIA label.

If a page uses multiple similar buttons/links - for example, if a page displays multiple cards, each containing a “Read more” button - the accessible names for the buttons need to be unique.

Animation

Cimpress UI components utilize animation as a tool for increasing usability and engagement. However, certain visual effects can cause issues for people suffering from vestibular disorders, resulting in loss of balance, nausea, and other physical discomfort. Examples of common vestibular triggers include:

• scaling and zooming
• depth-of-field changes (3D zoom, blur)
• spinning
• multi-speed or multi-directional movement (including parallax effects)
• plane shifting (moving 2D planes in 3D space)
• peripheral movement

To minimize discomfort for users who suffer from vestibular disorders, some Cimpress UI animations have a reduced-motion version. These animations will be used automatically on devices which have the reduced motion accessibility setting enabled.

Navigation landmarks

A navigation landmark provides a way to identify groups of links that are intended to be used for website or page content navigation.

Certain Cimpress UI components, like breadcrumbs or pagination, have navigation landmarks built-in. It’s important to properly label these components so that users using assistive technologies can quickly access the relevant landmark.

If a page includes more than one navigation landmark, each one should have a unique label. If a navigation landmark has an identical set of links as another navigation landmark on the page - for example, pagination displayed both above and below a data table - use the same label for such landmarks. Refer to the labelling section of this guide for more details.

Form landmark

If a Form component has an aria-label or aria-labelledby attribute, it is exposed to assistive technology as a form landmark, allowing users to quickly navigate to it.

False positives in accessibility audits

There are a number of known accessibility false positives in React Aria, which Cimpress UI uses under the hood. You can learn more about them (and how to suppress them) in React Aria’s accessibility documentation.