Skip Links and Landmarks
Let keyboard users jump past repeated navigation straight to the content.
What it adds
A skip link at the top of the application shell plus a consistent set of landmark regions on every page.
What your agent is told to do
6
What your agent is told to do
6-
1
Add a skip link as the first focusable element in the shell, hidden until focused and clearly visible when it is. Do not hide it with display:none — that removes it from the tab order and it will never be reachable.
-
2
Give it a target that exists on every route: the main content region, made focusable so activating the link actually moves focus rather than only scrolling.
-
3
Audit the shell's landmarks. There is exactly one main per page; header, footer, and primary navigation each appear once and wrap the right content.
-
4
Where navigation appears more than once — a global nav plus a sidebar plus in-page section links — give each an accessible name so a screen reader's landmark list distinguishes them.
-
5
Reveal the skip link with an overlay or transform rather than by inserting it into the flow, so the page does not jump when it appears.
-
6
Do NOT stop at one skip link if the shell has a persistent sidebar or a heavy filter panel. Add targeted links for those too, but keep the total small; a list of eight skip links is its own obstacle.
Edge cases it handles
7
Edge cases it handles
7- A sticky header must not sit on top of the content the skip link just jumped to — offset the scroll position for it.
- The main target must be present before the link is used, including on routes that render content asynchronously.
- Client-side navigation must not leave the skip link pointing at a target from the previous route.
- Search and complementary regions each need names when repeated, not just navigation.
- Wrapping decorative chrome in a landmark is worse than leaving it out — every extra region makes the landmark list noisier.
- A skip link visible only on hover is useless; it must respond to keyboard focus specifically.
- The link must sit above any fixed header in stacking order or it will be revealed behind it.
Definition of done
8
Definition of done
8- The skip link is the first thing Tab reaches on every page and is plainly visible when focused.
- Activating it moves keyboard focus into the main content, not just the scroll position.
- Every route renders exactly one main landmark with a stable focusable target.
- Repeated navigation, search, and complementary regions have distinct accessible names.
- Revealing the skip link does not shift or reflow the page.
- The skip target is not obscured by sticky headers after the jump.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Auto Captions
Auto Captions
Every uploaded video gets timed captions without anyone typing them out.
What it does
An automatic captioning pass over uploaded video that produces a timed caption track shown in the player.
How it works
- 1 Extend the app's existing Voice Transcription rather than adding a second speech pipeline. What is new here is timing, storage as a caption track, and player integration, not the recognition itself.
- 2 Run captioning as a background job triggered after the upload finishes, and reuse the app's existing job progress reporting so the user can see where a long file has got to.
- 3 Store the caption track as its own record linked to the media, with a language, a status, and a source marking it as machine-generated so a human correction can supersede it later.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/auto-captions
Accessible Name Validator
Accessible Name Validator
Find every control a screen reader announces as nothing useful.
What it does
An audit of the computed accessible name of each interactive element in the rendered interface.
How it works
- 1 Compute the name the way assistive technology does — following the resolution order through labels, referenced elements, attributes, and text content — rather than reading the source markup and guessing.
- 2 Report three separate failures: an empty name, a generic name such as button, link, or here, and duplicate names within the same context where several controls announce identically.
- 3 Prefer a fix that adds a visible label. A control given a hidden name is announced but still mysterious to the sighted user who cannot tell two identical icons apart.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/accessible-name-validator
Touch Target Checker
Touch Target Checker
Find the controls that are too small or too crowded to hit reliably on a phone.
What it does
A development-time audit reporting the measured hit area and neighbour spacing of every interactive element.
How it works
- 1 Measure the element's actual activation area — the region that responds to a tap — rather than the icon or glyph drawn inside it, since padding and pseudo-element extensions frequently make a small icon a perfectly adequate target.
- 2 Check the gap between adjacent targets as well as their size. Two comfortable buttons sitting flush against each other still produce mis-taps, and the report must say which of the two problems it found.
- 3 Report the offending elements with enough context to locate them — the route, the component, and a way to highlight the element on the page — rather than a count of failures.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/touch-target-checker
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.