WAI-ARIA兼容性：不包含文本的按钮

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>

- Joshua

---

尝试将title属性添加到<button>元素中。那样行吗？ - chharvey

@chharvey 我也尝试了标题，但是没有用。 - Joshua

感谢您澄清。您可能希望将该信息添加到您的问题中。 - chharvey

我之前见过的一种做法是添加屏幕阅读器专用文本，该文本被样式化为视觉上隐藏，但仍可被虚拟光标读取（通常通过将其绝对定位到屏幕外）。 - Serlite

请注意，在此处使用 aria-label 为视力受损者提供内容是可接受的方法，例如：https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label#Example_2:_A_close_button_.28X.29_in_a_pop-up_div - Serlite

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类并隐藏可见文本。

- Karl Brown

---

Karl，这解决了我的问题。问题是我在调用此方法的许多按钮结构中缺少一个 span 语句。+1，直到我可以投票选出正确的答案。 - Joshua