如何修复 "name property of a focusable element must not be null"

Question

我使用 UI 辅助功能洞察力在 windows 上测试我的 React 应用程序。我收到很多“可聚焦元素的名称属性不能为空”和许多“可聚焦同级元素不能具有相同的名称和本地化控制类型”错误。我不知道如何修复这些错误，而且我在 google 中找不到任何像样的东西。为了解决第一个问题，我尝试将 name ot id 或 aria-label 属性添加到按钮，但没有任何改变。知道如何解决这个问题吗？

未通过测试的按钮示例：

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

Answer 1

屏幕 reader 需要能够向其用户宣布某些内容。按钮中图标的问题是无法 programatically determine 按钮文本。

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

另一种方法是这是不可见但屏幕仍可访问的文本 readers。

在下面的示例中，您会看到没有可见文本（因为它应该是里面的图标）但是屏幕 reader 用户会听到“按钮，一个女孩”，只需确保按钮文本作为一个动作是有意义的（所以我假设这个按钮是“性别女性”之类的）。

视觉上隐藏的文本更可取对于使用纯文本浏览器的人来说，按钮中的文本仍然显示（因为 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, 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>

如何修复 "name property of a focusable element must not be null"

How to fix "name property of a focusable element must not be null"

html

user-interface

accessibility

reactjs

web-accessibility