Use landmark regions correctly
SkillMedialandmark-regions is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns related to Use landmark regions correctly. It guides the agent to check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output. It helps verify that web page sections like navigation and main content use correct landmark markup.
Use Use landmark regions correctly in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Use landmark regions correctly and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Use landmark regions correctly skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have an AI agent that can load skills.
What your AI can do with it
- Review rendered HTML for correct landmark markup
- Check that sections like navigation and main content use proper landmarks
- Inspect native semantics before anything else
- Check keyboard behavior and focus flow
- Verify accessible names on components
- Check screen-reader output where relevant
Getting started
- Have an AI agent that can load skills.
- Add the landmark-regions skill to the agent's available skills.
- Ask the agent to review a rendered page, component, or design-system pattern for landmark correctness.
- The agent will check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/landmark-regions/SKILL.md and read by ahel’s review.
Landmark regions allow screen reader users to quickly identify and jump to major sections of a page, significantly improving navigation efficiency.
Quick Reference
- Use HTML5 landmark elements like
<header>,<nav>,<main>, and<footer> - Ensure each landmark appears only once where appropriate (e.g., one
<main>) - Provide labels for multiple landmarks of the same type using
aria-label
Check
Verify that the page uses appropriate HTML5 landmark elements and that they are correctly structured.
Fix
Replace generic <div> containers with semantic landmark elements like <header>, <nav>, <main>, and <footer>.
Explain
Explain how landmark regions assist assistive technology users in navigating complex page layouts.
Code Review
Review the rendered markup and interactive states that affect Use landmark regions correctly. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/landmark-regions
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Oct 2026
Questions
- When should this skill be used?
- Use it when reviewing rendered HTML, interactive components, or design-system patterns related to using landmark regions correctly.
- What does the agent check first?
- Native semantics are checked first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- What are landmark regions?
- They are page sections like navigation and main content; the skill helps confirm these use correct landmark markup.
Advanced
- Item type
- skill
- Key
landmark-regions- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist