When to use this workflow
Use this resource to organize a focused accessibility review of a running flow. Identify the intended accessibility target and the environments you can actually test. Automated checks, screenshots, keyboard testing, and assistive-technology testing provide different evidence; record which were performed.
A worked example
For a form exercise, navigate without a mouse, check the focus sequence, identify each field’s label, submit invalid data, and inspect how errors are communicated. Then correct the input and complete the task. Review contrast in the actual states and surfaces, including focus and error treatment, rather than only in the palette.
Decisions and common mistakes
When reporting a finding, describe the barrier and how to reproduce it. A missing label is a different issue from unclear instructions, even if both affect the same input. Do not infer screen-reader behavior from visual appearance alone or claim conformance because one automated scan found no issues.
What to hand off
Retest the corrected behavior with the relevant method and record remaining coverage gaps. Include keyboard and assistive-technology review where required for the intended target. Keep labels, semantics, and interaction behavior in the component contract so future screens inherit the improvement.
Set up and try the skill
1. Start with one concrete task
Bring: A running flow, expected keyboard order, and the applicable accessibility target.
First task: Navigate without a mouse, inspect labels and semantics, then check contrast and error announcements.
Choose a small task for “review web accessibility.” Provide the relevant file, screen, or brief and define what a useful result should contain. Keep the original version available for comparison.
2. Install and verify the instructions
Run this command from the project where you want the skill available. Follow the installer’s host selection, then confirm the skill appears in that host. The command is the installation method documented by the TDP repository.
npx skills add thedesignproject/agent-skills -s accessibilityRead the full skill instructions for prerequisites and supported tools. Installing a skill does not automatically connect Figma or grant access to external tools.
3. Apply it with your project context
Use the starter request below with the relevant inputs attached or referenced. Confirm that the host loaded the intended skill; a matching name alone is not evidence that its instructions were applied.
4. Review the result
Retest fixes with keyboard and assistive technology; automated checks alone do not establish conformance.
Compare the output with the task’s acceptance criteria. Check factual claims, unsupported assumptions, and any changes to the interface. For code or design changes, review real states and behavior before treating the result as finished.
5. Keep what works
Save approved outputs with their source and ownership. Note which instructions helped, where the result needed correction, and what must be checked next time. Use the workflow below to connect this task to its next step.
A starter request
Adapt this example to your files, audience, and requirements.
Review this flow for accessibility, including keyboard use, semantics, focus, labels, errors, and contrast. Separate observed failures from items needing assistive-technology testing.
Completion checklist
- The inputs and intended result are explicit.
- Required files and tools are available in the chosen host.
- The result has been reviewed against the actual task.
- Limitations and follow-up checks are recorded.