不能直接用或当按钮容器，因其语义缺失且无原生聚焦、键盘交互能力；应使用或带role="button"及完整键盘逻辑的元素，并确保svg图标设aria-hidden="true"。
为什么不能直接用 <i></i> 或 <span></span> 当按钮容器
因为语义缺失 + 交互隐患。浏览器不会把纯装饰性元素（比如空 <i></i>）识别为可聚焦、可键盘操作的控件，屏幕阅读器大概率跳过它，Enter 或 Space 键也触发不了点击。哪怕加了 onclick，也不符合 ARIA 实践。
- 必须用原生
<button></button>或带role="button"+ 完整键盘交互逻辑的元素 -
<a></a>只在有真实href时可用，否则要补tabindex="0"和role="button"，还得手动监听keydown - 图标本身建议用
<svg></svg>内联，避免字体图标加载失败或未声明aria-hidden="true"导致读屏重复播报
正确写法：用 <button></button> 包裹内联 <svg></svg>
这是最简、最健壮的方案。按钮自带焦点、空格/回车响应、禁用状态样式继承，SVG 图标可直接设宽高、颜色，无需额外 hack。
<button type="button" aria-label="删除项目"> <svg width="16" height="16" viewbox="0 0 16 16" focusable="false" aria-hidden="true"><path d="M4 5h12M4 9h12M4 13h12"></path></svg></button>
-
type="button"防止表单意外提交 -
aria-label提供按钮功能说明，覆盖图标语义 -
focusable="false"+aria-hidden="true"确保 SVG 不被读屏单独读出 - 不要给
<svg></svg>设tabindex，否则会多出一个无意义焦点停靠点
如果必须用 <a></a>（比如跳转场景）
常见于导航图标链接，例如“回到首页”的 logo 图标。此时 <a></a> 是语义正确的，但需确保 href 有效，且图标不干扰可访问性。
- 避免
href="#"—— 会导致页面跳顶，且无明确目标；改用href="/home"或href="javascript:void(0)"（后者需配合 JS 处理） - 图标仍加
aria-hidden="true"，文字描述放aria-label或可视文本中（如<span class="visually-hidden">首页</span>） - 禁用状态不能只靠 CSS 灰掉，得加
aria-disabled="true"并阻止默认行为
别踩这些坑
很多团队用字体图标（如 Font Awesome）+ <span></span> 搭配伪类生成图标，再套一层 <div onclick> —— 这种写法在键盘导航、读屏、高对比度模式下基本不可用。
<ul>
<li>字体图标必须声明 <code>aria-hidden="true"，否则读屏会尝试读出 Unicode 字符名（如 “icon-trash”）
:hover 或 :active 做唯一反馈，得补充 :focus 和 :focus-visible
em 或百分比乱缩放，容易在缩放或系统字体设置下失真；优先用 px 或 rem 固定值currentColor 控制 SVG 颜色，而不是写死 fill="#333"
tabindex 没移除，用户还是会按到它。
