Polish & Launch
Add a Skip-to-Content Link
Add a visually hidden skip link that appears on focus, letting keyboard and screen reader users jump straight to the main content without tabbing through the entire header.
No fields needed.
This prompt is the same for every site. Copy it and paste it into Airo AI Builder — it will find the right place to add the skip link automatically.
Built something? Show it off in the Airo Builder Lab
Your Prompt
Add a skip-to-content link to my site.
Requirements:
1. The link must be the very first focusable element in the DOM — place it before the <header>.
2. Use a CSS class to visually hide it when not focused (do NOT use display:none or visibility:hidden — those remove it from the tab order).
3. On :focus, the link should appear in the top-left corner of the viewport with high contrast — white text on a dark background, or the site's primary accent color.
4. The link text should read "Skip to main content".
5. It should point to #main-content.
6. If the main content area doesn't already have id="main-content", add it to the <main> element on every page.
7. Test that pressing Tab on page load focuses the link, and pressing Enter jumps focus to the main content area.
8. Do not change any other layout or styles.
Unfilled fields show as [brackets] — fill them in or leave as-is.