accessibility - grouped checkboxes where one checkbox has a related textarea

Question

accessibility - grouped checkboxes where one checkbox has a related textarea

503 Views Asked by gaurav5430 At 05 May 2021 at 18:30

I have a feedback form where I am asking users for a reason for cancellation, something like this:

label {
  display: block
}

button {
  display: block;
}

<form>
  <fieldset>
    <legend> Reason for cancellation? </legend>
    <label>
      <input type="checkbox"> Reason 1 </input>
    </label>
    <label>
      <input type="checkbox"> Reason 2 </input>
    </label>
    <label>
      <input type="checkbox"> Reason 3 </input>
    </label>
    <label>
      <input type="checkbox"> Reason 4 </input>
    </label>
    <label>
      <input type="checkbox"> Other </input>
    </label>
    <textarea aria-label="other reason"></textarea>
    <button> Submit </button>
  </fieldset>
</form>

The textarea is related to the Other checkbox, i.e, it only gets activated if the user selects the Other option, otherwise it remains disabled

How do I represent that association in markup?

Should I group the checkbox and the textarea using another fieldset? I am not sure if this is semantically correct, and also in general this is discouraged. https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/#:~:text=It%20is%20possible%20to%20nest,fields%20belong%20within%20which%20fieldset.
Should I use something like aria-controls or aria-owns?
Would it be enough to just mention Other (Please fill the reason below) in the checkbox label, so that when the label is announced, the user can get to know that there is a textarea just after the checkbox which can be reached by tab
It might also be ok to change the UX to always allow the user to optionally fill in the text area for any of the selected reasons , so the text area can be part of the same fieldset and can be enabled all the time

NOTE: I have seen some examples, specifically Google Forms, and Search Engine Journal. Google forms solves this issue by placing the textbox next to the checkbox, the textbox is always enabled, and as soon as you focus on the textbox, the checkbox gets automatically checked.

Search Engine Journal, does not explicitly associate the controls, but they do mention it in the checkbox label, to fill in the reason below.

Original Q&A

There are 2 best solutions below

**fundor** · Answer 1 · 2021-05-05T18:49:12.090000

You could just hide the textarea by default and let it show up with a small javascript to toggle a class to set display to block.

<body>
    <form>
        <fieldset>
        <legend> Reason for cancellation? </legend>
        <label>
            <input type="checkbox"> Reason 1 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 2 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 3 </input>
        </label>
        <label>
            <input type="checkbox"> Reason 4 </input>
        </label>
        <label>
            <input type="checkbox" class="otherCheckbox"> Other </input>
        </label>
        <textarea aria-label="other reason" class="otherTextarea"></textarea>
        <button> Submit </button>
        </fieldset>
    </form>
</body>
<script>
    let otherCheckbox = document.querySelector(".otherCheckbox")
    let otherTextarea = document.querySelector(".otherTextarea")

    otherCheckbox.addEventListener("change", e => {
        otherTextarea.classList.toggle("show")
    })
</script>

Added to css:

.otherTextarea {
  display: none;
}
.show {
  display: block;
}

**QuentinC** · Answer 2 · 2021-05-05T19:29:06.897000

Answer on using ARIA

You can use aria-controls, it seems like a good fit for your case. it looks more appropriate than aria-owns, see this question about difference between aria-own and aria-controls.

However, screen reader support is quite inconsistent, and even if it is supported, it's at the end quite rarely known and used by screen reader users. Therefore, in addition, it's always good to add a precision in clear text like you suggest e.g. "Other reason (please explain below)". Adding that indication in the label of the checkbox is a good choice. This added precision will anyway never by harmful to anyone, so you have no reason not to do it.

Answer on the UX design

If you have added the precision "please explain below", there's really no problem in enabling the textarea depending on the checkbox. Simply, make sure that the textarea come after the enabling checkbox in tab order, so to ensure that the user won't miss it and won't need to go back and forth to fill it in. Unless you have a weird design, it should normally already be the case.

The other alternative, checking the checkbox automatically when entering a reason is equally no problem, but you need to be more carful on when you do it:

Don't check the checkbox on focusing the textarea, otherwise keyboard only users will trigger it when they don't want to, and even normal users may click on the textarea and then change their mind
Don't check the checkbox on entering a character in the textarea. It's probably a bad idea because I may start typing something, and finally clear everything and change my mind

What about checkign the checkbox when the textarea loses the focus while being non-empty ?

You may, optionally, show a snackbar or something like that with aria-live=polite, telling that the checkbox as been checked automatically because you ahve entered something. This kind of bonus indication on things modified automatically would be quite useful in more complex forms, but for your case as it is presented here, it's totally superfluous because the relationship is obvious.

accessibility - grouped checkboxes where one checkbox has a related textarea

There are 2 best solutions below

Answer on using ARIA

Answer on the UX design

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ACCESSIBILITY

Related Questions in SCREEN-READERS

Related Questions in SEMANTIC-HTML

Trending Questions

Popular # Hahtags

Popular Questions