1

I have a use case where I want to disable some radio buttons, but there are ways to go back an re-enable this radio buttons. If I use the disabled attribute then screen readers will skip over the field and be unaware of important information.

I'm looking for an accessible solution that would continue to work for standard users, but also be compatible across most screen readers as well.

bigtunacan
  • 4,873
  • 8
  • 40
  • 73

1 Answers1

3

Only some few screenreaders skip disabled radio buttons as though there were not there (eg. Jaws in Firefox for instance). Other one will announce the item but state that it's disabled. Of course, for the latter, the element will never gain focus but will be announced in reading mode.

If you want to handle all screenreaders and announce unselectable options, you can replace them with plain text with appropriate indications:

Selectable

 <input type="radio" name="example value="1" />

Unselectable :

 <div>1 (disabled option, you should select XXX to enable this option)</div>
Adam
  • 17,838
  • 32
  • 54
  • This is a great suggestion. If the O.P. uses Bootstrap 3, there is the [`sr-only` class](https://stackoverflow.com/q/19758598/2729937), to only display an element for screen readers. – Ismael Miguel Oct 04 '17 at 08:00
  • A large portion of our users uses Jaws or NVDA, which have both exhibited this skipping behavior. I think replacing the radio with plain text would be a workable solution for our screen reader users, so I like this idea. The downside is that for our sighted users this may be a bit unusual. It would be ideal if we could detect if a screen reader was in use and then show the text element for screen reader users and show the disabled radio button to other users. – bigtunacan Oct 04 '17 at 15:00