Give an icon-only button an accessible name with aria-label

Every interactive element needs an accessible name: the text that assistive technology announces.

The problem

A button without an accessible name is unusable and confusing to screen reader users.

<%= button_tag do %>
  <%= trash_icon %>
<% end %>

Try it (Tab to focus, then listen to your screen reader):

VoiceOver on the button above:

Transcript: "button"

Add an aria-label so the button’s purpose is clear.

<%= button_tag "aria-label": "Delete item" do %>
  <%= trash_icon %>
<% end %>

Try it (Tab to focus, then listen to your screen reader):

Now VoiceOver announces:

Transcript: "Delete item, button"