Accessible HTML Buttons: Text, Icons, and Text with Icons

In today’s article, I’ll share with you how to build accessible buttons for all types of content. To use a tangible example, we will use a delete button built in3 different approaches:

  1. A text button that says ‘Delete’.
  2. An icon button with only a trash icon.
  3. A button with the trash icon and the ‘Delete’ text.

Let’s Get Started: An HTML Button

If we want to build a button, we first need to focus on its purpose: it’s an interactive element used to execute an action. That’s why we use the HTML <button> tag, so the element already has the corresponding semantic attributes.

<button type="button">
  <!-- Contenido -->
</button>

Case One: A Button With Text Only

Once we have created the button, we can specify the action. As it is only a textual button, we can just write the text inside the <button> tag, and that’s enough. Assistive technologies will be able to read it well without any problems.

<button type="button">
  Delete
</button>

Case Two: A Button With an Icon

If we want to create a visual button instead of a text button, we add an <svg> tag with the corresponding icon. So our button would look something like:

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
    <path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14"
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Now, the problem with this code is that assistive technologies have no way to know that the trash icon corresponds to the ‘delete’ action.

An Accessible HTML Button with an Icon

In order to make this button accessible, we need to programmatically specify its purpose so assistive technologies can announce it correctly. Here is where the ARIA attributes come in. We need to:

  • Include the aria-label attribute on the <button> element with the value corresponding to the action.
  • Add the aria-hidden= ‘true’ attribute to the icon so assistive technologies will ignore it.
<button type="button" aria-label="Delete">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 
       viewBox="0 0 24 24" width="16" height="16" height="16">
    <path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14" 
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Case Three: An HTML Button with Icon Plus Text

Although this case might seem a little more complex at first, it’s actually even easier than the previous one. We need to include:

  1. The icon: with its aria-hidden=’true’ attribute, so assistive technologies will ignore it.
  2. The text for the action: this is enough for assistive technologies to read the necessary information only.

With these attributes, our button would look something like this:

<button type="button">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" 
       viewBox="0 0 24 24" width="16" height="16" height="16">
    <path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14" 
          fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Delete
</button>

And this is how we can make sure our buttons are accessible, no matter their content. And remember: a good design isn’t just one that looks pretty, but the one that can be used by the largest number of people.