title: Should I use arial-label or a label element that is visually hidden
body: <p>I am creating a search form that has two elements an input field and a button. The input field does not have an label associated with it. </p>
  
  <p>To make the field more accessible I can add <code>&lt;label for="searchfield"&gt;Search&lt;/label&gt;</code> and visually hide it so it will e.g. be accessible for screenreaders. </p>
  
  <p>I could also add <code>aria-label="search"</code> to the input field and leave the input field without an label.</p>
  
  <p>I have tested with "Voice Over" on a Mac and I get the same result/output. My question is are these approaches equivalent? Or is one approach better than the other one?</p>
  
  <p>Here is a <a href="http://codepen.io/ingvi/pen/524619e959228fafe17abb72ef9ca4f0" rel="nofollow noreferrer">pen</a>.</p>