屏幕阅读器依赖语义化标签实现导航与操作。html标题（h1-h6）、nav、main等标签是可跳转区域，缺失或错用会导致快捷键失效、语义混乱；img缺alt、label未关联表单控件、标题层级断裂、滥用div替代button等，均造成功能缺失而非体验下降；应优先使用原生语义标签并正确配合aria。
屏幕阅读器怎么依赖
它们不是视觉装饰，而是导航锚点。NVDA、VoiceOver 会把 <header></header>、<nav></nav>、<main></main>、<footer></footer> 当作可跳转的“区域”，用户按 Ctrl+Shift+DownArrow（NVDA）或 Control+Option+U（VoiceOver）就能快速进入对应区块。如果全用 <div class="nav">，这些快捷键直接失效——用户得逐行听完整页才能找到菜单。
<p>常见错误现象：</p>
<ul>
<li>
<code><main></main> 缺失或重复出现：浏览器只识别第一个 <main></main>，后续被忽略；SEO 和阅读模式也只提取首个
<nav></nav> 里混入搜索框、登录按钮：屏幕阅读器会把它们一并读作“导航项”，破坏语义边界<section></section> 没配 <h2></h2>～<h6></h6>：辅助技术无法确认主题，可能跳过整个区块为什么![]()
缺alt、没
这不是“体验不好”，是部分用户根本无法完成操作。无图模式下 <img> 变成空白占位符，若没 alt，屏幕阅读器连“这是张产品图”都读不出来；<input type="text"> 单独存在时，焦点进入后读不出“请输入邮箱”，用户不知道该填什么。
实操建议：
- 功能性图片写描述性
alt，比如alt="iPhone 15 Pro 银色正面特写，显示灵动岛和超视网膜XDR显示屏"，不是alt="phone.jpg" - 装饰性图片用
alt=""（空字符串），别省略或写“无意义图片” -
<label for="email"></label>必须与<input id="email">严格匹配，ID 大小写敏感，且不能重复 - 复选框/单选按钮组用
<fieldset></fieldset>+<legend></legend>包裹，否则屏幕阅读器无法识别选项归属
标题层级断裂对语音导航的实际影响
跳级（如 <h2></h2> 后接 <h4></h4>）不是样式问题，是结构崩溃。屏幕阅读器依赖嵌套关系构建内容树，一旦断层，<h4></h4> 会被误判为新章节起点，甚至被完全跳过——用户根本听不到你写的子标题。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
使用场景：
- CMS 输出文章正文时，编辑误插
<h1></h1>导致层级重置 - JS 动态渲染卡片列表，每张卡片自带
<h3></h3>，但父容器没设<h2></h2> - 用 CSS 视觉降级：把
<h2></h2>改成<div class="h2"> 再用样式模拟大小，语义彻底丢失 <p>检查方法：Chrome DevTools → Accessibility 面板 → Heading level，看是否连续递进。</p> <h3>为什么<button>不能用<div role="button">替代 <p><code><button></button>原生支持键盘交互：空格键触发、Enter 键提交、Tab 自动聚焦、禁用状态自动灰显且不可聚焦。而<div role="button"> 只是“告诉”屏幕阅读器“这是个按钮”，但没实现任何行为逻辑——你得手动加 <code>tabindex="0"、监听keydown、处理disabled样式、补全焦点 outline，漏一项就导致键盘用户卡死。容易踩的坑：
- 自定义组件优先用原生标签：
<select></select>不要用<div role="combobox">，<code><dialog></dialog>别硬写<div role="dialog"> <li>ARIA 是补充，不是替代：能用 <code><nav></nav>就别写<div role="navigation"> <li> <code>role="presentation"或aria-hidden="true"仅用于真正无关的视觉装饰，误用会隐藏关键信息
最常被忽略的是焦点管理：动态弹出的菜单、模态框必须手动控制
focus()和trap focus，否则键盘用户会跳出上下文，再也回不去。 - 自定义组件优先用原生标签：
