用途:在创建新组件或页面区块、审查标记的无障碍与语义、在原生元素与 ARIA 之间取舍、构建标题层级、制作可交互元素与表单、创建响应式表格时使用本技能。
核心原则:考虑真实内容(长句、不同宽高比、多语言、动态长度);先规划页面地标再进入组件;原生优先于 ARIA,避免冗余 ARIA 和用 role 覆盖原生语义;视觉层级与语义层级分离,用 CSS 类控制外观。
结构要点:页面首个可聚焦元素应为跳过导航链接,指向 <main id="main-content" tabindex="-1">;<main> 每页仅一个并包含主 <h1>;header、footer、nav、main、aside、search、form、article、section 等地标各有使用条件,section 需可访问名称才成为区域;address 仅用于作者或所有者联系信息。标题应保持逻辑层级、组件内层级可配置;列表在数量有意义时使用。交互上用按钮做事、链接去往别处,重复按钮需唯一可访问名称;轻量浮层优先用 Popover API,逐步展开可用 details/summary。表单用 fieldset/legend 分组。
限制:资料仅涵盖语义与无障碍实践,未提供安装、版本、收费或效果信息。