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 user settings page – and I want to display all of their settings, but only allow them to modify these in an edit mode.

When it’s not in edit mode – how should these settings be rendered?

An input with the disabled property is removed from the tabbing order.

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

A readonly input still allows for the input to be changed (and isn’t announced as readonly for me in VoiceOver).

<label>
  <input type="checkbox" readonly />
  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.

One thing is that I’d need to use a lot of decorative elements and a lot more CSS to ensure that the different elements still look like the input they were in edit mode.

And then to make sure it’s still understandable for a screen reader – e.g for a radio group 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.

My best solution so far is to use aria-disabled="true", and to manually prevent change of the input. This keeps the input in the tab order to easily read through all the inputs, while announcing they’re disabled.

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

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

But I’m not sure this is recommended?