DEV Community

Discussion on: How to hide Web page elements

Collapse
ashleyjsheridan profile image
Ashley Sheridan

What about usage of the hidden attribute 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 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.

Collapse
ziizium profile image
Habdul Hazeez Author

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:

Voiceover also has anothe bug

Collapse
ashleyjsheridan profile image
Ashley Sheridan

Classic, thanks!