含Glyphicon的锚点/按钮的可访问性优化问询

嘿，你当前的这个锚点按钮设置其实还没完全满足可访问性的要求，有几个关键问题需要调整，我来给你拆解一下：

• href="#"的跳转问题：点击这个链接会让页面直接跳转到顶部，这和“删除草坪项目”的操作完全不匹配，会给键盘用户、屏幕阅读器用户带来不必要的困惑。
• 屏幕阅读器识别缺失：虽然你加了title属性，但它只有鼠标悬停时能显示，键盘用户和依赖屏幕阅读器的用户大概率获取不到这个信息；再加上aria-hidden="true"把图标隐藏了，现在这个按钮没有任何可供辅助技术读取的有效文本内容。
• 语义匹配不合理：你给<a>标签加了role="button"，但原生的<button>元素本身就具备按钮的语义和键盘交互特性，用它来实现操作按钮会比改造链接更合适，也更符合Web规范。

方案一：改用原生<button>元素（推荐） #

这是最省心也最符合可访问性要求的选择，原生按钮自带键盘交互支持（回车、空格都能触发操作），不需要额外设置role属性，代码示例：

<button class="btn btn-default btn-xs btn-danger" aria-label="Delete lawn project">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>

• aria-label直接给屏幕阅读器提供了按钮的功能描述，完美弥补了没有可见文本的问题。
• 原生按钮默认支持键盘导航，不需要额外编写JS处理键盘事件。

方案二：如果必须使用<a>标签 #

如果你因为业务限制一定要用链接模拟按钮，需要做这些关键调整：

<a href="javascript:void(0)" class="btn btn-default btn-xs btn-danger" role="button" aria-label="Delete lawn project">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
  <span class="sr-only">Delete lawn project</span>
</a>

• 把href="#"换成javascript:void(0)，或者绑定JS事件阻止默认跳转行为，避免页面意外滚动。
• 增加sr-only类的隐藏文本（Bootstrap自带这个样式类），或者保留aria-label，确保屏幕阅读器能读取到按钮的功能。
• 额外监听keydown事件，确保按下空格键也能触发删除操作（链接默认只有回车键能触发，而按钮是回车、空格都支持）。

总的来说，优先用原生<button>会省去很多可访问性上的麻烦，也更符合Web语义规范。

内容的提问来源于stack exchange，提问作者the_lotus