立即学习“前端免费学习笔记（深入）”；

• ✅ 正确：

  
    
      
  如何正确使用 main 标签
      
  这是本页唯一的核心内容...
    
  

• ❌ 错误：

  
    
  
    ...
    
  

• 动态页面中，
  应随路由更新而重新挂载，而不是固定包裹整个 SPA 容器

与 aria-main 和 role="main" 的关系

如果因历史原因无法修改 HTML 结构（比如 CMS 输出固定模板），可以用 role="main" 或 aria-labelledby 做语义补充，但优先级低于原生

真实调试中，用浏览器开发者工具的「Accessibility Inspector」查看「Landmark」区域，能立刻验证

• 避免写：
  —— 属于冗余且有潜在兼容风险
• 旧项目升级时，若存在 ，应逐步替换为
  ，而非共存
• 某些老旧屏幕阅读器（如 JAWS 16 及更早）对
  支持不完整，此时可保留 aria-label 作为降级方案：

SEO 和 SSR 中容易被忽略的细节

搜索引擎爬虫目前普遍支持

，并将其作为内容相关性加权的重要信号。但如果你用 Next.js、Nuxt 或 Remix 等框架，要注意：服务端生成的 HTML 中，
必须包含实际内容，不能是空标签或仅含 loading 占位符。

另一个隐形陷阱：CSS 重置或 UI 框架（如 Bootstrap）可能给 main 元素设了默认 display: block 以外的值（例如 display: contents），这会导致无障碍树中该节点“消失”。务必检查 computed styles。

• Next.js 中，
  应放在 app/layout.tsx 的 {children} 外层，而非每个 page.tsx 内部重复定义
• 若使用 next/head 或 动态更新，确保
  内容与 语义一致（例如标题写「产品 A 详情」，则
  内第一级标题也应匹配）
• 构建产物中搜索
  出现次数，确认只有一处且位置合理 —— 自动化 lint 工具如 axe-core 或 html-validate 可加入 CI 检查