Accessible name for ARIA input fields

How to give an ARIA input field an accessible name?

ARIA input roles include textbox, spinbutton, searchbox, combobox, and listbox. Use one of the following methods to name them:

<!-- Use aria-label -->
<div role="textbox" aria-label="Search query" contenteditable="true"></div>

<!-- Use aria-labelledby to reference visible text -->
<label id="qty-label">Quantity</label>
<div role="spinbutton"
     aria-labelledby="qty-label"
     aria-valuenow="1"
     aria-valuemin="1"
     aria-valuemax="10"
     tabindex="0">
  1
</div>

<!-- Use aria-label on a combobox -->
<div role="combobox" aria-label="Country" aria-expanded="false" aria-haspopup="listbox">
  ...
</div>

The following element fails because it has no accessible name:

<div role="textbox" contenteditable="true"></div>

Why is this important?

Screen readers announce the name of a field before users interact with it. Without a name, users do not know what information to enter.

This rule applies to custom input widgets built with ARIA roles. Prefer native <input> elements with <label> elements whenever possible, as they are accessible by default.