时间戳

首页 > 解决方案 > 如何修复“可聚焦元素的名称属性不能为空”

html - 如何修复“可聚焦元素的名称属性不能为空”

问题描述

我使用 UI 可访问性洞察力在 Windows 上测试我的反应应用程序。我得到很多“可聚焦元素的名称属性不能为空”和很多“可聚焦同级元素不能具有相同的名称和本地化控件类型”错误。我不知道如何解决这些错误，而且我在谷歌中找不到任何像样的东西。为了解决第一个问题，我尝试将nameotid或aria-labelattr 添加到按钮，但没有任何改变。关于如何解决这个问题的任何想法？

未通过测试的按钮示例：

 <button
   className={css.button}
   onClick={() => setIsTipOpen(!isTipOpen)}
 >
  <Icon type='Girl'/>
</button>

标签： htmlreactjsuser-interfaceaccessibilityweb-accessibility

解决方案

屏幕阅读器需要能够向用户宣布某些内容。按钮中的图标的问题是无法以编程方式确定按钮文本。

解决此问题的一种方法是向aria-label按钮元素添加一个。

另一种方法是视觉隐藏文本。这是不可见但仍可供屏幕阅读器访问的文本。

在下面的示例中，您将看到没有可见文本（因为它应该是内部的图标）但屏幕阅读器用户会听到“按钮，一个女孩”，只需确保按钮文本作为动作有意义（所以我假设这个按钮将是“性别女性”或其他东西）。

视觉隐藏文本更适合使用纯文本浏览器的人，按钮内的文本仍会显示（因为 CSS 在纯文本浏览器中被忽略）并且支持是 100% 一直到 IE6（而aria-label支持不是 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, 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>

推荐阅读