aria-label vs aria-labelledby vs aria-describedby

aria-label

  • This provides a recognizable name for the object to the user.
  • If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen.
  • The aria-label is used to add an accessible name directly to an element.
1
2
3
4
<button
    aria-label="Close and return to listing page">
    Close
</button>


aria-labelledby

  • This provides a recognizable name for the object to the user.
  • If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.
1
2
3
4
5
6
7
8
<div 
    role="dialog"
    aria-labelledby="dialogTitle">
    <div id="dialogTitle">
        Advanced setting
    </div>
    ...
</div>


1
2
3
4
<div id="hoe">Santa Claus is laughing.</div>
<img
    aria-labelledby="hoe"
    src="SantaClaus.png">

–> Santa Claus is laughing.



1
2
3
4
5
6
7
8
<div
    id="hoe"
    aria-label="Ho ho ho ho ho ho">
    Santa Claus is laughing.
</div>
<img
    aria-labelledby="hoe"
    src="SantaClaus.png">

–> Ho ho ho ho ho ho



aria-describedby

  • This is for the purpose of providing more detailed information
1
2
3
4
5
6
7
8
<!-- aria-describedby - single -->
<div>
    <label>Password</label>
    <input
        type="password"
        aria-describedby="help">
    <div id="help">Password must be at least 10 characters</div>
</div>
1
2
3
4
5
6
7
8
9
<!-- aria-describedby - multiple -->
<div>
    <label>Password</label>
    <input
        type="password"
        aria-describedby="help privacy">
    <div id="help">Password must be at least 10 characters</div>
    <div id="privacy">Please keep your password private</div>
</div>




Summary

  • The aria-label is used to add an accessible name directly to an element.
  • aria-labelledby can be specified multiple ids
  • Is the label text visible?
    • YES: aria-labelledby
    • NO: aria-label
  • When explaining in:
    • Short label(s)：aria-labelledby
    • Sentences：aria-describedby



References

tabindex

  • tabindex=”int”: Moving order
  • tabindex=”0”: Focusable
  • tabindex=”-1”: Unfocusable