Accessible name for ARIA command elements

How to give an ARIA command element an accessible name?

Use one of the following approaches:

<!-- Use aria-label -->
<div role="button" aria-label="Close dialog">
  <svg>...</svg>
</div>

<!-- Use aria-labelledby to reference visible text -->
<span id="save-label">Save document</span>
<div role="button" aria-labelledby="save-label">
  <svg>...</svg>
</div>

<!-- Include visible text content -->
<div role="button">Delete item</div>

<!-- Use title as a fallback -->
<div role="link" title="Go to homepage">
  <img src="logo.png" alt="" />
</div>

The following element fails because it has no accessible name:

<div role="button">
  <svg aria-hidden="true">...</svg>
</div>

Why is this important?

Screen readers announce interactive elements by their accessible name. When an element has the role button, link, or menuitem but no accessible name, the screen reader cannot tell the user what the element does.

This issue occurs frequently when icon-only buttons are built with <div> or <span> elements instead of native <button> or <a> elements.