Question 406912 in Html Question posted in
Some basic documentation can be found here.

Html – What is the correct aria and role for a button/label that fills the value of an input?

If a set of buttons (or labels) set the value of an input with a different value each, what roles and arias should they possess?
In this scenario the input can also be inserted/edited by the user manually.

So they would work similar to a set of radio buttons with an "Other, insert below" option.

Here is an example:

$("label").on("click", (event) => {
  const text = event.target.textContent;
  $("#text").val(text);
});
label {
  display: block;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<form action="javascript:void(0)">
  <label for="text">Text A</label>
  <label for="text">Text B</label>
  <label for="text">Text C</label>
  <input type="text" id="text" />
</form>

I’ve used labels in this case, so that the user can make edits to the selected with the least amount of actions possible. Labels also signify the link between the elements.

Should I add aria-controls, should I use buttons, should I change the overwrite the roles?

I was also considering, something along these lines, not sure if this would be an improvement though:

$("label:not(#text-label)").on("click", (event) => {
  const text = event.target.textContent;
  $("#text-label").text(text);
  $("#text-label").focus();
});
label {
  display: block;
  cursor: pointer;
}

input[type="radio"] {
  display: none;
}

label[contenteditable],
label[contenteditable="true"] {
  border: 1px solid black;
  display: inline-block;
  min-width: 12rem;
  padding: 0.25rem;
  white-space: nowrap;
}

label[contenteditable],
label[contenteditable="true"] br {
  display: none;
}

label[contenteditable],
label[contenteditable="true"] * {
  display: inline-block;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<form action="javascript:void(0)">
  <input id="a" type="radio" name="text" />
  <label for="a">Text A</label>
  <input id="b" type="radio" name="text" />
  <label for="b">Text B</label>
  <input id="c" type="radio" name="text" />
  <label for="c">Text C</label>
  <input id="text" type="radio" name="text" />
  <label id="text-label" for="text" contenteditable="true"></label>
</form>
Tags:

2

Answers


  1. 0

    Simple answer: Use <button>

    Another way is to set your labels to "Click this to add "Text 1" to the input field", although that is a little clumsy.

    If you really want to use your <label>s then this solution is best for you:

    <form action="javascript:void(0)">
  <label role="button" aria-label="Click to add Text A" for="text" data-value="Text A">Text A</label>
  <label role="button" aria-label="Click to add Text B" for="text" data-value="Text B">Text B</label>
  <label role="button" aria-label="Click to add Text C" for="text" data-value="Text C">Text C</label>
  <input type="text" id="text" aria-label="Editable text input" />
</form>
    Login or Signup to reply.
  2. 0

    Remember no. 1 rule of ARIA is don’t use ARIA, which means to use the correct semantics where you can with the correct and intuitive UI and only use ARIA where it enhances over those semantics.

    Use <button> for this, and there are numerous reasons why you should:

    • you are adding a javascript code that will be executed.
    • it will be focusable and have focus styles
    • button will be accompanies by tab indexing, a role of button and keyboard events by default (A event listening for the Enter key, A event listening for the Space key).

    Now, you want to output this clicked text and want that to have an ARIA attribute that announces it properly (which is important), while these are your aria-live= "polite" and aria-atomic="true" (these two together are covered by role="status") that notice those changes. But again I will go back to the rule no.1 and say use the <output> element that natively has a role of status. This is where the clicked button’s output and a contenteditable can be made (which needs to be tabbable and focusable).

    Buttons will be announced with a "click" and output will announce its changes, further you can group the buttons in a fieldset, where you can write the concise description in a legend. Or if you use an <h2> then all button will be aria-labelledby its own id and h2’s id. Lastly test it with screen readers and you can check the web accessibility cookbook, chapter-forms for an in-depth knowledge.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search