Lucid · Design systems & accessibility

Scaling accessible design

Making accessibility part of everyday design work through shared guidance, clear annotations, and a repeatable handoff process.

Key result

Published ARIA-label guidance and a refined design handoff checklist in Strata, with early reuse by designers.

Company: Lucid Software
My role: Product designer
Timeline: July–August 2024
Team: 1 product designer (me) · 1 lead design system designer · 1 UX researcher · 3 front-end engineers

My Contribution

I documented ARIA-label guidelines, co-led a workshop with designers and engineers, and helped refine the design handoff checklist. I also shared the work at the UX All-Hands meeting.

Design snapshot

Final design · Strata documentation

Specify each control’s purpose

Attach the intended accessible name to the exact control, so engineers can carry that intent into implementation.

Strata documentation showing accessible-name annotations for Lucid search and account controls — The handoff connects copy review with annotations in the design file.

A visible icon is not enough

A screen reader user needs to understand what a control does without relying on its appearance. An icon-only button without an accessible name can leave its purpose unclear, even when the visual design looks complete.

Lucid already had accessibility work underway, including document exports, color contrast, and keyboard navigation. My focus was a narrower gap: helping designers specify accessible names and carry them through to engineering.

Original diagram illustrating an icon button whose purpose is not conveyed to a screen reader — The issue is a missing accessible name; an aria-label is one way to provide it.

Turn principles into writing guidance

Designers needed to know which controls required an explicit label, what that label should say, and how to distinguish it from a tooltip. I brought those decisions into Strata with concrete examples from Lucid’s interface.

Explain the action in context

The documentation compares a tooltip with the accessible name for the same search control. It makes the difference visible in the design process, instead of leaving the intended wording implicit.

Original Strata guidance comparing the Search tooltip and Execute search accessible name — The search example shows the wording alongside the control it describes.

Keep labels specific and concise

The usage guidance pairs a direct action label with an unnecessarily wordy version. A concrete comparison gives designers a reference they can reuse when writing labels for other controls.

Strata usage guidance comparing Play video with an unnecessarily long label — Name the action clearly; avoid words that add no useful meaning.

Current naming principle: use visible text and native HTML labeling where possible; use aria-label when an appropriate visible name is unavailable. W3C naming guidance.

Carry intent into implementation

Documentation was only part of the workflow. The handoff guidance also asks designers to review label copy and use the Note component to attach approved wording to the relevant controls. That makes the design file a clearer reference for engineers.

Refine the process together

I co-led a workshop with UX designers and engineers to discuss accessible components in handoff. We used the working checklist as a shared surface for feedback, then refined it for Strata.

Workshop board with a draft design handoff checklist and designer and engineer feedback — The working board captures discussion around the checklist and the information engineers need.

Put accessibility in the checklist

The final checklist brings ARIA-label review alongside component consistency, contrast, responsive behavior, stakeholder review, and checking the implementation. Accessibility becomes part of the same handoff routine as the rest of the design.

Full Strata front-end UI design handoff checklist covering consistency, accessibility, copy, responsiveness and stakeholder review — Select the checklist to read it at full size.

From documentation to reuse

The guidance and refined checklist went live in Strata. The original project materials record designers beginning to use them, including a colleague asking to start using the checklist with their team.

Internal feedback: Thanks, Carleen! The ARIA-label component is super helpful—added it to my design file! — Colleagues began using the checklist in their work.

Slack exchange in which a colleague asks to start using the handoff checklist with their team — A request to use the checklist with another team.

Share the practice beyond the project

I presented the work during UX All-Hands, connecting the new guidance with the handoff process. The project’s contribution was a reusable way for designers and engineers to make accessibility requirements explicit.

UX All-Hands presentation showing the Strata handoff guidance and annotations — Sharing the documentation and handoff workflow with the wider UX team.