Also, the example there of making things hidden visually but available to assistive tech might cause some problems for Android users or those using VoiceOver. Setting the width to 1px can lead to smushed text being read out: medium.com/@jessebeach/beware-smus... . The fix is to add white-space: nowrap; . Voiceover also has anothe bug with elements that use absolute positioning like this too: medium.com/@schofeld/apple-voice-o... , and the suggested fix is to use either left or right depending on the content order (which itself will be based on the direction of the language; we can't assume left-to-right always.)
Finally, if you use this technique to hide interactive elements (e.g. checkboxes) then you should only apply opacity:0;position:absolute; and give the element a width and height to match the content that displays in its stead. This is to avoid a bug with Android where a blind user can discover elements on the screen by running their fingers over things and then double-tap to interact with them. If the checkbox is hidden off-screen, it can't be found by a blind person in this way.
What about usage of the
hiddenattribute in HTML?Also, the example there of making things hidden visually but available to assistive tech might cause some problems for Android users or those using VoiceOver. Setting the width to
1pxcan lead to smushed text being read out: medium.com/@jessebeach/beware-smus... . The fix is to addwhite-space: nowrap;. Voiceover also has anothe bug with elements that use absolute positioning like this too: medium.com/@schofeld/apple-voice-o... , and the suggested fix is to use eitherleftorrightdepending on the content order (which itself will be based on the direction of the language; we can't assume left-to-right always.)Finally, if you use this technique to hide interactive elements (e.g. checkboxes) then you should only apply
opacity:0;position:absolute;and give the element a width and height to match the content that displays in its stead. This is to avoid a bug with Android where a blind user can discover elements on the screen by running their fingers over things and then double-tap to interact with them. If the checkbox is hidden off-screen, it can't be found by a blind person in this way.Thank you for your contribution. I'll definitely read the linked articles.
In addition, you have a typo on line 5 of the second paragraph:
Classic, thanks!