Accessible names

This page is out-dated and need some review.

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

Exact words for roles and reading order might differ per screenreader. Every unnecessary piece of code for the example has been omitted. Of course use classnames, id's and css instead of inline style.

Accessible names of buttons
codeimplementedscreenreader 
                  
  <button>Hello</button>
Hello button 
                  
  <button aria-label="Goodbye">Hello</button>
Goodbye button 
                  
  <button aria-labelledby="id01">Hello</button>
  <span id="id01" class="sr-only">Goodbye</span>
Goodbye Goodbye button 
                  
  <button id="myid" aria-labelledby="id02 myid">Hello</button>
  <span id="id02" class="sr-only">Goodbye</span>
Goodbye Goodbye Hello button 
                  
  <button aria-describedby="id03">Hello</button>
  <span id="id03" 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">

Strange. This seems to work, while you should not put an aria-label on a span.

 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 
                  
  <label id="ff12">First</label>
  <input type="text" aria-labelledby="ff12">
First 
                  
  <h5>First</h5>
  <input type="text" aria-labelledby="ff13">
  <div id="ff13" style="display:none">
   <span>
    First
   </span>
  </div>
First
 First

bad example

                  
  <h5>First</h5>
  <input type="text" aria-labelledby="ff14">
  <div id="ff14" style="visibility:hidden">
   <span>
    First
   </span>
  </div>
First
 
                  
  <div id="ff15">
   First
   <input type="text" aria-labelledby="ff15">
   <div style="color:#800;display:none">
    Error: Error message
   </div>
  </div>
First
Error: Error message
First 
                  
  <div id="ff16">
   First
   <input type="text" aria-labelledby="ff16">
   <div style="color:#800;">
    Error: Error message
   </div>
  </div>
First
Error: Error message
First, Error: Error message 
                  
  <div>
   <label  id="ff17a">First</label>
   <input type="text" 
     aria-labelledby="ff17a"
     aria-describedby="ff17b">
   <div style="color:#800;" id="ff17b">
    Error: Error message
   </div>
  </div>
Error: Error message
First, Error: Error message