语义标签vs ARIA角色：为何二选一？<main>与div role="main"该选谁？

除了提升代码可读性，选择<main>还有这些关键理由：

• 浏览器原生交互支持：主流浏览器对<main>这类语义化元素内置了导航优化，比如部分浏览器支持通过键盘快捷键（如Firefox的Ctrl+F6）直接跳转到页面核心内容区，而<div role="main">无法触发这类原生的快捷导航逻辑，对键盘操作用户的体验提升明显。
• SEO优化加成：搜索引擎爬虫会优先识别语义化标签，<main>能清晰标记页面的核心内容区域，帮助爬虫更准确地理解页面结构，提升核心内容在搜索结果中的权重，这是通用<div>标签无法提供的。
• 代码更简洁可靠：<main>自带main的ARIA语义，无需手动添加role="main"属性，既减少了代码冗余，也避免了手动书写ARIA属性可能出现的拼写错误，让代码更健壮。
• 更好的未来兼容性：语义化HTML是Web标准的发展方向，后续浏览器或辅助技术很可能会针对<main>这类标签新增更多原生支持，而依赖ARIA角色的<div>在适配新特性时可能存在滞后性。

适合使用<div role="main">的场景 #

• 兼容老旧浏览器：针对IE9及更早版本的浏览器（这类浏览器不支持<main>元素），需要用<div>配合role="main"来确保无障碍访问功能正常。
• 特殊场景下的兼容需求：如果页面布局或组件逻辑需要对核心内容区应用特殊样式/脚本，而<main>的默认浏览器样式或行为会造成冲突（这种情况非常少见），可以考虑用<div role="main">替代，但必须确保无障碍访问不受影响。

内容的提问来源于stack exchange，提问作者Aaron Beaudoin