免费在 GitHub 公开中文介绍

landmark-one-main

检查页面是否仅有一个标识主要内容的main区域，找出缺失或重复的情况并提供修正方法，为屏幕阅读器用户明确跳转到正文的目标。

原文查看原文说明

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use exactly one main landmark. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

AI 评分100分/ 100 查看安装方法

适用场景

检查页面模板的main区域
修正组合布局中重复的main区域
用屏幕阅读器验证正文跳转

中文介绍

功能

此技能检查页面是否恰好存在一个main地标，即标识页面主要内容的区域。它会统计渲染后HTML中的<main>元素和带有role='main'的元素，指出主要区域缺失或重复的情况。如果存在多个主要区域，会说明如何将其合并到一个<main>中，或从多余的容器中移除role='main'。

适用场景

适合审查页面模板和共用布局。多个组件组合后，需要确认是否出现重复的main区域时，也可以使用。明确主要区域，可以为键盘和屏幕阅读器用户提供跳转目标，让他们跳过重复出现的导航，直接前往正文。

使用示例

“检查这个页面的<main>和带有role='main'的元素，确认主要区域是否只有一个。”
“找出布局中main区域重复的位置，提出修正建议，并说明如何使用屏幕阅读器验证结果。”

注意事项

没有特别注意事项。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确说明目的是检查渲染后的HTML是否恰好有一个main地标。
步骤具体性步骤、输入输出和示例是否具体: A良好具体说明统计main元素、合并区域或移除角色属性，以及报告问题元素和验证方法。
安全性发送数据、删除文件、执行命令等是否有说明: A良好范围为合并HTML区域或移除属性，未记载对外发送或删除文件的操作。
安装难易度所需工具和 API 密钥是否少且有说明: A良好可用浏览器无障碍工具或辅助技术验证，未指定专用服务或API密钥。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md1.7 KB
references/rule.md2.7 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Use exactly one main landmark

A single main landmark allows keyboard and screen reader users to jump directly to the primary content of the page, bypassing repetitive navigation.

Quick Reference

Ensure each page has exactly one <main> element
Avoid multiple elements with role='main'
Provides a clear starting point for the page's primary content

Check

Count the number of <main> elements or elements with role='main' on the page to ensure there is exactly one.

Fix

Combine multiple main content areas into a single <main> element or remove the 'role=main' attribute from extra containers.

Explain

Explain how the main landmark acts as a primary navigation target for assistive technologies, and why multiple main areas cause confusion.

Code Review

Review the rendered markup and interactive states that affect Use exactly one main landmark. 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/rules/accessibility/landmark-one-main

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能