Accessibility Testing with Axe
We use @axe-core/playwright to identify and address accessibility issues in our components. Automated tools still struggle with gradients and color contrast, so we use these tests as a starting point to identify potential issues. We then review the results and make necessary adjustments to ensure our components meet accessibility standards.
Accessibility is an ongoing effort, and we continuously work to improve our components based on these test results as well as user feedback. Remember, just because something is accessible in automated tests doesn’t mean it’s fully accessible in all real-world scenarios.
These are automated tests that run against our sticker sheets, which are the visual representations of our components. The results are categorized into three groups: Passes, Incomplete, and Violations. Below are the detailed results for each component tested.
Button Bars
Passes: 29
Incomplete: 0
Violations: 0
Buttons Standard
Passes: 33
Incomplete: 0
Violations: 0
Checkboxes
Passes: 31
Incomplete: 0
Violations: 0
Expandables
Passes: 29
Incomplete: 0
Violations: 0
Footers
Passes: 30
Incomplete: 0
Violations: 0
Headers
Passes: 29
Incomplete: 0
Violations: 0
Links
Passes: 29
Incomplete: 0
Violations: 0
Panel Menus
Passes: 29
Incomplete: 1
color-contrast
Violations: 0
Panels
Passes: 27
Incomplete: 0
Violations: 0
Popovers
Passes: 29
Incomplete: 0
Violations: 0
Radio Buttons
Passes: 32
Incomplete: 0
Violations: 0
Text Inputs
Passes: 32
Incomplete: 0
Violations: 0
Tooltips
Passes: 34
Incomplete: 0
Violations: 0