按钮必须使用标签而非或模拟，因其原生支持键盘焦点、enter/space触发、disabled语义及屏幕阅读器播报；若用需手动补全所有交互逻辑，易出错。

按钮必须用 <button></button>，不能用 <div> 或 <code><span></span> 模拟——这是屏幕阅读器正确识别的前提，其他所有优化都建立在这个基础上。

为什么比

更可靠

原生 <button></button> 自带键盘焦点、Enter/Space 触发、disabled 状态语义 和屏幕阅读器播报逻辑；而 <div> 即使加了 <code>role="button" 和 tabindex="0"，仍需手动处理键盘事件（如 keydown 捕获空格）、同步 aria-disabled、管理焦点转移——漏掉任一环节，辅助技术就会读错或跳过。

常见错误包括：

• 用 <div onclick="submit()>提交</div> 替代 <button type=" submit>提交 <li>给图标按钮只加 <code>title 属性，没写 aria-label，导致屏幕阅读器静音
• 禁用按钮时仅设 style="opacity: 0.5"，没加 disabled，辅助技术仍认为可操作

type 属性必须显式声明

省略 type 时浏览器默认为 submit，放在表单里会意外触发表单提交——这不仅影响功能，还会打断屏幕阅读器对当前上下文的判断（比如正在编辑表单，突然跳转）。

正确做法：

• <button type="submit">保存</button>：用于表单内提交，触发验证和提交逻辑
• <button type="button">展开详情</button>：纯 JS 行为，无表单关联
• <button type="reset">重置</button>：慎用，避免误点清空数据

注意：type="button" 是最安全的兜底选择，尤其在组件库中封装按钮时，应默认设为该值，避免父级表单污染。

空按钮必须配 aria-label

仅含图标（如 ×、?、?️）的按钮没有可见文本，屏幕阅读器无法推断意图。此时 aria-label 不是可选项，是必需项。

错误写法：


使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载

<button onclick="close()">×</button>

正确写法：

<button aria-label="关闭对话框" onclick="close()">×</button>

补充说明：

• aria-label 优先级高于 title，且不依赖 hover 提示，对键盘用户和盲人用户都生效
• 若按钮已有可见文本（如“删除用户”），则无需 aria-label；强行添加会导致重复播报
• 避免用 aria-labelledby 指向页面中其他元素 ID——若目标元素被隐藏或动态移除，会造成播报失败

按钮组与视觉布局的语义隔离

多个按钮并排时，屏幕阅读器按 DOM 顺序逐个读出，但用户需要理解它们之间的关系（比如“确认/取消”是一组操作）。此时不能靠 CSS Flex 布局暗示逻辑，而要靠结构本身传达。

推荐方式：

• 用 <div class="button-group"> 包裹是允许的，但需确保每个按钮都有独立、明确的文本或 <code>aria-label
• 若按钮组有统一目的（如“筛选条件：全部/已读/未读”），可加 role="group" 并配 aria-label，例如：<div role="group" aria-label="筛选邮件状态">…</div>
• 避免嵌套 <fieldset></fieldset>——那是为表单控件（<input type="radio">）设计的，按钮不是表单控件，套用反而造成语义混淆

真正容易被忽略的是：按钮的视觉位置（比如右对齐）不会自动转化为语义权重，屏幕阅读器不关心你把“确定”放在左边还是右边，它只读 DOM 顺序。所以操作主次必须靠文案强度（如“删除此项目”比“取消”更具动作性），而不是靠 CSS justify-content。