Optimizing Machine Readability of Accessibility in Design Files

Optimizing Machine Readability of Accessibility in Design Files a11yTO Conference 2026 October 22, 2026

Learn key best practices for structuring design files to improve machine readability and AI interpretation. Learning objectives
Learn why AI-assisted design workflows require accessibility information to be structured for machine consumption, not just human interpretation. 3. Learn which accessibility requirements should be documented directly within design artifacts and where that information should reside to optimize machine readability. Copyright © Level Access. All Rights Reserved. 5

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

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

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

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

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

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

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

Be explicit. Summary ▪ Treat design decisions as infrastructure. ▪ Provide a consumable path for AI.
Document according to your structure ▪ ▪ Copyright © Level Access. All Rights Reserved. Descriptions vs annotations: ❑ Descriptions for basic accessibility notes on elements to be used everywhere ❑ Annotations for detailed accessibility notes on specific instances Consider atomic design or another version of parent-child nesting 34

Let’s stay in touch!

Optimizing Machine Readability of Accessibility in Design Files

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36