title: how to fix "empty button" web accessability error when using bootstrap's glyhicons
body: <p>I have a page where a button is labelled with a glyphicon (bootstrap).</p>
  
  <p>I have a new requirement that there must be no "Errors" when the page is checked with the "Wave" tool ( <a href="https://wave.webaim.org/extension/" rel="noreferrer">https://wave.webaim.org/extension/</a> ).</p>
  
  <p>The problem is that Wave throws an Error for the button because it is an "empty button".</p>
  
  <p>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.</p>
  
  <p>This is the minimal version of my page showing the problem:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;title&lt;/title&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" &gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
  &lt;button&gt;
  &lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;button&gt;
  &lt;span class="glyphicon glyphicon-chevron-up"&gt;&lt;/span&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button"&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there a better way to ensure accessibility (provide alternative text for the glyphicon) than dummy img?</p>