{"id":123,"date":"2020-08-25T23:24:15","date_gmt":"2020-08-25T23:24:15","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=123"},"modified":"2020-08-25T23:24:15","modified_gmt":"2020-08-25T23:24:15","slug":"short-note-on-content-visibility-hidden","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2020\/08\/25\/short-note-on-content-visibility-hidden\/","title":{"rendered":"Short note on content-visibility: hidden"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-129 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/08\/Capture.png\" alt=\"\" width=\"450\" height=\"191\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/08\/Capture.png 450w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2020\/08\/Capture-300x127.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><br \/>\n<a href=\"https:\/\/drafts.csswg.org\/css-contain\/#content-visibility\">content-visibility<\/a> is a new property defined in the <em>draft<\/em> <a href=\"https:\/\/drafts.csswg.org\/css-contain\/\">CSS Containment Module Level 2<\/a> specification. It has been implemented in <strong>Chrome 85<\/strong>, you can read about its <em>glory<\/em> in <a href=\"https:\/\/web.dev\/content-visibility\/\">content-visibility: the new CSS property that boosts your rendering performance<\/a><\/p>\n<p>What I am interested in is how it is exposed to screen readers and other assistive technology that make use of the content information represented in the browser accessibility tree. Firstly some explanation of what it is as defined in the spec.<\/p>\n<h2>CSS <a href=\"https:\/\/drafts.csswg.org\/css-contain\/#content-visibility\">content-visibility<\/a> property<\/h2>\n<blockquote><p>The content-visibility property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.<\/p><\/blockquote>\n<h3><a href=\"https:\/\/drafts.csswg.org\/css-contain\/#using-cv-hidden\">content-visibility:hidden<\/a><\/h3>\n<blockquote><p>The element <a id=\"ref-for-skips-its-contents\" href=\"https:\/\/drafts.csswg.org\/css-contain\/#skips-its-contents\" data-link-type=\"dfn\">skips its contents<\/a>.<\/p>\n<p>The skipped contents <em>must not<\/em> be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable.<\/p>\n<p><strong>Note:<\/strong> This is similar to giving the contents <a href=\"https:\/\/drafts.csswg.org\/css-display-3\/#propdef-display\">display: none<\/a>.<\/p>\n<p>content-visibility: hidden lays powerful restrictions onto an element, and so should be used with caution. It also enables some very useful scenarios, often improving on existing techniques.<\/p><\/blockquote>\n<h2 role=\"note\">Quick and dirty test content-visibility: hidden<\/h2>\n<p class=\"codepen\" style=\"height: 324px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"324\" data-theme-id=\"5390\" data-default-tab=\"html,result\" data-user=\"stevef\" data-slug-hash=\"zYqZRZd\" data-pen-title=\"content visability tests\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/zYqZRZd\"><br \/>\ncontent visability tests<\/a> by steve faulkner (<a href=\"https:\/\/codepen.io\/stevef\">@stevef<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Testing the effect of <a id=\"ref-for-propdef-content-visibility\u2466\" class=\"css\" href=\"https:\/\/drafts.csswg.org\/css-contain\/#propdef-content-visibility\" data-link-type=\"propdesc\">content-visibility: hidden<\/a> using a screen reader such as JAWS or NVDA and Chrome 85 turns up some interesting results.<\/p>\n<p>When the property is applied to an <code>img<\/code> or <code>p<\/code> element:<\/p>\n<pre>img, p {content-visibility: hidden}<\/pre>\n<p>The content is visually hidden, but in both JAWS and NVDA the <em>hidden<\/em> <code>&lt;img&gt;<\/code> is announced but the content of the <code>&lt;p&gt;<\/code> element is not. This has to do with how the <code>img<\/code> and the <code>p<\/code> element content are represented in the <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2015\/01\/the-browser-accessibility-tree\/\">browser accessibility tree<\/a>: The <code>img<\/code> is exposed in the accessibility tree with the <code>alt<\/code> text as the <a href=\"https:\/\/www.w3.org\/TR\/accname-1.1\/#dfn-accessible-name\">accessible name<\/a>. The content of the <code>p<\/code> element is not present in the accessibility tree<\/p>\n<p>When the property is applied to a <code>button<\/code>:<\/p>\n<pre>button {content-visibility: hidden}<\/pre>\n<ul>\n<li>the <code>button<\/code> is still rendered but its child text is not.<\/li>\n<li>While the <code>button<\/code> is not included in the focus order, it can be activated using the mouse.<\/li>\n<li>It is announced, including the hidden text label and can be activated using the keyboard by screen readers.<\/li>\n<li>If the same <code>button<\/code> is the child of a <code>div<\/code> that has <code>content-visibility: hidden<\/code> it is visibly hidden, and also hidden from screen readers i.e. it is absent from the accessibility tree.<\/li>\n<\/ul>\n<h2>Not supposed to be visible to screen readers<\/h2>\n<p>From reading the spec section on <a href=\"https:\/\/drafts.csswg.org\/css-contain\/#using-cv-hidden\">Using content-visibility: hidden<\/a>, it states that when hidden the content should not be available to screen readers. Currently this is <strong>only<\/strong> partially true.<\/p>\n<blockquote><p><strong>They\u2019re also not visible to screen readers<\/strong><\/p><\/blockquote>\n<h2>Conclusion<\/h2>\n<p>Its an early implementation and a draft spec, so bugs in the implementation are expected, but if the property is supposed to be similar to <code>display:none<\/code> then no content with the property set should be available to screen readers. This may mean it is removed from the accessibility tree or a flag is set to indicate it is not meant to be rendered aurally.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>content-visibility is a new property defined in the draft CSS Containment Module Level 2 specification. It has been implemented in Chrome 85, you can read about its glory in content-visibility: the new CSS property that boosts your rendering performance What I am interested in is how it is exposed to screen readers and other assistive [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-123","post","type-post","status-publish","format-standard","hentry","category-css-accessibility","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":9,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":133,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/123\/revisions\/133"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}