关闭按钮应直接使用语义化 关闭，需添加 aria-label（图标无文字时）、支持 Enter/Space 键、设置最小触控尺寸 44×44px，并避免 title 属性。
button 元素本身已是语义化关闭按钮，无需额外包装
HTML 中 <button></button> 天然具有可点击、可聚焦、可被屏幕阅读器识别为交互控件的语义。只要它有明确意图（比如关闭弹窗），加上合适的文本或 aria-label 就足够——不需要套 <div role="button"> 或用 <code><a href="#"></a> 冒充。
- 正确写法：
<button type="button">关闭</button>，type="button"防止表单意外提交 - 如果图标无文字，必须加
aria-label="关闭"，否则屏幕阅读器读不出意图 - 避免
<button>×</button>单独使用，符号“×”对视障用户无意义，也不利于国际化
关闭按钮必须绑定 JavaScript 事件，但别漏掉键盘支持
只写 onclick 不够。用户可能用 Enter 或 Space 触发，而默认 <button></button> 对 Space 的响应需手动补全，否则键盘操作会失效。
- 监听
click和keydown两个事件，检查event.key === 'Enter' || event.key === ' ' - 记得在
keydown里调用event.preventDefault()，防止空格触发页面滚动 - 示例逻辑：
button.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClose(); } });
别用 title 属性替代可访问性说明
title 属性不是无障碍方案：它延迟显示、不兼容多数屏幕阅读器、移动端基本不触发。想表达“关闭当前提示框”，就得靠真实文本或 aria-label。
- ✅ 推荐：
<button aria-label="关闭登录提示">关闭</button> - ❌ 避免：
<button title="关闭登录提示">×</button>（title不可靠，且“×”无文本） - 如果按钮在模态框右上角，还可加
aria-controls指向被控制的区域 ID，增强上下文关联
移动端点击区域太小是常见失效原因
默认 <button></button> 在 iOS/Android 上可能小于 44×44px，导致点不准、被系统忽略。这不是语义问题，但会让“能用”变成“难用”。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 强制最小尺寸：
min-width: 44px; min-height: 44px; - 配合
padding扩展可点区域，别只靠字体大小撑开 - 测试时真机点一点，尤其注意边缘和悬浮按钮——模拟器容易掩盖这个问题
Space 支持和移动端的点击热区。写完别只点鼠标，按两下空格再戳戳手机屏幕。
