语义化html是可访问性最低门槛，使用原生标签（如、、、正确标题层级）比依赖aria更可靠，能天然支持键盘操作、屏幕阅读器识别和表单行为，避免手动补全缺陷。
语义化 HTML 不是“加分项”，而是可访问性的最低门槛。不用 <button></button> 而用 <div> 加 <code>role="button"，等于主动放弃浏览器原生支持的键盘焦点、回车/空格触发、禁用状态（disabled）和屏幕阅读器自动播报——这些你都得自己补，而且大概率补不全。
为什么 <button></button> 比 <div role="button"> 更可靠
<p>很多团队在组件库中封装按钮时，习惯从 <code><div> 或 <code><span></span> 开始写，再靠 ARIA 和 JS 补交互逻辑。这埋了三个硬伤：
-
<button></button> 默认可聚焦、可按回车/空格激活；<div role="button"> 必须手动加 <code>tabindex="0"，且不响应空格键（除非你监听并阻止默认行为）
-
disabled 属性在 <button></button> 上会天然禁用交互、改变样式、被屏幕阅读器识别为“不可用”；<div> 即使加 <code>aria-disabled="true"，也无法阻止鼠标点击或键盘触发
- 表单内嵌套时，
<button type="submit"></button> 会自动触发表单提交；<div> 需额外绑定事件，还容易漏掉 <code>event.preventDefault()
<nav></nav>、<main></main> 这些结构标签真有用吗
有用，而且效果直接可见于屏幕阅读器的“区域跳转”功能。比如 NVDA 或 VoiceOver 用户按下 D 键（“Landmarks”模式），就能快速在 <header></header>、<nav></nav>、<main></main>、<footer></footer> 之间切换——前提是这些标签真实存在，且没被 CSS 隐藏或 JS 移除。
- 不要用
<div class="nav"> + <code>role="navigation" 替代 <nav></nav>：前者需额外加 aria-label 才能被识别为独立导航区
-
<main></main> 页面中只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 内；否则屏幕阅读器可能忽略它
- 如果用了
<main></main>，就别再给它加 role="main" ——重复声明反而可能干扰部分旧版辅助技术
标题层级断裂为什么比颜色对比度不够更致命
标题层级（<h1></h1> → <h2></h2> → <h3></h3>）是屏幕阅读器用户理解页面骨架的核心路径。一旦跳级（比如 <h1></h1> 后直接 <h4></h4>）或乱序（<h3></h3> 出现在 <h2></h2> 前），他们就无法靠“跳标题”快速定位内容，相当于把目录页撕掉了几页。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
- 视觉设计师常要求“隐藏
<h2></h2> 样式但保留语义”，可用 clip-path: inset(50%); + overflow: hidden; 替代 display: none; 或 visibility: hidden;（后者会彻底移除标题的可访问性）
- 动态渲染的标题（如 React 中条件渲染）容易漏掉层级校验，建议用 axe 浏览器插件实时扫描
document.querySelectorAll("h1, h2, h3, h4, h5, h6") 的顺序
-
<h1></h1> 应该每个页面只有一个，且通常放在 <main></main> 内部；首页的 <h1></h1> 是站点名，内页的 <h1></h1> 是当前页面主题
最常被忽略的不是怎么加 ARIA，而是删掉不该加的 ARIA——比如给 <button></button> 加 role="button"，或给 <img alt="logo"> 加 aria-label。原生语义足够时，额外标注反而制造噪音。
<button></button> 默认可聚焦、可按回车/空格激活；<div role="button"> 必须手动加 <code>tabindex="0"，且不响应空格键（除非你监听并阻止默认行为）
disabled 属性在 <button></button> 上会天然禁用交互、改变样式、被屏幕阅读器识别为“不可用”；<div> 即使加 <code>aria-disabled="true"，也无法阻止鼠标点击或键盘触发
<button type="submit"></button> 会自动触发表单提交；<div> 需额外绑定事件，还容易漏掉 <code>event.preventDefault()
<nav></nav>、<main></main> 这些结构标签真有用吗
有用，而且效果直接可见于屏幕阅读器的“区域跳转”功能。比如 NVDA 或 VoiceOver 用户按下 D 键（“Landmarks”模式），就能快速在 <header></header>、<nav></nav>、<main></main>、<footer></footer> 之间切换——前提是这些标签真实存在，且没被 CSS 隐藏或 JS 移除。
- 不要用
<div class="nav"> + <code>role="navigation"替代<nav></nav>：前者需额外加aria-label才能被识别为独立导航区 -
<main></main>页面中只能出现一次，且不能嵌套在<article></article>或<section></section>内；否则屏幕阅读器可能忽略它 - 如果用了
<main></main>，就别再给它加role="main"——重复声明反而可能干扰部分旧版辅助技术 - 视觉设计师常要求“隐藏
<h2></h2>样式但保留语义”，可用clip-path: inset(50%);+overflow: hidden;替代display: none;或visibility: hidden;（后者会彻底移除标题的可访问性） - 动态渲染的标题（如 React 中条件渲染）容易漏掉层级校验，建议用 axe 浏览器插件实时扫描
document.querySelectorAll("h1, h2, h3, h4, h5, h6")的顺序 -
<h1></h1>应该每个页面只有一个，且通常放在<main></main>内部；首页的<h1></h1>是站点名，内页的<h1></h1>是当前页面主题
标题层级断裂为什么比颜色对比度不够更致命
标题层级（<h1></h1> → <h2></h2> → <h3></h3>）是屏幕阅读器用户理解页面骨架的核心路径。一旦跳级（比如 <h1></h1> 后直接 <h4></h4>）或乱序（<h3></h3> 出现在 <h2></h2> 前），他们就无法靠“跳标题”快速定位内容，相当于把目录页撕掉了几页。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
最常被忽略的不是怎么加 ARIA，而是删掉不该加的 ARIA——比如给 <button></button> 加 role="button"，或给 <img alt="logo"> 加 aria-label。原生语义足够时，额外标注反而制造噪音。
