React redux 如何使Reactjs头可访问

我在我的Chrome开发工具中运行axe，以查找缺少的标记，从而使我的网站更易于访问。现在JAWS无法阅读某些页面。我在这里查看这段代码时进展缓慢：

return [
      <ul className="breadcrumb" key="breadcrumb" role="navigation">
        <li><a href={backHref} className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
        <li><span>&bull;</span></li>
        <li><a href="https://example.com" target="_blank"  tabIndex={tabIndex}><span className="section-name">Guest Services</span></a></li>
      </ul>,
      <a href="/" className={`link-home ${logoHrefStatus}`} key="eatHere"  tabIndex={tabIndex}><span className="screen-reader-text">Eat Here</span></a>
    ];
  }

---

没用。

我想它实际上可能很简单：

<li><a href={backHref} aria-label="link-back" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>

---

试一试。

在第一个代码片段中，aXe到底在抱怨哪个元素？您可以发布浏览器中呈现的HTML（而不是react代码）吗。还有这里类的CSS-我特别感兴趣的是

屏幕阅读器文本

类使用了什么属性。除此之外，这里有很多不寻常的东西，对可访问性来说是无效的、不必要的或令人困惑的。（1） 使用导航角色覆盖UL语义会破坏列表语义。（2） tablist角色只应在您实际上也有选项卡面板的情况下使用。（3） 只有一个链接使用tab角色，因此它是tab和列表项的奇怪组合（4）tab角色对于“返回页面”链接没有意义。（5）从链接名称来看，使用tabindex看起来不必要，而且可能很危险。（6）只包含项目符号的列表项很奇怪。总体而言，很难说您实际上要在这里构建什么，所有这些都可能会让屏幕阅读器用户感到困惑。但是，这些问题实际上与您所问的有关

aria标签的问题无关。这是有风险的。链接文本是一个变量（
{backText}
），但您的aria标签是一个固定值。此外，您的aria标签作为UI字符串没有多大意义。请记住，在计算可访问名称时，aria标签会覆盖链接文本。如果它们不同，则有失败WCAG的风险。
<li><a href={backHref} aria-label="link-back" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>