CODEWITHSUNDEEP
htmlaccessibilityvoiceoverscreen-readerswcag
Norah
Norah

Reputation: 51

How to make accessible readonly checkboxes/radios that can't be modified?

I'm in the process of making reusable input components for a variety of input types, and I'm trying to figure out the recommended way to go about an accessible readonly input - that shouldn't be able to be modified.

For example, if there's a form that's only submitted once, and a user wants to go back and look at what they filled out.

How should its inputs be rendered?

The readonly property isn't valid for checkboxes and radios (same goes for aria-readonly), so while it works for the text based inputs, I need an alternative for checkboxes and radios.

An input with the disabled property is removed from the tabbing order, and it's been pointed out that disabled conveys that the input isn't relevant - which is not the intent.

<label>
  <input type="checkbox" disabled />
  A checkbox
</label>

Another solution I tried was to just not use inputs at all when not in edit mode. This is easy enough for a text input, but for a lot of other input types this seemed not ideal.

Ensuring that the original action is still understandable for a screen reader would be a new challenge - e.g for what was a radio group input, I'd want to make sure I properly convey "This option was between these radio options, and this one was picked".

This doesn't seem like an great solution - to manually try and convey the same information the input would give.

One could use aria-disabled="true", and manually prevent change of the input. But this has the same issue as just disabled - that it doesn't convey the right state "relevant, but uneditable".

<label>
  <input id="my-checkbox" type="checkbox" aria-disabled="true" />
  A checkbox
</label>

document.getElementById("my-checkbox")?.addEventListener("click", event => {
  event.preventDefault();
})

Upvotes: 0

Views: 314

Answers (1)

Norah
Norah

Reputation: 51

Won't save this as the final answer, as there might still be better solutions and there seems to be some general discussions ongoing about the intent of a disabled state.

However, for now - I've ended up going with the solution to manually prevent edit with aria-disabled.

The reason being that there is no concept of readonly for checkboxes and radios (even aria-readonly has spotty support), and the usual solution people would arrive at is to disable the input, so I figure keeping it in the tabbing order by using aria-disabled instead of disabled - is an okay compromise.

Some GitHub issues around the topic I found helpful in my decision:

Upvotes: 0

Related Questions