Accessible names are the labels given to HTML elements that can be announced in assistive technologies such as screen readers. They may or may not be visible to sighted interface users, depending on context.
Whether you provide controls using standard HTML elements or create custom controls, ensure that controls are given appropriate names. There are a number of ways to provide accessible names.
Examples
✓ Text node
The most common way to provide an accessible name is through an element's text node. In the following example of a Close button, the button element contains the text "close". When a user focuses the button with a screen reader running, the screen reader would announce "close" (the accessible name), then "button" (the element's role).
<button>close</button>
✓ aria-label
Perhaps you'd prefer your close button to be represented by a simple "×" symbol. One way to do this would be to use the the "×" character. Unfortunately, screen readers identify this as the multiplication "times" symbol and would announce "times button," which is unclear. To override this poor accessible name, you can apply an aria-label attribute with the value "close".
<button aria-label="close">×</button>
✓ The alt attribute
If you are looking for more control over how the "×" symbol looks, you may wish to draw it and include it as an image. The accessible name for an image is typically provided by its alt attribute. When you place an <img/> within a <button>, the button takes its accessible name from the image.
<button><img src="path/to/button.svg" alt="close" /></button>
Video: Accessible names for Buttons with Chrome and VoiceOver