IconSearch
IconKeyboardShortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command + ↑
Scroll to Top
command + ↓
Scroll to Bottom
IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
ColorsIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Accessibility Audit

/

Design

See the accessibility status of Uniform components and colors.

Uniform will continue to improve accessibility until we feel confident that our components and guidelines satisfy WCAG 2.1 requirements. Check back often to see the status of every component as we continue to improve.

Audit Details

At the end of each quarter, or as we fix warning and violations, we will update these tables. Our testing gives us indications for three categories, further explained in our internal documentation:

  • Visual: color contrast, state change, reduced motion, and increased font size.
  • Interactive: keyboard use, touch target size (mobile), and aria properties/semantic markup.
  • Automated: jest-axe and Stylelint.

The details column includes a brief explanation of every warning or violation for that component. If a particular component has both a warning and violation for a particular test group, it will show violation, but both will be explained in the details column.

Every warning and violation is tracked on our Jira board — and we'll address one or two each sprint. Despite the current warnings and violations, we've made a lot of progress and feel confident the remaining issues are minor.

Web Component Accessibility Status

This table includes the results of the accessibility audit of our React (web) components. Keep scrolling to find the results of our React Native (mobile) component audit.

Last updated September 30, 2022.

ComponentVisualInteractiveAutomatedDetails
Action BarIconConfirmation PassIconCritical ViolationIconConfirmation Pass
  • IconCriticalComponent contains an interactive div or span with no associated role.
Action ListIconConfirmation PassIconCritical ViolationIconWarning Warning
  • IconCriticalComponent contains an interactive div or span with no associated role.
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)
AvatarsIconWarning WarningIconCritical ViolationsIconConfirmation Pass
  • IconWarningWhen custom colors are used, they do not always result in a sufficient 4.5:1 color contrast ratio.
  • IconCriticalComponent contains an interactive div or span with no associated role.
  • IconCriticalOutermost div is interactive but has no focus styles or tabIndex.
