1

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

4

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.
  • 2
    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. – andrewmacpherson May 18 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"? – kamituel May 19 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). – Victor May 20 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.