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-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类，并且有明显隐藏的文本。

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

1 个答案: