按钮标签的语义与可访问性
理解 button 的语义
Button 标签表示一个可点击的用户界面控件，通常用于触发操作、提交表单或切换状态。理解其语义有助于搜索引擎更好地抓取页面意图，也让屏幕阅读器能够正确朗读按钮的用途。
将按钮用于行动而非仅作装饰，可以提升页面的可用性与可访问性。与非语义标签（如 div、span）相比，button 天然具备键盘可聚焦与事件处理的能力，这对用户体验至关重要。
通过明确的文本标签或 aria-label，使按钮的作用对所有用户都清晰可见。若按钮文字不足以表达含义，请辅以可访问的文字描述以避免歧义。
为什么使用
使用 <button> 可以自动提供键盘可聚焦、按下和抬起的交互行为，而不需要额外的脚本就能实现基本可用性。
与超链接不同，按钮更符合“引发动作”的语义，在表单、对话框和控件面板中尤其常见。这有助于搜索引擎理解页面结构与用户交互路径。
对于多个状态的切换按钮，type="button"、aria-pressed 等属性组合能提供更清晰的状态表达，避免混淆用户。
HTML按钮的基础用法与示例
基本按钮代码与属性
最常见的按钮结构是一个简单的 <button> 元素，可放置文本或图标来表示操作。
通过设置 type 属性，可以指定按钮的功能，常见取值有 button、submit、reset。
<button>点击我</button>
<button type="button">普通按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>点击行为会在浏览器层面触发预设事件，若不需要提交表单，应将按钮类型设为 button，以避免意外提交。
不同类型按钮：button、submit、reset
提交按钮（submit）会提交包含它的表单，这是与表单交互最直接的方式。
重置按钮（reset）会把表单字段回到初始值，在复杂表单中用于快速清空数据。
<form action="/submit" method="post"><input type="text" name="name" value="张三"><button type="submit">提交如果你需要自定义行为，可以把按钮的 type 设置为 button，再通过 JavaScript 绑定事件处理函数。
document.querySelector('#customBtn').addEventListener('click', () => {// 自定义逻辑
});禁用按钮与状态管理
禁用状态（disabled）用于防止在等待异步操作完成时重复点击，能提升可用性并防止错误提交。
禁用按钮时应提供视觉提示和屏幕阅读器可感知的状态，例如通过 aria-disabled 或样式来传达不可用信息。
<button type="button" disabled>加载中…</button>在前端异步操作中，可以通过 disabled 属性动态控制按钮状态，且在操作完成后再启用按钮。
无障碍性增强与 ARIA 属性
aria-label、aria-labelledby、aria-pressed 的使用
aria-label 用于提供对按钮的替代文本描述，当按钮的文本不足以清晰表达用途时尤其有用。
aria-pressed 适用于切换按钮，可以告诉屏幕阅读器当前的“已选中/未选中”状态。
<button aria-label="开启灯光" aria-pressed="false">灯光</button>通过动态更新 aria-pressed 的值，可以让无障碍设备同步当前状态，保持用户认知的一致性。
用于自定义控件的角色与属性
对于自定义按钮或非原生控件，应明确指定 role="button"，并确保可聚焦、可键盘操作以及提供可访问的事件回车与空格键处理。
结合 tabindex，可以让非原生元素获得聚焦能力，从而实现完整的键盘导航。
<div role="button" tabindex="0" aria-label="自定义控件" onclick="doAction()" onkeypress="if(event.key==='Enter' || event.key===' '){doAction();}"></div>按钮样式化与交互最佳实践
原生按钮与自定义元素的取舍
优先使用原生 <button>，以确保原生行为和无障碍性，只有在需要自定义控件时才考虑替换为其他元素。
自定义控件需要额外的无障碍实现，包括键盘事件、角色、标签与屏幕阅读器描述的完整覆盖。
<button>原生按钮</button>
<div role="button" tabindex="0" aria-label="自定义控件">自定义按钮</div>使用 CSS 伪类、过渡与焦点样式
通过 CSS 提升按钮在悬停、聚焦和点击时的反馈，提升易用性和视觉层次感。
确保聚焦样式清晰可见，以帮助键盘用户在页面中定位控件。
button {padding: 0.5rem 1rem;border: 1px solid #ccc;background: #fff;border-radius: 6px;transition: transform 0.2s ease, background 0.2s ease;
}
button:hover { background: #f5f5f5; }
button:focus { outline: 2px solid #005fcc; outline-offset: 2px; }键盘访问与脚本事件处理
按钮应对 Enter 与 Space 键有统一的触发行为，避免仅通过鼠标事件驱动而忽略键盘用户。
合理使用事件委托与无副作用脚本，确保按钮点击不会引入不可预期的页面滚动或焦点跳转。
document.addEventListener('keydown', function(e){const btn = document.querySelector('#toggleBtn');if(e.key === 'Enter' || e.key === ' '){btn.click();}
});