Need explanation how Clear input button accessibility works

Question

I've a text input with a clear button (looks like "x"). When clicked, this button will remove all the text from the input:

The markup for this looks like:

  <label for="first-name">First name</label>

  <div class="input-and-buttons">

    <button role="button" aria-label="Clear" tabindex="0">
      X
    </button>

    <input id="first-name" tabindex="1"></input>

  </div>

How to best describe meaning of this button and its relationship to the input for users who use screen readers (like NVDA or VoiceOver)?

Answer 1

You can simply add the label of the input for context, for example "Clear First name". This is particularly useful if this type of button exists on multiple fields on the page, otherwise it could be unclear what field this button is clearing, especially if users navigate by button or show a list of form items.

Just two unrelated notes on the markup you are showing here:

• Using tabindex="1" is bad practice. Instead you should mark up things in order in the DOM. The <button> should come after the input field, and this will then match the visual order.
• You do not need the attributes role="button" and tabindex="0" on your <button>. These are natively implied (a button is focusable by default, and its semantic role is built-in because it's a native element), so you're just adding superfluous markup which makes maintenance harder.