Css visibility vs display4/19/2023 ![]() ![]() If you need to visually hide something but keep it accessible, use the visually hidden CSS declaration group. Valid cases: visual content void of meaning, icons. ![]() If you need to hide something from the accessibility tree but keep it visible, use aria-hidden="true". Valid cases: show/hide widget, offscreen navigation, closed dialog. If you need to hide something both visually and from the accessibility tree, use display: none or the hidden HTML attribute. Remember that a clearer visual interface with more explicit content benefits everyone. The more in sync they are, the better for everyone. Generally speaking, you want to avoid having too many discrepancies between the visual content, and the underlying content exposed to the accessibility layer. Verdict: □ Poor support, poorly implemented, don’t. This is not necessarily intended behaviour though, and for that reason it is recommended not to use that declaration on landmarks. The content-visibility CSS property was introduced as a way to improve performance by hinting the browser (Chrome, as of writing) to skip rendering of a certain element until it is within the viewport.Ĭontent made hidden with content-visibility: hidden will effectively be absent from the accessibility tree entirely (just like with display: none). The content-visibility: hidden declaration Verdict: □ Unclear and unexpected, risky from a SEO perspective, don’t. However, this technique are usually considered quite fishy and could cause SEO penalties. Resizing an element to a 0x0 box with the width and height CSS properties and hiding its overflow will cause the element not to appear on screen and as far as I know all screen readers will skip it as inaccessible. Verdict: ✋ Restrict for visual animations purposes. The content remains accessible to screen readers though. The transform: scale(0) CSS declaration visually hides an element, but the place it takes is not freed, just like visibility: hidden, opacity: 0 and clip-path: circle(0). Verdict: ✋ Shady and inconsistent, so don’t use it except maybe for visual animations purposes. For that reason, it is recommended not to use these declarations to consistently hide content. Some will consider the content inaccessible and skip it, and some will still read it. Whether the content remains accessible depends on assistive technologies. The opacity: 0 and clip-path: circle(0) CSS declarations visually hide an element, but the place it takes is not freed, just like visibility: hidden. The opacity: 0, clip-path: circle(0) declarations Verdict: □ Good when display: none is not an option and the layout permits it. The space it takes remains empty and surrounding content doesn’t reflow in its place.įrom the accessibility perspective, the declaration behave like display: none and the content is removed entirely and not accessible. ![]() The visibility: hidden CSS declaration visually hides an element without affecting the layout. Verdict: □ Great to hide something from both assistive technologies and screens. Accessible: no (except via aria-describedby and aria-labelledby).For instance, if a field references a text node via aria-describedby, this content can safely be hidden (with hidden, display: none or even aria-hidden="true") so that it cannot be discovered normally, but still be announced when the field is focused. This can be handy to avoid double-vocalization. Interesting fact shared by Aurélien Levy: removed content with these methods can still be vocalized when referenced via aria-describedby or aria-labelledby. It comes in very handy to provide more context to screen readers when the visual layout is enough with it. This combination of CSS declarations hides an element from the page, but keeps it accessible for screen readers. ![]() In this article, I want to discuss all the ways to hide something, be it through HTML or CSS, and when to use which. I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries. I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers. Edit February 25th, 2021: Vincent Valentin pointed out on Twitter that he has a very detailed tabular version on CodePen. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |