Joshua Pearson Joshua Pearson - 19 days ago 7
CSS Question

WAI-ARIA Compliance For button that contains no text

I am working on meeting WAI-Aria Compliance standards for a project, and the following code generates a custom drop down button. The error I am receiving is as follows "A button is empty or has no value text." I have tried using aria labels, including hidden text, attaching a title, and adding a value to the button tag. None of which has worked. My question is, How can I make this a compliant button?

edit: I am using the add-on Wave compliance checker to find the areas where I have missed the mark on compliance.

<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

The issue might be caused by the fact there is actually no text on the button. I'd suggest using a visibly hidden piece of text:

<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
}

This will visibly hide the text and ensure it doesn't get squashed together when read by a screen reader (the white-space: nowrap). This is also my preferred solution as it allows the full semantics for the button to work.

If aria is what you're going for, could you try aria-describedby though this will need something extra in your mark-up to store the description:

<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>

Because this adds extra mark-up, I'd lean more towards the sr-only class and have visibly hidden text.