WAI-ARIA 不包含文本的按钮合规性

Question

我正在努力满足项目的 WAI-Aria 合规性标准，以下代码生成自定义下拉按钮。我收到的错误如下 "A button is empty or has no value text." 我试过使用 aria 标签，包括隐藏文本、附加标题以及向按钮标签添加值。 None 其中有效。我的问题是，如何使它成为合规按钮？

编辑：我正在使用 add-on Wave 合规性检查器来查找我错过合规性标记的区域。

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}">
                                         <span class="iconPlusRoundBlueWhite"></span></button>

Answer 1

这个问题可能是因为按钮上实际上没有文字。我建议使用一段明显隐藏的文本：

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}">
  <span class="iconPlusRoundBlueWhite">
    <span class="sr-only">text for the button</span>
  </span>
</button>

.sr-only {
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  position: absolute;
  white-space: nowrap
}

这将明显地隐藏文本，并确保在屏幕 reader（white-space: nowrap）阅读时不会将其挤在一起。这也是我的首选解决方案，因为它允许按钮的完整语义起作用。

如果 aria 是你想要的，你可以尝试 aria-describedby 虽然这需要在你的标记中添加一些额外的东西来存储描述：

<button class="child btn btn-lg" data-value="+" data-loopid="@i" style="color:#1C5D9C;background-color:transparent;padding:0 1px; @if(!item.HasAdditionalLocations){@Html.Raw("visibility:hidden")}" aria-describedby="button-message">
                                         <span class="iconPlusRoundBlueWhite"></span></button>

    <div id="button-message">I am the text for a button</div>

因为这增加了额外的标记，所以我更倾向于 sr-only class 并且有明显隐藏的文本。

WAI-ARIA 不包含文本的按钮合规性

WAI-ARIA Compliance For button that contains no text

html

css

wai-aria