Accessible names

Last updated: 20 November 2024

There are several methods to put an accessible name on HTML elements like <button>, <h3>. <a> and <input>. You migh be interested ti read the article about methods of applying accessible names to elements first.
My article describes what a screenreader should read when you use attributes like label, aria-label, aria-labelledby, aria-describedby.

Exact words for roles and reading order in the examples might differ per screenreader. The buttons and input fields are tested with NVDA. In the 3rd column the texts are shown what NVDA says when the interactieve item gets focus.

Accessible names of buttons on focus
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
codeimplementedscreenreader 
                  
  <label for="ff1">First</label>
  <input type="text" id="ff1">
First  edit, blank 
                  
  <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  edit  Error message  blank

bad example

                  
  <label for="ff3">First *</label>
  <input type="text" id="ff3">
First  edit  blank 
                  
  <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  edit  blank 
                  
  <label for="ff5">First 
    <span aria-hidden="true">*</span>
  </label>
  <input type="text" id="ff5" required>
First  edit  required  blank

bad example

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

bad example

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

bad example

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

bad example

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

bad example

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

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">
edit  blank

bad example

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

weak example

                  
  <h5>First</h5>
  <input type="text" aria-labelledby="ff13">
  <div id="ff13" style="display:none">
   <span>
    First
   </span>
  </div>
First
 First  edit  blank

bad example

                  
  <h5>First</h5>
  <input type="text" aria-labelledby="ff14">
  <div id="ff14" style="visibility:hidden">
   <span>
    First
   </span>
  </div>
First
 uncertain for some browsers 
                  
  <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  edit  blank 
                  
  <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   edit  blank 
                  
  <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  edit  Error: Error message   blank