如何修复「锚元素需href属性支持键盘无障碍，需提供有效href值」警告？

问题情况 #

你写的JSX代码是这样的：

<div className="container">
    <ul className="con_list">
        <li><a href="#">Home {s}&nbsp; </a></li>
        <li> <a href="#"> Categories</a></li>
    </ul>
</div>

现在收到警告：「锚元素需设置href属性以支持键盘无障碍，请提供有效、可导航的地址作为href属性值」

解决办法 #

这个警告是因为href="#"属于无效的导航地址，不符合无障碍标准，分三种情况处理：

• 如果是正经的跳转链接：直接把#换成真实的目标URL就行，比如首页路径/home、分类页路径/categories：

  <li><a href="/home">Home {s}</a></li>
  <li><a href="/categories">Categories</a></li>
  

• 如果只是用来触发点击事件（不用跳转）：别用<a>标签了，换成<button>元素更合适——毕竟<a>的语义是导航链接，按钮才是做交互操作的，完全符合无障碍要求：

  <li><button onClick={handleHomeClick}>Home {s}</button></li>
  <li><button onClick={handleCategoriesClick}>Categories</button></li>
  

  要是想要链接的样式，直接用CSS给按钮改外观就行。

• 必须用<a>但暂时没跳转目标：可以临时设置href="#!"，同时加上role="button"明确语义，避免无障碍工具搞错：

  <li><a href="#!" role="button">Home {s}</a></li>
  <li><a href="#!" role="button">Categories</a></li>
  

  不过这只是权宜之计，优先推荐前两种更规范的做法。

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