title: What is aria-label and how should I use it?
body: <p>A few hours ago I read about the <a href="https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-label" rel="noreferrer">aria-label</a> attribute, which:</p>
  
  <blockquote>
    <p>Defines a string value that labels the current element.</p>
  </blockquote>
  
  <p>But in my opinion this is what the <code>title</code> attribute was supposed to do. I looked further in the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" rel="noreferrer">Mozilla Developer Network</a> to get some examples and explanations, but the only thing I found was </p>
  
  <pre><code>&lt;button aria-label="Close" onclick="myDialog.close()"&gt;X&lt;/button&gt;
  </code></pre>
  
  <p>Which does not provide me with any label (so I assume I misunderstood the idea). I tried it here in <a href="http://jsfiddle.net/KhgPa/" rel="noreferrer">jsfiddle</a>.</p>
  
  <p>So my question is: why do I need <code>aria-label</code> and how should I use it?</p>