Accessibility
Canvas applications built for everyone, WCAG 2.2 AA compliant with comprehensive screen reader support, keyboard navigation, and adaptive interfaces.
Key features
Key features
Key features
Key features
Screen reader support
Build canvas apps that are compatible with screen readers. Announcements include selections, tool changes, or canvas operations, all with meaningful context about selected shapes.
Screen reader support
Build canvas apps that are compatible with screen readers. Announcements include selections, tool changes, or canvas operations, all with meaningful context about selected shapes.
Screen reader support
Build canvas apps that are compatible with screen readers. Announcements include selections, tool changes, or canvas operations, all with meaningful context about selected shapes.
Screen reader support
Build canvas apps that are compatible with screen readers. Announcements include selections, tool changes, or canvas operations, all with meaningful context about selected shapes.
Keyboard navigation
Full keyboard accessibility throughout toolbars, menus, and canvas interactions with customizable shortcuts. With tldraw, users can use the canvas without touching the mouse.
Keyboard navigation
Full keyboard accessibility throughout toolbars, menus, and canvas interactions with customizable shortcuts. With tldraw, users can use the canvas without touching the mouse.
Keyboard navigation
Full keyboard accessibility throughout toolbars, menus, and canvas interactions with customizable shortcuts. With tldraw, users can use the canvas without touching the mouse.
Keyboard navigation
Full keyboard accessibility throughout toolbars, menus, and canvas interactions with customizable shortcuts. With tldraw, users can use the canvas without touching the mouse.
Focus management
Focus follows a logical read order with clear indicators and skip-to-content. In addition, tldraw also supports powerful directional navigation (up, down, left, right) that enhances movement and restores focus after modal interactions.
Focus management
Focus follows a logical read order with clear indicators and skip-to-content. In addition, tldraw also supports powerful directional navigation (up, down, left, right) that enhances movement and restores focus after modal interactions.
Focus management
Focus follows a logical read order with clear indicators and skip-to-content. In addition, tldraw also supports powerful directional navigation (up, down, left, right) that enhances movement and restores focus after modal interactions.
Focus management
Focus follows a logical read order with clear indicators and skip-to-content. In addition, tldraw also supports powerful directional navigation (up, down, left, right) that enhances movement and restores focus after modal interactions.
WCAG 2.2 AA compliant
The tldraw SDK meets modern accessibility standards, ensuring inclusive interactions and usability for people with diverse abilities.
WCAG 2.2 AA compliant
The tldraw SDK meets modern accessibility standards, ensuring inclusive interactions and usability for people with diverse abilities.
WCAG 2.2 AA compliant
The tldraw SDK meets modern accessibility standards, ensuring inclusive interactions and usability for people with diverse abilities.
WCAG 2.2 AA compliant
The tldraw SDK meets modern accessibility standards, ensuring inclusive interactions and usability for people with diverse abilities.
Motion preferences
Visual feedback is customizable in tldraw. System-level reduced motion settings enable simplified transitions instead of complex animations.
Motion preferences
Visual feedback is customizable in tldraw. System-level reduced motion settings enable simplified transitions instead of complex animations.
Motion preferences
Visual feedback is customizable in tldraw. System-level reduced motion settings enable simplified transitions instead of complex animations.
Motion preferences
Visual feedback is customizable in tldraw. System-level reduced motion settings enable simplified transitions instead of complex animations.
ARIA integration
Build accessible interfaces with comprehensive ARIA labels, roles, and live regions that work seamlessly with assistive technologies.
ARIA integration
Build accessible interfaces with comprehensive ARIA labels, roles, and live regions that work seamlessly with assistive technologies.
ARIA integration
Build accessible interfaces with comprehensive ARIA labels, roles, and live regions that work seamlessly with assistive technologies.
ARIA integration
Build accessible interfaces with comprehensive ARIA labels, roles, and live regions that work seamlessly with assistive technologies.
A canvas friendly to everybody
Your users deserve applications that work for everyone. Build canvas tools with professional-grade accessibility features that meet modern standards.
A canvas friendly to everybody
Your users deserve applications that work for everyone. Build canvas tools with professional-grade accessibility features that meet modern standards.
A canvas friendly to everybody
Your users deserve applications that work for everyone. Build canvas tools with professional-grade accessibility features that meet modern standards.
A canvas friendly to everybody
Your users deserve applications that work for everyone. Build canvas tools with professional-grade accessibility features that meet modern standards.
Engineering details
Engineering details
Engineering details
Engineering details
Shape selection announcement engine
The engine translates visual selections on the canvas into clear, descriptive text for assistive technologies. The result is feedback that mirrors the visual experience: whether someone selects a single shape or edits a group, the system provides meaningful descriptions that help everyone stay connected to the canvas.
Shape selection announcement engine
The engine translates visual selections on the canvas into clear, descriptive text for assistive technologies. The result is feedback that mirrors the visual experience: whether someone selects a single shape or edits a group, the system provides meaningful descriptions that help everyone stay connected to the canvas.
Shape selection announcement engine
The engine translates visual selections on the canvas into clear, descriptive text for assistive technologies. The result is feedback that mirrors the visual experience: whether someone selects a single shape or edits a group, the system provides meaningful descriptions that help everyone stay connected to the canvas.
Shape selection announcement engine
The engine translates visual selections on the canvas into clear, descriptive text for assistive technologies. The result is feedback that mirrors the visual experience: whether someone selects a single shape or edits a group, the system provides meaningful descriptions that help everyone stay connected to the canvas.
UI accessibility configuration
The tldraw UI includes built-in accessibility configuration options that can be customized to meet user needs. This includes the ability to turn on accessible labels for toolbar buttons, configure visual focus indicators, and adjust interface elements for better compatibility with assistive technologies. These configuration options provide flexibility for developers to create more accessible canvas applications out of the box.
UI accessibility configuration
The tldraw UI includes built-in accessibility configuration options that can be customized to meet user needs. This includes the ability to turn on accessible labels for toolbar buttons, configure visual focus indicators, and adjust interface elements for better compatibility with assistive technologies. These configuration options provide flexibility for developers to create more accessible canvas applications out of the box.
UI accessibility configuration
The tldraw UI includes built-in accessibility configuration options that can be customized to meet user needs. This includes the ability to turn on accessible labels for toolbar buttons, configure visual focus indicators, and adjust interface elements for better compatibility with assistive technologies. These configuration options provide flexibility for developers to create more accessible canvas applications out of the box.
UI accessibility configuration
The tldraw UI includes built-in accessibility configuration options that can be customized to meet user needs. This includes the ability to turn on accessible labels for toolbar buttons, configure visual focus indicators, and adjust interface elements for better compatibility with assistive technologies. These configuration options provide flexibility for developers to create more accessible canvas applications out of the box.
Keyboard navigation state machine
tldraw canvas is fully operable through the keyboard. A state machine directs key input based on what the user is doing (navigating menus, editing shapes, or typing text) and keystrokes behave consistently. It also manages focus order and resolves conflicts between shortcuts automatically. The end result is a reliable, intuitive keyboard workflow that supports both power users and people who navigate without a mouse.
Keyboard navigation state machine
tldraw canvas is fully operable through the keyboard. A state machine directs key input based on what the user is doing (navigating menus, editing shapes, or typing text) and keystrokes behave consistently. It also manages focus order and resolves conflicts between shortcuts automatically. The end result is a reliable, intuitive keyboard workflow that supports both power users and people who navigate without a mouse.
Keyboard navigation state machine
tldraw canvas is fully operable through the keyboard. A state machine directs key input based on what the user is doing (navigating menus, editing shapes, or typing text) and keystrokes behave consistently. It also manages focus order and resolves conflicts between shortcuts automatically. The end result is a reliable, intuitive keyboard workflow that supports both power users and people who navigate without a mouse.
Keyboard navigation state machine
tldraw canvas is fully operable through the keyboard. A state machine directs key input based on what the user is doing (navigating menus, editing shapes, or typing text) and keystrokes behave consistently. It also manages focus order and resolves conflicts between shortcuts automatically. The end result is a reliable, intuitive keyboard workflow that supports both power users and people who navigate without a mouse.
Focus restoration and navigation aids
This system helps users stay oriented as they move around the interface. It remembers where focus was before a modal, dialog, or navigation change, and restores it intelligently afterward. On top of that, it provides a skip link so users can jump quickly to important areas without tabbing through every control. Together, these aids make navigation faster, smoother, and more accessible for keyboard and screen reader users alike.
Focus restoration and navigation aids
This system helps users stay oriented as they move around the interface. It remembers where focus was before a modal, dialog, or navigation change, and restores it intelligently afterward. On top of that, it provides a skip link so users can jump quickly to important areas without tabbing through every control. Together, these aids make navigation faster, smoother, and more accessible for keyboard and screen reader users alike.
Focus restoration and navigation aids
This system helps users stay oriented as they move around the interface. It remembers where focus was before a modal, dialog, or navigation change, and restores it intelligently afterward. On top of that, it provides a skip link so users can jump quickly to important areas without tabbing through every control. Together, these aids make navigation faster, smoother, and more accessible for keyboard and screen reader users alike.
Focus restoration and navigation aids
This system helps users stay oriented as they move around the interface. It remembers where focus was before a modal, dialog, or navigation change, and restores it intelligently afterward. On top of that, it provides a skip link so users can jump quickly to important areas without tabbing through every control. Together, these aids make navigation faster, smoother, and more accessible for keyboard and screen reader users alike.
Provider-based architecture
The accessibility system uses React context to establish centralized state management at the application root. This provider pattern distributes accessibility features throughout the component tree without prop drilling. It integrates with tldraw's reactive state system for automatic updates.
Provider-based architecture
The accessibility system uses React context to establish centralized state management at the application root. This provider pattern distributes accessibility features throughout the component tree without prop drilling. It integrates with tldraw's reactive state system for automatic updates.
Provider-based architecture
The accessibility system uses React context to establish centralized state management at the application root. This provider pattern distributes accessibility features throughout the component tree without prop drilling. It integrates with tldraw's reactive state system for automatic updates.
Provider-based architecture
The accessibility system uses React context to establish centralized state management at the application root. This provider pattern distributes accessibility features throughout the component tree without prop drilling. It integrates with tldraw's reactive state system for automatic updates.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Agent starter kit
Give your AI agents visual superpowers. Allow them to read drawings, generate diagrams, and interact with canvas elements just like human users. You handle the AI integration, tldraw handles the complex canvas interactions, shape recognition, and visual rendering.
Examples
Examples
Examples
Examples
Built to include
Templates for common canvas use cases. Skip months of setup with ready-made applications.
Built to include
Templates for common canvas use cases. Skip months of setup with ready-made applications.
Built to include
Templates for common canvas use cases. Skip months of setup with ready-made applications.
Built to include
Templates for common canvas use cases. Skip months of setup with ready-made applications.
© 2025 tldraw