如何以屏幕阅读器仍会阅读文本并向用户指示已禁用的方式“禁用”单选按钮？

Question

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.

Answer 1

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>