title: Accessibility: sr-only or aria-label
body: <p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" rel="noreferrer">From MDN</a>:</p>
  
  <blockquote>
    <p>In the example below, a button is styled to look like a typical "close"  button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.</p>
  
  <pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;X&lt;/button&gt;
  </code></pre>
  </blockquote>
  
  <p>According to the Bootstrap Documentation:</p>
  
  <blockquote>
    <p>Hide an element to all devices except screen readers with .sr-only</p>
  </blockquote>
  
  <p>So I guess I could also write:</p>
  
  <pre><code>&lt;button onclick="myDialog.close()"&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;X&lt;/button&gt;
  </code></pre>
  
  <p>In a Bootstrap project, how can I choose which one to prefer?</p>