ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: disabled checkbox should not be hidden from screen readers

Open mastergogo opened this issue 1 year ago • 1 comments


Ionic Framework Version

  • [ ] v4.x
  • [X] v5.x
  • [X] v6.x
  • [ ] Nightly

Current Behavior

On a disable ion-checkbox, ionic is applying an aria-hidden attribute, which is hiding the element from the DOM tree, therefore screen readers such as TalkBack and Voiceover are skipping the entire element.

Expected Behavior

The disable ion-checkbox should not be hidden from the screen readers and should announce the disable properties of ion-checkbox such as "dim" for voiceover and "disabled" for TalkBack.

Steps to Reproduce

Create a simple disable ion-checkbox and navigate using the screen reader both Talk back and Voiceover and notice that how screen reader will skip and not announce the disable property of ion-checkbox, it can be misleading for the SR user.

Code Reproduction URL

Ionic Info


Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.2.1


Capacitor CLI : 4.0.1 @capacitor/android : not installed @capacitor/core : 4.0.1 @capacitor/ios : not installed


cordova-res : not installed globally native-run : 1.6.0


NodeJS : v16.14.1 (/usr/local/bin/node) npm : 8.5.0 OS : macOS Monterey

Additional Information

Ionic should not apply aria-hidden to the element and let is behave like a native disable element which will provide the semantic meaning and state of the element to the user. Let me know if more info is needed from my side.

mastergogo avatar Aug 08 '22 21:08 mastergogo

Thanks for the issue. I can confirm that this is a bug. It looks like this behavior was added in The behavior was added in order to account for iOS/VoiceOver.

liamdebeasi avatar Aug 09 '22 21:08 liamdebeasi