Accessible Name Calculation

Last updated: 7 October 2023

Just a cheat sheet.
Although the title-attribute is mentioned here, it is better not to use it.

Algorithm for names

  1. aria-labelledby
  2. aria-label
  3. <label> (for form controls)
  4. placeholder (for text form controls)
  5. figcaption (for figure elements)
  6. alt (for img or area elements)
  7. <caption> (for table elements)
  8. <legend> (for fieldset elements)
  9. text contents (if exists in this role)
  10. value (for input form controls with type of button, submit, or reset)
  11. title badly supported by broswers and screenreaders

Algorithm for descritions

  1. aria-describedby
  2. title
  3. placeholder (for a text form control)

<input>

  1. aria-labelledby
  2. aria-label
  3. geassocieerde <label>
  4. placeholder (only when text input involved)
  5. title
  6. no accessible name

button

except type=submit and type=reset

  1. aria-labelledby
  2. aria-label
  3. value (not for button-element)
  4. title
  5. no accessible name

<a href

  1. aria-labelledby
  2. aria-label
  3. subtree of <a>
  4. title
  5. summary
  6. no accessible name

input type="image"

  1. aria-labelledby
  2. aria-label
  3. alt
  4. value
  5. named by user agent in case of "Submit Query"
  6. title
  7. no accessible name

<img>

  1. aria-labelledby
  2. aria-label
  3. alt
  4. title
  5. no accessible name

<table>

  1. aria-labelledby
  2. aria-label
  3. <caption>
  4. title
  5. summary
  6. no accessible name

What's my name?


<bla role="button" aria-label="name1" aria-labelledby="name2">
  <span id="name2">Name3</span>
  <div id="content">
    Name4
  </div>
</bla>

Example and resources: