Skip to main content

Accessibility

Overview​

Products and web properties need to be accessible to everyone, including those with vision, hearing, cognitive, or motor impairments. Accessible design is everyone's responsibility, from information and user experience design, through to development, and on into help and support.

It is about understanding the users' journeys and proactively anticipating their needs. To make sure our assets are accessible to everyone, we follow the four principles of the WCAG Guidelines:

  • Perceivable: It can be perceived by at least one of a person's senses.
  • Operable: All interactions are operable through a variation of input methods.
  • Understandable: Information and operation of the interface must be understandable.
  • Robust: Content can be interpreted by a variety of assistive technologies and withstand changes in these technologies.

Interactive components​

Abyss contains interactive components such as button, data table, and modal, which are designed and developed using WAI-ARIA roles, properties and states, and should be operable using assistive technologies (such as screen readers and keyboards).

Because Abyss components are purposefully created to be fairly generic, developers may need to include further ARIA roles, properties and states, as well as Javascript behaviors to more accurately convey the functionality of the component. This, along with a table of keyboard interactions, and a testing environment for screen readers can be found on the Accessibility tab of each component.

An important point about WAI-ARIA attributes is that they don't affect any aspect of the webpage besides the information exposed by the browser's accessibility API.

<Button>Click Here!</Button>

Color Contrast​

The color palette used in the Abyss library are combined to adhere to the WCAG 2.1 text color contrast ratios of 4.5:1 and 3:1. In the Abyss Design Kit, we created a chart showing the color contrast ratio and the pass/fail rate. Developers are encouraged to test their specific uses of color, and when necessary, compare their use of colors to this chart to ensure adequate color contrast ratio.

Icons​

Meaningful or Control Icons​

If the icon is being used in a setting where it is the only element providing meaning, then that same meaning should be conveyed to screen reader users. The below implementation provides examples of situations in which the property isScreenReadable should be set to true and the title property is required and should describe the purpose of the image.

Example 1: An alert icon is used to convey a sense of urgency; there is adjacent text (“There is a data outage”) but the text doesn't include any words that convey urgency. So, in this case, the icon should have a text alternative such as “Alert” or “Warning”.


Example 2: An “X” material icon is used as a close button on a modal dialog. There is no adjacent text, so the icon should have a text alternative of “close” or “close window”.

Decorative Icons​

If the icon is being used in a setting in which it is just a decorative element (which is the default case for icons), then the icon should be ignored by screen readers. The below implementation provides example of which situations would be classified as decorative. Since the default of isScreenReadable is set to false no specific changes need to be made for decorative icons.

Example 1: An alert icon is used next to an urgent message and the word “Alert” is included in the adjacent text. In this case, the icon becomes decorative in nature and should be ignored by screen readers.


Example 2: An “X” material icon is used as a close button on a modal dialog; the word “Close” appears to the right of the button. In this case, the icon should be considered decorative and ignored by screen readers.

Dynamic Type​

Abyss Mobile standards for dynamic types are as follows:

  • We scale typography and icons in increments of 11.8%.
  • Figma shows scaling examples at xxxLarge and AX5.
  • We do not scale images, brand icons, or illustrations.
  • We also do not scale border-weight or border-radius.
  • Some components, such as framing components and certain graphic elements, freeze at xxxLarge (3XL).

Scale​

Additional Resources​

Table of Contents