SPECTRUM • ACCESSIBILITY & DESIGN SYSTEMS
Accessibility Annotation
Enhancement
Accessibility Annotation
Enhancement
Accessibility Annotation
Enhancement
Accessibility Annotation
Enhancement
Helping accessibility engineers (like myself) at Spectrum deliver clearer feedback, with more flexible annotation components and a more efficient design-review workflow.
Helping accessibility engineers (like myself) at Spectrum deliver clearer feedback, with more flexible annotation components and a more efficient design-review workflow.
CONTRIBUTION
Product Design & Research / Enhancement refinements
TOOLS
Figma
TIMELINE
January - February 2025
FIRST RELEASE
Q1 2025
Component design by Rachel Lewis • Enhancement refinements by Anjali Verma
The enhanced annotation family supports design changes, recommendations, resolved issues, and accessibility approval.
TLDR
TLDR
TLDR
01 / OVERVIEW
The challenge
The challenge
The challenge
Accessibility annotation components help accessibility consultants leave feedback directly on design work when it comes through. They help us accessibility consultants meet designers where they are at, which is on the canvas, in Figma. The existing components were inflexible and time-consuming to customize, slowing reviews and creating confusion across product teams.
Accessibility annotation components help accessibility consultants leave feedback directly on design work when it comes through. They help us accessibility consultants meet designers where they are at, which is on the canvas, in Figma. The existing components were inflexible and time-consuming to customize, slowing reviews and creating confusion across product teams.
THE OPPORTUNITY
Make feedback clearer. Make annotation easier.
Make feedback clearer. Make annotation easier.
Make feedback clearer. Make annotation easier.
Refresh the existing components so accessibility consultants can provide concrete feedback more efficiently—and help teams build more accessible products.
Refresh the existing components so accessibility consultants can provide concrete feedback more efficiently—and help teams build more accessible products.
OUTCOME
Shared across teams
Shared across teams
Shared across teams
Utilized by 10+ product teams to support clearer development handoff and integrated into the shared design system workflow.
Utilized by 10+ product teams to support clearer development handoff and integrated into the shared design system workflow.
02 / UNDERSTAND
What were we working with?
What were we working with?
What were we working with?
The existing MVP included Design Changes Needed, Technical A11y Annotations, and Accessibility Approved components. Their purpose was to reduce miscommunication, make feedback visible, and support an efficient workflow between teams.
The existing MVP included Design Changes Needed, Technical A11y Annotations, and Accessibility Approved components. Their purpose was to reduce miscommunication, make feedback visible, and support an efficient workflow between teams.
Original MVP: design feedback, technical annotations, and approval lived alongside one another.
UNDERSTAND
The current workflow
The current workflow
The current workflow
A review moved between product teams, accessibility engineers, and designers. Annotation components were the connective tissue between identifying an issue and approving a design.
A review moved between product teams, accessibility engineers, and designers. Annotation components were the connective tissue between identifying an issue and approving a design.
01
Assign the review
Assign the review
Product teams assign Jira tickets to accessibility engineers.
02
Review & annotate
Review & annotate
Engineers understand the flow and mark up designs where changes are needed.
03
Update & approve
Update & approve
Designers and product teams review the feedback, update the work, and receive accessibility approval.
UNDERSTAND
Three sources of friction
Three sources of friction
Three sources of friction
The enhancement space centered on flexibility, clarity, and consistency—not adding a broader set of unrelated capabilities.
The enhancement space centered on flexibility, clarity, and consistency—not adding a broader set of unrelated capabilities.
01 / PAIN POINT
Customization was difficult
Customization was difficult
Components did not behave as expected during customization. Reviews took longer, and designers and product teams faced inconsistent feedback.
Components did not behave as expected during customization. Reviews took longer, and designers and product teams faced inconsistent feedback.
02 / PAIN POINT
Too many overlapping components
Too many overlapping components
Technical accessibility annotations needed to be separate. The number of components made it unclear which one to use.
Technical accessibility annotations needed to be separate. The number of components made it unclear which one to use.
03 / PAIN POINT
Markers were not adaptable
Markers were not adaptable
Markers required manual changes and only allowed marking from the left, limiting where feedback could be placed.
Markers required manual changes and only allowed marking from the left, limiting where feedback could be placed.
Left-side only → Manual adjustment
Left-side only → Manual adjustment
The opportunity: place feedback closer to the point of conflict.
The opportunity: place feedback closer to the point of conflict.
03 / DEFINE
How might we update and enhance existing MVP accessibility annotation components so that accessibility engineers can provide feedback more efficiently to product teams?
How might we update and enhance existing MVP accessibility annotation components so that accessibility engineers can provide feedback more efficiently to product teams?
How might we update and enhance existing MVP accessibility annotation components so that accessibility engineers can provide feedback more efficiently to product teams?
Goals
Goals
• Improve accessibility team efficiency
• Improve accessibility team efficiency
• Increase understanding among designers and stakeholders
• Increase understanding among designers and stakeholders
• Create cohesive, consistent, adaptable components
• Create cohesive, consistent, adaptable components
Non-goals
Non-goals
• Broaden the project scope
• Broaden the project scope
• Create differing sources of truth
• Create differing sources of truth
04 / DESIGN
Three focused changes
Three focused changes
Three focused changes
The refinements aimed to make annotation components easier to choose, easier to customize, and easier to use without breaking their structure.
The refinements aimed to make annotation components easier to choose, easier to customize, and easier to use without breaking their structure.
01 / COMPONENT REFINEMENT
Limit components to what we need
Limit components to what we need
Limit components to what we need
Narrowing the set of components could improve efficiency and understanding across product teams.
Narrowing the set of components could improve efficiency and understanding across product teams.
Design Changes Needed
Accessibility Approved
Customizable Annotations
A11y Changes Resolved
Future A11y Changes Recommended
Technical A11y Annotations (separate)
02 / COMPONENT REFINEMENT
Allow for more customization
Allow for more customization
Allow for more customization
Place annotations closer to the point of conflict so accessibility changes are easier for designers to interpret.
Place annotations closer to the point of conflict so accessibility changes are easier for designers to interpret.
Left-side annotations
Right-side annotations
Floating annotations
03 / COMPONENT REFINEMENT
Discourage breaking components
Discourage breaking components
Discourage breaking components
Make adjustments within the component structure, reducing friction when adding or removing feedback.
Make adjustments within the component structure, reducing friction when adding or removing feedback.
Toggle annotations from the component menu
Write and edit annotation text
Change headers easily
DESIGN
The final enhanced product
The final enhanced product
The final enhanced product
The finalized components include additional annotations, a working-draft state, and editable ticket and date text. Customizable features stay within the component structure.
The finalized components include additional annotations, a working-draft state, and editable ticket and date text. Customizable features stay within the component structure.
Five statuses: Design Changes Needed • A11y Design Recommendations • Future A11y Design Change Recommendations • A11y Changes Resolved • Accessibility Approved
DESIGN
From feedback to approval
From feedback to approval
From feedback to approval
The review workflow connects annotated feedback, design updates, and accessibility approval. These screenshots show the components in context.
The review workflow connects annotated feedback, design updates, and accessibility approval. These screenshots show the components in context.
01 / Annotating a review
01 / Annotating a review
Screen a design for accessibility and leave feedback using the enhanced annotation components.
Screen a design for accessibility and leave feedback using the enhanced annotation components.
02 / Closing the loop
02 / Closing the loop
Designers update screens based on the feedback; an Accessibility Approved annotation completes the review.
Designers update screens based on the feedback; an Accessibility Approved annotation completes the review.
05 / WRAP-UP
Measuring success
Measuring success
Measuring success
The presentation reports adoption across product teams and improvements in communication and handoff.
The presentation reports adoption across product teams and improvements in communication and handoff.
10+
10+
10+
10+
product teams
product teams
• Integrated into the shared design system workflow
• Integrated into the shared design system workflow
• Enhanced communication with QA testing teams
• Enhanced communication with QA testing teams
• Improved clarity in designer → developer handoff
• Improved clarity in designer → developer handoff
• Reduced need for post-development accessibility retrofits
• Reduced need for post-development accessibility retrofits
• Increased understanding and visibility into web accessibility requirements
• Increased understanding and visibility into web accessibility requirements
ONGOING ENHANCEMENTS
Building on the first release
Building on the first release
Building on the first release
Following the Q1 2025 release, the components continued to evolve with additional features.
Following the Q1 2025 release, the components continued to evolve with additional features.
Common-issue variants
Common-issue variants
Variants featuring the most commonly found accessibility issues.
Variants featuring the most commonly found accessibility issues.
Troubleshooting suggestions
Troubleshooting suggestions
Guidance to help teams understand and resolve the issue.
Guidance to help teams understand and resolve the issue.
WCAG references
WCAG references
Direct links to guidelines with the specific requirement in violation.
Direct links to guidelines with the specific requirement in violation.
REFLECTION
What I learned
What I learned
What I learned
Being an accessibility design consultant, I never want to get in designer’s ways, I do not want to slow down timelines or block features, I want the best experience for all customers. By enhancing our accessibility annotation components, our feedback can more quickly and easily be translated to designers and developers, improving understanding on both sides and improving the customer experience overall. :)
Being an accessibility design consultant, I never want to get in designer’s ways, I do not want to slow down timelines or block features, I want the best experience for all customers. By enhancing our accessibility annotation components, our feedback can more quickly and easily be translated to designers and developers, improving understanding on both sides and improving the customer experience overall. :)
Elsewhere
Say hello
Fueled by homemade chai and dark chocolate star cookies.
© 2026 / Portfolio