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