3

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

enter image description here

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)?

Improve this question

1 Answer 1

Reset to default
6

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.
Improve this answer
3
  • 3
    Great answer, but one more thing will improve it - the button element should have a type="button" attribute. If the type attribute is missing, the default type is a submit button. Without type="button", the JS click listener function would need to use event.preventDefault() to avoid the submit behaviour. Commented May 18, 2019 at 6:02
  • @Victor - what do you mean when you say "add the labell of the input for context"? The input already has a label ("first name" in my example). Did you mean "a label of the button"? Commented May 19, 2019 at 19:25
  • @kamituel I mean that you should re-use the existing label of the input (“First name”), and append that text to the label of the clear button. So make the aria-label “Clear First name”, instead of just "Clear". And then do the same for any other field (so if you had another field with a label “Last name”, make the button's label "Clear Last name", and so on). Commented May 20, 2019 at 15:14

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.