问题描述
我正在使用 UI 可访问性见解在 Windows 上测试我的 React 应用程序。
我收到很多“可聚焦元素的名称属性不能为空”和很多“可聚焦的同级元素不能具有相同的名称和 localizedcontroltype”错误。
我不知道如何解决这些错误,而且我在谷歌中找不到任何像样的东西。
为了解决第一个问题,我尝试向按钮添加 name
ot id
或 aria-label
attr,但没有任何改变。知道如何解决这个问题吗?
未通过测试的按钮示例:
<button
className={css.button}
onClick={() => setIsTipOpen(!isTipOpen)}
>
<Icon type='Girl'/>
</button>
解决方法
屏幕阅读器需要能够向用户宣布某些内容。按钮中图标的问题是无法programatically determine 按钮文本。
解决此问题的一种方法是向按钮元素添加 aria-label
。
执行此操作的另一种方法是 visually hidden text. 这是不可见但仍可供屏幕阅读器访问的文本。
在下面的示例中,您将看到没有可见文本(因为它应该是一个图标),但屏幕阅读器用户会听到“按钮,女孩”,只需确保按钮文本作为一个动作(所以我假设这个按钮是“性别女性”或其他东西)。
视觉隐藏文本更可取 对于使用纯文本浏览器的人,按钮内的文本仍会显示(因为 CSS 在纯文本浏览器中被忽略)并且支持 100%回到 IE6(而 aria-label
support is not 100%)。
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6,IE7 - a 0 height clip,off to the bottom right of the visible 1px box */
clip: rect(1px,1px,1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers,clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
.your-button-classes{
width: 100%;
height: 50px;
background-color: #333;
}
<button
class="your-button-classes"
onClick="someAction"
>
<Icon type='Girl'/>
<span class="visually-hidden">A girl</span>
</button>