Use landmark regions correctly
SkillMedialandmark-regions is an agent skill for accessibility review of rendered HTML, interactive components, and design-system patterns related to using landmark regions correctly. It guides an agent to check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output, so landmark regions let screen reader users quickly identify and jump to major page sections.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent environment that can load skills and access the rendered HTML or components to review.
Then ask your AI: use the Use landmark regions correctly skill
What your AI can do with it
- Verify pages use HTML5 landmark elements like <header>, <nav>, <main>, and <footer>
- Check that each landmark appears only once where appropriate, such as a single <main>
- Flag multiple landmarks of the same type that lack aria-label labels
- Review rendered markup and interactive states, flagging exact elements, roles, labels, and
- Explain how landmark regions assist assistive technology users in navigating complex layou
- Suggest replacing generic <div> containers with semantic landmark elements
Getting started
- Have an agent environment that can load skills and access the rendered HTML or components to review.
- Add the landmark-regions skill to the agent's available skills.
- Ask the agent to review a page or component for correct use of landmark regions.
- Consult references/rule.md for full implementation details, code examples, and framework-specific guidance.
- Verify fixes with browser accessibility tooling or assistive technology.
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
- Aug 2026
Questions
- What does the skill check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Why do landmark regions matter?
- They allow screen reader users to quickly identify and jump to major sections of a page, improving navigation efficiency.
Advanced
- Item type
- skill
- Key
landmark-regions- Source
- github.com/thedaviddias/front-end-checklist