html - WAI-ARIA Compliance 适用于不包含文本的按钮

Question

我正在努力满足一个元素的 WAI-Aria 合规性标准，以下代码生成一个自定义下拉按钮。我收到的错误如下所示“按钮为空或没有值文本。”我尝试过使用 aria 标签，包括隐藏文本、附​​加标题以及向按钮标签添加值。这些都没有用。我的问题是，如何使它成为合规按钮？

编辑:我正在使用附加的 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
}

这将明显地隐藏文本并确保在屏幕阅读器阅读时它不会被压扁(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 类并且有明显的隐藏文本。