A presentation at a11yTO Conf 2026 in in Toronto, ON, Canada by Karen Hawkins
Optimizing Machine Readability of Accessibility in Design Files a11yTO Conference 2026 October 22, 2026
Meet Karen Hawkins Karen Hawkins, CPACC Connect with me Principal of Accessible Design Email and LinkedIn Copyright © Level Access. All Rights Reserved. 2
Who do we have in the room? ▪ Designers? ▪ Developers? ▪ Authors? ▪ Quality assurance? ▪ Product managers? ▪ Accessibility program managers? ▪ Other? Copyright © Level Access. All Rights Reserved. 3
Today’s focus Copyright © Level Access. All Rights Reserved. in to optimize 4
Disclaimer I don’t know everything about AI. Copyright © Level Access. All Rights Reserved. 6
Design systems have 3 vital elements Designs Copyright © Level Access. All Rights Reserved. Code Documentation 7
Old-school accessibility documentation Copyright © Level Access. All Rights Reserved.
More recent accessibility documentation Reference: CVS Health Wb Accessibility Annotation Kit Copyright © Level Access. All Rights Reserved. 9
Reality is more complex Designs + documentation Copyright © Level Access. All Rights Reserved. Code + documentation 10
Famous reference sites, but how do they do on accessibility? References: IBM Carbon Design System Button Documentation and Material Design Button Documentation Copyright © Level Access. All Rights Reserved. 11
Goal has always been parity between design and code Design Copyright © Level Access. All Rights Reserved. Code 12
Human and bot jobs Humans make the design decisions and create instructions. Copyright © Level Access. All Rights Reserved. Agents look decisions up and follow instructions. 13
Lack of context leads to drift Issues ▪ Fabricate values ▪ Have no cross-session memory ▪ Compounded in-session drift Design File Solutions ▪ Descriptions ▪ Annotations Copyright © Level Access. All Rights Reserved. 14
Descriptions Reference: Southleft Demo Design System - Eventz Copyright © Level Access. All Rights Reserved. 15
Annotations Copyright © Level Access. All Rights Reserved. 16
When to use each? Feature Description Annotations Where it lives Main component metadata (right sidebar / assets panel) Attached to specific layers / elements on the canvas Audience Users browsing the library for the right component Users building a specific screen or flow Scope Applies to the entire component everywhere it is used Applies to a specific instance, screen, or state in context Best used for Intended use case / purpose, variant and state guidelines, do’s and don’ts, content and layout rules, basic accessibility notes, and external documentation links Interactions, edge cases, detailed accessibility notes, and code behavior Also consider which MCP you use - Figma MCP? Console MCP? Reference: Southleft Console MCP Copyright © Level Access. All Rights Reserved. 17
Questions to ask: Is it covered by dev mode specs? Does it apply to the whole element or an instance? Is it general or detailed? Copyright © Level Access. All Rights Reserved. 18
Designer accessibility documentation categories ▪ Role ▪ Feedback ▪ Label / name ▪ Focus management ▪ Color and contrast rules ▪ Timing requirements ▪ Target sizes ▪ How to cancel / abort ▪ Transformation rules ▪ Optimizing navigation (i.e., ▪ Keyboard interactions ▪ Screen reader interactions ▪ Touch interactions ▪ Voice control interactions ▪ Element behavior ▪ Reading order / focus order landmarks, skip links, etc.) ▪ Content uniqueness and differentiation ▪ Alternative text and lengthy descriptions ▪ Known discrepancies ▪ Known exceptions ▪ Heading hierarchy Copyright © Level Access. All Rights Reserved. 19
These are the details that are almost always skipped in design system documentation, but they’re exactly what AI needs to make nearly deterministic decisions instead of probabilistic guesses. TJ Pitre Founder, Southleft Copyright © Level Access. All Rights Reserved. 20
From Implicit To Explicit Copyright © Level Access. All Rights Reserved. 21
Design systems tend to be structured according to atomic design Sub-atomic particles Tokens Atoms Molecules Components Organisms Templates Pages Patterns Templates Pages Reference: Atomic Design Copyright © Level Access. All Rights Reserved. 22
Design system levels have different accessibility requirements Design System Level Notable Accessibility Considerations Styles Set up your tokens to account for potential accessibility application Components Maximize permutations and interactivity Patterns Higher order thinking like reading order, focus management, and feedback Page templates Additional navigational paradigms like skip links and landmarks Pages Focus on readable and understandable content Copyright © Level Access. All Rights Reserved. 23
Style accessibility Set up your tokens to account for potential accessibility application Copyright © Level Access. All Rights Reserved. 24
Component accessibility Focus on foundational aspects: ▪ States ▪ Variations ▪ Zoom / magnification ▪ Keyboard interactions ▪ Screen reader interactions ▪ Touch interactions ▪ Voice control interactions ▪ Etc. Copyright © Level Access. All Rights Reserved. 25
Pattern accessibility Focus on higher order thinking: ▪ Reading order / focus order ▪ Feedback ▪ Focus management ▪ Skip links ▪ Interdependencies between multiple components ▪ Etc. Copyright © Level Access. All Rights Reserved. 26
Page template accessibility Focus on additional navigational paradigms: ▪ Skip links ▪ Landmarks ▪ Additional navigational and orientation support ▪ Etc. Copyright © Level Access. All Rights Reserved. 27
Page accessibility Focus on the content: ▪ Page titles ▪ Page / site / section language ▪ Plain language ▪ Content uniqueness and differentiation ▪ Alternative text ▪ Media (audio, video, images, etc.) ▪ Etc. Copyright © Level Access. All Rights Reserved. 28
There’s a new parity in town Design Copyright © Level Access. All Rights Reserved. Markdown Files Code 29
Enterprise example Markdown files in atomic design structure Atoms Molecules Organisms Reference: Expose your design system to LLMs Copyright © Level Access. All Rights Reserved. 30
Enterprise example Atlassian’s tiered file structure Tier Files What it covers Foundations + tokens 19 Color, typography, spacing, radius, elevation, motion, z-index, iconography, accessibility, and the master map of every CSS variable Components (atoms, molecules, organisms) 38 Button, input, avatar, tabs, dropdown-menu, modal-dialog, form, table, navigation, content-panel Patterns 7 Canvas-content-flow, three-column-layout, panel-expand-collapse, responsive-grid, form-layout Reference: Expose your design system to LLMs Copyright © Level Access. All Rights Reserved. 31
AI-ready design systems ▪ Closed token layer the LLM picks from Solves the fabrication problem ▪ Spec files the LLM reads every session Solves the memory problem ▪ An audit script that catches what the LLM gets wrong Solves the drift problem ▪ Drift detection for upstream design system updates Solves the stale-priors problem Reference: Expose your design system to LLMs Copyright © Level Access. All Rights Reserved. 32
AI output is unreliable because of tiny inconsistencies compounding over time. It’s decisions made but not documented, hard-coded values never cleaned up, relying too much on AI to “get” it right. Treat design decisions as infrastructure. Every time we make an important decision, it must find a path into a shared skill that is then consumed by AI. Vitaly Friedman Founder, Smashing Magazine Copyright © Level Access. All Rights Reserved. 33
Questions? Copyright © Level Access. All Rights Reserved. 35
Let’s stay in touch!
AI tools are increasingly consuming design files, but accessibility requirements are often scattered, inconsistent, or undocumented. Discover practical techniques for documenting accessibility requirements in design files in ways that improve machine readability and support AI-assisted workflows.
for free. You
can too.