为页面内锚点链接添加role="button"是否符合语义规范？

嘿，其实你给页面内锚链接加role="button"的做法并不恰当，原因主要有这几点：

• 语义混淆：<a>标签本身就有明确的链接语义，屏幕阅读器会识别它为“链接”，而添加role="button"后，辅助技术会把它当成按钮，这会让依赖辅助工具的用户困惑——到底是链接还是按钮？
• 键盘交互冲突：链接的键盘操作是按Enter触发跳转，而按钮的键盘操作是Enter或Space都可以。加了role="button"后，用户可能会用错误的按键操作，影响体验。
• 原生功能浪费：<a>标签自带跳转、可被Tab聚焦等原生可访问性特性，强行改成button角色反而破坏了这些内置功能。

那正确的做法是什么呢？如果只是想让链接看起来像按钮，只用CSS来调整样式就好，完全不需要修改它的语义角色。比如你的代码可以改成这样：

<ul>
  <li><a href='#section1' class="button-style">Go to section 1</a></li>
  <li><a href='#section2' class="button-style">Go to section 2</a></li>
</ul>
<div style="height:15rem"></div>
<!-- 对应的CSS -->
<style>
.button-style {
  /* 这里写按钮样式，比如背景色、边框、 padding 等 */
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
.button-style:hover {
  background: #0056b3;
}
</style>

这样既保留了链接的原生语义和可访问性，又能让它看起来和按钮一样，完美兼顾视觉和功能需求～

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