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.

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

This is the pattern you should use. No need to reinvent the wheel. This approach is functionally identical to what you outlined, while being much more familiar to users (including users of assistive tech). And its semantics are more clear.

aria-controls and aria-expanded on the radio option that triggers the text box are all that’s needed.

const otherRadio = document.getElementById('otherRadio')
const otherLabel = document.getElementById('otherLabel')

document.querySelectorAll('input[name="fruit"]').forEach(radio => {
  radio.addEventListener('change', () => {
    const isOther = otherRadio.checked
    otherLabel.style.display = isOther ? 'inline-block' : 'none'
    otherRadio.setAttribute('aria-expanded', isOther)
  })
})

<form>
  <fieldset>
    <legend>What is your favorite fruit?</legend>
    <ul>
      <li><label><input type="radio" name="fruit" value="apple"/>apple</label></li>
      <li><label><input type="radio" name="fruit" value="orange"/>orange</label></li>
      <li><label><input type="radio" name="fruit" value="other" id="otherRadio" aria-controls="otherLabel" aria-expanded="false"/>other</label></li>
    </ul>
    <label id="otherLabel" style="display:none;">Specify other: <input type="text" name="otherFruit" /></label>
  </fieldset>
</form>

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>