Search code examples
htmltwitter-bootstrapaccessibilitywai-ariaglyphicons

how to fix "empty button" web accessability error when using bootstrap's glyhicons

I have a page where a button is labelled with a glyphicon (bootstrap).

I have a new requirement that there must be no "Errors" when the page is checked with the "Wave" tool ( https://wave.webaim.org/extension/ ).

The problem is that Wave throws an Error for the button because it is an "empty button".

I tried to use an image with alt text. That fixes the Wave error, but it makes the button slightly larger, and I am also uneasy about the abuse of the image for this.

This is the minimal version of my page showing the problem:

<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>

Is there a better way to ensure accessibility (provide alternative text for the glyphicon) than dummy img?

Solution

  • Instead of adding an image with an alt text, add aria-label or title attribute on the button with the required text.

    <html lang="en">

<head>
  <title>title</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div>
    <button>
      <span class="glyphicon glyphicon-chevron-up"></span>
      </button>
  </div>
  <div>
    <button aria-label="UP button" title="UP button">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span>
    </button>
  </div>
</body>

</html>