ButtonIconConfirmation PassIconConfirmation PassIconWarning Warning
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)
Button RowIconWarning N/AIconConfirmation PassIconConfirmation Pass
    CardIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
    • IconCriticalOutermost div is interactive but has no focus styles or tabIndex.
    • IconCriticalComponent contains an interactive div or span with no associated role.
    Data Visualization / Data TableIconConfirmation PassIconCritical ViolationIconConfirmation Pass
    • IconCriticalRows cannot be selected using the keyboard.
    Data Visualization / LegendIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Dialogs / AlertIconConfirmation PassIconConfirmation PassIconWarning Warning
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Dialogs / ModalIconConfirmation PassIconConfirmation PassIconWarning Warning
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Forms / CheckboxIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Forms / Checkbox GroupIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Forms / Checkbox Parent GroupIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Forms / Creatable SelectIconCritical ViolationIconCritical ViolationIconConfirmation Pass
    • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
    • IconCriticalComponent contains an interactive div or span with no associated role.
    Forms / InputIconCritical ViolationIconConfirmation PassIconWarning Warnings
    • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
    • IconWarningARIA attribute element ID does not exist for aria-describedby (Storybook)
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Forms / RadioIconConfirmation PassIconConfirmation PassIconWarning Warning
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Forms / Radio GroupIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Forms / Search InputIconCritical ViolationIconConfirmation PassIconConfirmation Pass
    • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
    Forms / SelectIconCritical ViolationIconCritical ViolationIconWarning Warning
    • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
    • IconCriticalComponent contains an interactive div or span with no associated role.
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Forms / TextareaIconCritical ViolationIconConfirmation PassIconWarning Warning
    • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
    • IconWarningARIA attribute element ID does not exist for aria-describedby (Storybook)
    IconsIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Keyboard ShortcutIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    LinkIconConfirmation PassIconConfirmation PassIconWarning Warning
    • IconWarningCSS outline property is used unexpectedly. (Stylelint)
    Modules / Card GroupIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
    • IconCriticalComponent contains an interactive div or span with no associated role.
    • IconWarningaria-label attribute is not well supported on a div with no valid role attribute. (Storybook)
    Modules / Data CardIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
    • IconCriticalComponent contains an interactive div or span with no associated role.
    • IconWarningaria-label attribute is not well supported on a div with no valid role attribute. (Storybook)
    Modules / Bar ListIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Modules / HistogramIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Modules / Number ListIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Modules / Segmented BarIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Modules / ToggleIconConfirmation PassIconConfirmation PassIconConfirmation Pass
    Modules / Toggle ListIconWarning N/AIconConfirmation PassIconConfirmation Pass
      Notifications / NoteIconConfirmation PassIconConfirmation PassIconConfirmation Pass
      Notifications / NoticeIconConfirmation PassIconConfirmation PassIconConfirmation Pass
      Notifications / ToastIconConfirmation PassIconConfirmation PassIconConfirmation Pass
      Select MarkIconConfirmation PassIconConfirmation PassIconConfirmation Pass
      SpinnerIconConfirmation PassIconConfirmation PassIconConfirmation Pass
      TooltipIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
      • IconCriticalContent disappears if user attempts to mouseover the tooltip.
      • IconCriticalUser cannot use esc or another key to dismiss the tooltip.
      TypeIconConfirmation PassIconConfirmation PassIconConfirmation Pass

      Mobile Component Accessibility Status

      This table includes the results of the accessibility audit of our React Native (mobile) components. We do not currently automate any accessibility testing on our mobile components, but plan to add that in the future.

      Last updated September 30, 2022.

      ComponentVisualInteractiveAutomatedDetails
      AvatarsIconCritical ViolationsIconWarning WarningsIconWarning N/A
      • IconWarningWhen custom colors are used, they do not always result in a sufficient 4.5:1 color contrast ratio.
      • IconCriticalIncreased font size via user settings causes avatars with three characters to clip the last character.
      • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
      • IconWarningAvatars that do not contain text are missing the accessibilityLabel.
      ButtonIconConfirmation PassIconWarning WarningsIconWarning N/A
      • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
      • IconWarningIcon only buttons need an accessibilityLabel. This prop exists, but our documentation does not reflect that.
      CardIconConfirmation PassIconConfirmation PassIconWarning N/A
        Dialogs / AlertIconWarning WarningIconConfirmation PassIconWarning N/A
        • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
        Floating Action ButtonIconConfirmation PassIconWarning WarningIconWarning N/A
        • IconWarningIcon only buttons need an accessibilityLabel. This prop exists, but our documentation does not reflect that.
        Forms / CheckboxIconConfirmation PassIconCritical ViolationsIconWarning N/A
        • IconCriticalThe accessibilityState property needs to be used to show selection state.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / Checkbox GroupIconConfirmation PassIconWarning WarningIconWarning N/A
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / Lookup SelectIconCritical ViolationIconWarning WarningIconWarning N/A
        • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / InputIconCritical ViolationIconWarning WarningIconWarning N/A
        • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / RadioIconConfirmation PassIconCritical ViolationsIconWarning N/A
        • IconCriticalThe accessibilityState property needs to be used to show selection state.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / Radio GroupIconConfirmation PassIconWarning WarningIconWarning N/A
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / Search InputIconCritical ViolationIconWarning WarningIconWarning N/A
        • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / SelectIconCritical ViolationIconWarning WarningIconWarning N/A
        • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
        • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
        Forms / TextareaIconCritical ViolationIconConfirmation PassIconWarning N/A
        • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
        IconsIconConfirmation PassIconConfirmation PassIconWarning N/A
          Modules / Card GroupIconWarning WarningIconWarning WarningIconWarning N/A
          • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          Modules / Data CardIconWarning WarningIconWarning WarningIconWarning N/A
          • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          Modules / Bar ListIconWarning WarningsIconCritical ViolationIconWarning N/A
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          • IconWarningText is clipped if the user sets the system to a larger font size and a bar list item is at 100%.
          • IconCriticalThe accessibilityState property needs to be used to show selection state.
          Modules / HistogramIconWarning WarningIconCritical ViolationsIconWarning N/A
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
          • IconCriticalThe accessibilityState property needs to be used to show selection state.
          Modules / Number ListIconWarning WarningIconCritical ViolationIconWarning N/A
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          • IconCriticalThe accessibilityState property needs to be used to show selection state.
          Modules / Segmented BarIconWarning WarningsIconCritical ViolationIconWarning N/A
          • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
          • IconWarningText is clipped if the user sets the system to a larger font size.
          • IconCriticalThe accessibilityState property needs to be used to show selection state.
          Modules / ToggleIconConfirmation PassIconCritical ViolationsIconWarning N/A
          • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
          • IconCriticalThe accessibilityState property needs to be used to show selection state.
          Modules / Toggle ListIconWarning N/AIconConfirmation PassIconWarning N/A
            Notifications / NoteIconConfirmation PassIconConfirmation PassIconWarning N/A
              Notifications / NoticeIconConfirmation PassIconCritical ViolationsIconWarning N/A
              • IconCriticalThe accessibilityLabel prop should be used on the dismiss button since the icon contains no text.
              • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
              Notifications / ToastIconWarning WarningIconCritical ViolationsIconWarning N/A
              • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
              • IconCriticalThe accessibilityLabel prop should be used on the dismiss button since the icon contains no text.
              • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
              Select MarkIconWarning WarningIconCritical ViolationsIconWarning N/A
              • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
              • IconCriticalThe accessibilityState property needs to be used to show selection state.
              • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
              SpinnerIconWarning WarningIconConfirmation PassIconWarning N/A
              • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
              TypeIconConfirmation PassIconConfirmation PassIconWarning N/A