Behind the scenes of creating a new Web Accessibility Annotation Kit | by Jan Maarten | CVS Health Tech Blog | Nov, 2023 – Beragampengetahuan

We released our new kit to a half-dozen internal teams and collected data for the next four weeks. Our stress testing included running co-design sessions, training people on how to use the kit, and trying to use the kit to annotate complex design system patterns. This gave us insight into where it fell short, where our assumptions were wrong, and how to improve it.

Outline styles added more confusion than clarity

We thought distinct outline styles for each stamp type would help differentiate one type from another and help not have to rely on color alone. In practice, there was no real benefit. When complex components required multiple outlines inside or adjacent to one another, this became visually overwhelming, and it was harder to differentiate them from each other. We updated all outline styles to use a uniform dash style.

People rarely used the heading level interface

Most of our accessibility designers preferred to edit heading levels on the stamp itself rather than use the component property drop-down. Since the scope of many design features is for components or small parts of a page, a heading level selector is too restrictive. Designations such h^n or h+1 might be used to indicate that the heading level should be one level deeper than whatever heading level precedes it. We replaced this selector with an open text property, leaving the heading level to the user’s preference.

Heading stamps had poor cognitive accessibility

Colleagues with ADHD or dyslexia found it difficult to discern the level of a heading stamp. Even though each level had dots on the left to help with this, the primary visual differentiation between levels came from the number itself. We addressed this by making the “h” lower case and adding subtle spacing around it, which helped the number stand out.

Size doesn’t matter (and makes other issues worse)

Drawing from WCAG Success Criteria 2.5.5: Target Size, we set stamp height to 44 pixels. The assumption that a component on a Figma canvas could or should be a ‘touch target’ caused more problems than it solved.

Placing a lot of large stamps on a complex design can result in overlap and quickly become hard to read, diminishing the kit’s usefulness. And given the ease of zooming in on the canvas, it was just as easy to achieve ‘touch target size’ that way if needed. To give things a bit more room to breathe, we reduced stamp height to 32px.