html5原生标签如、、、已自带隐式aria地标角色（banner、navigation、main、contentinfo），结构正确即可被屏幕阅读器识别，无需手动添加role属性；仅在用模拟语义区域或兼容极旧环境时才需显式写role。
用
HTML5语义标签本身已绑定隐式ARIA地标角色，<header></header>就是role="banner"，<nav></nav>对应role="navigation"，<main></main>等于role="main"，<footer></footer>是role="contentinfo"。只要结构正确，屏幕阅读器就能自动识别导航骨架，不需要额外写role属性。
常见错误是给<nav></nav>再加role="navigation"——冗余且可能干扰某些旧版辅助技术解析。只有两种情况才需要显式写role：一是用<div>模拟语义区域（比如老项目无法改结构），二是兼容HTML4等极旧环境（现在几乎不用）。
<p>注意：<code><main></main>在整个页面中必须唯一；多个<aside></aside>可以存在，但每个都应有明确上下文（比如用aria-label区分“相关文章”和“广告”）；<section></section>不自带地标角色，除非你主动加role="region"并配aria-labelledby——但慎用，无意义的region会让屏幕阅读器用户迷失。
避免用包裹语义标签破坏地标结构
把<nav></nav>包在<div>里再加<code>role="navigation"，反而会覆盖原生语义。浏览器和辅助技术优先读取最内层元素的角色，如果外层<div>没设<code>role，它就只是个普通容器，不影响；但如果设了role="group"或role="region"，就会干扰内部<nav></nav>的地标识别。
实操建议：
- 删掉所有包裹
<header></header>、<nav></nav>、<main></main>的无意义<div>
<li>如果必须用<code><div>做样式隔离，确保它不带<code>role属性，也不设tabindex
- 检查DOM树：用Chrome DevTools右键元素 → “Accessibility”面板，看“Landmarks”是否列出预期的
banner、navigation等项
region和complementary角色要配aria-labelledby才能被识别为有效地标
role="region"和role="complementary"不会自动成为可导航地标，必须搭配aria-labelledby指向一个可见文本节点，否则屏幕阅读器会跳过或报“无名区域”。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
例如，侧边栏用<aside></aside>就够了，它默认是complementary；但如果用<div role="complementary">，就必须写<code>aria-labelledby="sidebar-title"，且<h2 id="sidebar-title">相关资源</h2>得真实存在并可见。
容易踩的坑：
- 只写
role="region"不加aria-labelledby，该区域在地标列表里完全不可见
- 用
aria-label代替aria-labelledby——aria-label对region无效，必须指向ID
- 标题ID拼写错误或重复，导致多个
region共用同一ID，辅助技术只读第一个
搜索框、登录框等局部功能区要用role="search"或role="form"明确标识
不是所有交互区域都能靠<header></header>或<aside></aside>覆盖。role="search"是独立地标，用于全局搜索框；role="form"适用于独立表单模块（如登录弹窗），但要注意：它不替代<form></form>标签，而是补充语义。
关键点：
-
<form></form>本身已有隐式role="form"，仅当用<div>模拟表单时才需显式加
<li>
<code>role="search"必须放在包含<input type="search">的容器上，且最好配aria-label="站内搜索"
- 避免给
<nav></nav>里的搜索框再加role="search"——它已是navigation的一部分，单独标会割裂逻辑
复杂点在于嵌套：比如页眉里既有<nav></nav>又有搜索框，应该让<nav></nav>包裹主导航链接，搜索框作为兄弟节点放在<header></header>里，而不是塞进<nav></nav>内部。否则屏幕阅读器会误判搜索框是导航的一部分。
把<nav></nav>包在<div>里再加<code>role="navigation"，反而会覆盖原生语义。浏览器和辅助技术优先读取最内层元素的角色，如果外层<div>没设<code>role，它就只是个普通容器，不影响；但如果设了role="group"或role="region"，就会干扰内部<nav></nav>的地标识别。
实操建议：
- 删掉所有包裹
<header></header>、<nav></nav>、<main></main>的无意义<div> <li>如果必须用<code><div>做样式隔离，确保它不带<code>role属性，也不设tabindex - 检查DOM树：用Chrome DevTools右键元素 → “Accessibility”面板，看“Landmarks”是否列出预期的
banner、navigation等项 - 只写
role="region"不加aria-labelledby，该区域在地标列表里完全不可见 - 用
aria-label代替aria-labelledby——aria-label对region无效，必须指向ID - 标题ID拼写错误或重复，导致多个
region共用同一ID，辅助技术只读第一个 -
<form></form>本身已有隐式role="form"，仅当用<div>模拟表单时才需显式加 <li> <code>role="search"必须放在包含<input type="search">的容器上，且最好配aria-label="站内搜索" - 避免给
<nav></nav>里的搜索框再加role="search"——它已是navigation的一部分，单独标会割裂逻辑
region和complementary角色要配aria-labelledby才能被识别为有效地标
role="region"和role="complementary"不会自动成为可导航地标，必须搭配aria-labelledby指向一个可见文本节点，否则屏幕阅读器会跳过或报“无名区域”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
例如，侧边栏用<aside></aside>就够了，它默认是complementary；但如果用<div role="complementary">，就必须写<code>aria-labelledby="sidebar-title"，且<h2 id="sidebar-title">相关资源</h2>得真实存在并可见。
容易踩的坑：
搜索框、登录框等局部功能区要用role="search"或role="form"明确标识
不是所有交互区域都能靠<header></header>或<aside></aside>覆盖。role="search"是独立地标，用于全局搜索框；role="form"适用于独立表单模块（如登录弹窗），但要注意：它不替代<form></form>标签，而是补充语义。
关键点：
复杂点在于嵌套：比如页眉里既有<nav></nav>又有搜索框，应该让<nav></nav>包裹主导航链接，搜索框作为兄弟节点放在<header></header>里，而不是塞进<nav></nav>内部。否则屏幕阅读器会误判搜索框是导航的一部分。
