Open code, practice, and notes →
Download source with English comments · for reading
Canvas 2D · 22 Accessible Canvas Controls
Series contents · Technology map
Stage: Accessibility, Particles, and Performance Verification · Editable example · Storage ID: canvas-2d-step-22
Goals and learning outcomes
- Selection, movement, and deletion are possible using only the keyboard.
- Convey selection state through text as well as color.
Prerequisites
Prerequisite concepts: Observation Target, Resolution Budget. Prepare the result files and observation records from Unit 21.
Key concepts and explanations
Alternative Representation
Canvas pixels contain no shape semantics. Provide an HTML list and descriptions so selection targets and state can be read.
Shared Commands
When pointer and keyboard inputs call the same command functions, their results match. Update text state as well as visually highlighting selection.
Practice setup
First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-22.js and index.html in the external practice project. Add an HTML button list for shapes and an output for selection state.
- Connect button clicks and arrow-key movement to selectItem and moveItem.
- Save the output with the input condition pointer, then run again with keyboard only. Expected: The same id is selected, and the same movement commands are applied. Compare this with the actual screen and logs, and record the actual results and reasons for differences in day-22-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Input Method | pointer | keyboard only | The same id is selected, and the same movement commands are applied |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Selection, movement, and deletion are possible using only the keyboard.
- Convey selection state through text as well as color.
Self-check
- Does an aria-label on canvas alone describe individual shapes?
- How frequently should repeated position announcements be delivered?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: High Resolution and Responsive Layout · Next: Exporting and Source Data