How to make buttons accessible with meaningful names

When a button doesn't have an accessible name, screen readers and other assistive technologies announce it as button, which provides no information to users about what the button does.

For buttons with visible labels, add text content to the button element. Make the label a clear call to action. For example:

<button>Book room</button>

For buttons without visible labels, like icon buttons, use the aria-label attribute to clearly describe the action to anyone using an assistive technology, for example:

<button class="btn" aria-label="Right Align">
    <span class="material-icons" aria-hidden="true">format_align_right</span>
</button>