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

如何解决如何修复“可聚焦元素的名称属性不得为空”

我正在使用 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>