Accessible names

Label, aria-label, aria-labelledby, aria-describedby, what should my screenreader read?

Exact words for roles and reading order might differ per screenreader.

Accessible names of buttons
codeimplementedscreenreader 
                  
  <button>Hello</button>
Hello button 
                  
  <button aria-label="Goodbye">Hello</button>
Goodbye button 
                  
  <button aria-labelledby="myid">Hello</button>
  <span id="myid" class="sr-only">Goodbye</span>
Goodbye Goodbye button 
                  
  <button aria-describedby="myid">Hello</button>
  <span id="myid" class="sr-only">Goodbye</span>
Goodbye Hello button Goodbye

bad example

                  
  <div class="knop" tabindex="0" onClick="doNothing()">Hello</div>
Hello
 clickable Hello

bad example

                  
  <div class="knop" tabindex="0" role="button">Hello</div>
Hello
 Hello button
Accessible names of input fields
codeimplementedinput name 
                  
  <label for="ff1">First</label>
  <input type="text" id="ff1">
First 
                  
  <label for="ff2">First</label>
  <input type="text" id="ff2" aria-describedby="err2">
  <span id="err2" style="color:#800;">Error message</span>
Error message First ... Error message

bad example

                  
  <label for="ff3">First *</label>
  <input type="text" id="ff3">
First 
                  
  <label for="ff4">First 
    <span aria-label="required">*</span>
  </label>
  <input type="text" id="ff4">
First required 
                  
  <label for="ff5">First 
    <span aria-hidden="true">*</span>
  </label>
  <input type="text" id="ff5" required>
First required

bad example

                  
  <label>First</label>
  <input type="text">

bad example

                  
  <label>First</label>
  <input type="text" placeholder="Second">
Second

bad example

                  
  <label>First</label>
  <input type="text" title="Second">
Second

bad example

                  
  <label class="sr-only">First</label>
  <input type="text">

bad example

                  
  <label class="sr-only" for="ff8">First</label>
  <input type="text" id="ff8">
First

bad example

                  
  <label style="display:none;" for="ff9">First</label>
  <input type="text" id="ff9">

bad example

                  
  <label for="ff10">First</label>
  <input type="text" name="ff10">

bad example

                  
  <label for="ff11">First</label>
  <input type="text" id="ff11" aria-label="Second">
Second