Accessibility Review

[spaceninja]

Now that we have Storybook, there's a really useful task that just about anyone can do to help the project: run an accessibility audit. It's easier than it sounds. Here's how:

From the pattern library site, review each component example. Make sure you're in "Canvas" view, and you should see the Accessibility review toolbar at the bottom of your screen. Create a new github issue for each accessibility problem you find.

For example, here's a screenshot of the Feature List component. You can see that there's a contrast issue with the text on the green button. You can create a new issue, something like this:

Feature List Component: Contrast Issue

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

Elements must have sufficient color contrast

.label-success: Serious: Element has insufficient color contrast of 2.36 (foreground color: #0caf8b, background color: #b9ff8d, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1

.label-warning: Serious: Element has insufficient color contrast of 1.72 (foreground color: #ff9600, background color: #ffe466, font size: 7.5pt (10px), font weight: normal). Expected contrast ratio of 4.5:1

Then add the "a11y" label to the issue.

(In this case, the problem is actually in the Button component, but I don't expect the person who does this audit to track down the source of every problem. Just create issues for each problem you find, and someone else can take care of finding the source of the problem)

The definition of done for this issue is when the audit has reviewed all the components and creates issues for all the problems found.