Empty buttons

Empty buttons are also a common accessibility problem.

This is often the case with icon buttons. Every button needs some text, even if it is an icon button. A non-visual user cannot interprete an icon. Even some visual users struggle to interprete what an icon is for. In this following code example, I will use a red circle as icon, which can mean basically everything.

<button>
    <svg viewBox="-16 -16 32 32">
        <circle fill="red" r="14"></circle>
    </svg>
</button>

This button has an icon (for simplicity, it is just a circle). It lacks an accessible name.

A screenreader would announce "button", but the non-sighted user will not know what it is for, they can only guess.

Adding text to a button

The simplest way is to just add text to the button.

<button>
    <svg viewBox="-16 -16 32 32">
        <circle fill="red" r="14"></circle>
    </svg>
    Okay
</button>

However, there is not always enough space to display the button.

Adding invisible text to a button

You can add invisible text to a button, using CSS techniques to visually hide the text but keep it accessible to screenreader users.

A display: none or visibility: hidden would not work here, as it would also remove the text from the accessibility tree.

Something that works is sizing it to 1px, setting the position to absolute etc:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

Alternative: using aria-label

Alternatively, you can use aria-label. This overrides the accessible name of the button. It's recommended to only use this as a last resort.

<button aria-label="Okay">
    <!-- ... -->
</button>