【发布时间】：2018-08-27 20:28:26
【问题描述】：
我在我的 Chrome 开发工具中运行 ax 来查找缺少的标记，以使我的网站更易于访问。现在 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>•</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>
];
}
哪个 ax 表示该元素对屏幕阅读器不可见，需要aria-label 属性或aria-labeledby 属性。我已经尝试了以下修复：
return [
<ul role="tablist" className="breadcrumb" key="breadcrumb">
<li role="presentation"><a href={backHref} role="tab" aria-selected="true" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
<li><span>•</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>
];
}
无济于事。
【问题讨论】：
-
在第一个代码 sn-p 中，ax 到底在抱怨哪个元素？您能否发布在浏览器中呈现的 HTML（不是反应代码）。还有这里类的 CSS - 我对
screen-reader-text类使用的属性特别感兴趣。 -
除此之外，这里有很多不寻常的东西是无效的、不必要的或对可访问性造成混淆。 (1) 用导航角色覆盖 UL 语义会破坏列表语义。 (2) tablist 角色应该只在你实际上也有标签面板的情况下使用。 (3) 只有一个链接使用选项卡角色处理，因此这是选项卡和列表项的奇怪组合 (4) 选项卡角色对于“返回页面”链接没有意义。
-
(5) 从链接名称来看，tabindex 的使用看起来没有必要，而且可能很危险。
-
(6) 只包含项目符号的列表项很奇怪。
-
总体而言，很难说出您在此处实际尝试构建的内容，所有这些内容都可能导致屏幕阅读器用户感到困惑。但是，这些实际上与您提出的有关
aria-label的问题无关。
标签： react-redux accessibility jsx