{"id":1966,"date":"2026-04-07T13:47:21","date_gmt":"2026-04-07T13:47:21","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1966"},"modified":"2026-04-07T13:47:21","modified_gmt":"2026-04-07T13:47:21","slug":"old-advice-hiding-content-has-no-effect-on-accessible-name-or-description-calculation","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2026\/04\/07\/old-advice-hiding-content-has-no-effect-on-accessible-name-or-description-calculation\/","title":{"rendered":"old advice &#8211; Hiding Content Has No Effect on Accessible Name or Description Calculation"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1972\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2026\/04\/2023-06-11-2-1024x887.jpg\" alt=\"me, standing in front of the white house flashing a live long and prosper hand gesture\" width=\"580\" height=\"502\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2026\/04\/2023-06-11-2-1024x887.jpg 1024w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2026\/04\/2023-06-11-2-300x260.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2026\/04\/2023-06-11-2-768x665.jpg 768w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2026\/04\/2023-06-11-2.jpg 1200w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/p>\n<p>This information (I wrote) originally appeared in <a href=\"https:\/\/www.w3.org\/TR\/2018\/WD-using-aria-20180927\">Using ARIA<\/a> I am re-upping and updating it here as the <a href=\"https:\/\/w3c.github.io\/using-aria\/\">Using ARIA<\/a> has now been updated and the content removed.<\/p>\n<h2>Beware: Hiding Content Has No Effect on Accessible Name or Description Calculation<\/h2>\n<p>By design, hiding the content (using CSS <code>display:none<\/code>\u00a0or\u00a0<code>visibility:hidden<\/code>\u00a0or the HTML\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/interaction.html#the-hidden-attribute\">hidden attribute<\/a>) of the element(s) referenced by\u00a0<a href=\"https:\/\/w3c.github.io\/aria\/#aria-labelledby\">aria-labelledby<\/a>\u00a0and\u00a0<a href=\"https:\/\/w3c.github.io\/aria\/#aria-describedby\">aria-describedby<\/a>\u00a0does not stop the content from being used to provide the name\/description.<\/p>\n<blockquote><p>By default,\u00a0<a class=\"termref internalDFN\" href=\"https:\/\/w3c.github.io\/accname\/#dfn-assistive-technologies\">assistive technologies<\/a>\u00a0do not relay hidden information, but an author can explicitly override that and include hidden text as part of the\u00a0<a class=\"termref internalDFN\" href=\"https:\/\/w3c.github.io\/accname\/#dfn-accessible-name\">accessible name<\/a>\u00a0or\u00a0<a class=\"termref internalDFN\" href=\"https:\/\/w3c.github.io\/accname\/#dfn-accessible-description\">accessible description<\/a>\u00a0by using\u00a0<code>aria-labelledby<\/code>\u00a0or\u00a0<code>aria-describedby<\/code>.<br \/>\n<cite>&#8211;\u00a0<a href=\"https:\/\/w3c.github.io\/accname\/#mapping_additional_nd\">Accessible Name and Description: Computation and\u00a0<abbr title=\"Application Programming Interfaces\">API<\/abbr> Mappings 1.2<\/a><\/cite><\/p><\/blockquote>\n<p>In the following example the description will be available to assistive technology users in both states:<\/p>\n<h3><strong>Non-error state:\u00a0<\/strong>message visually hidden<\/h3>\n<pre>&lt;label&gt;Name &lt;input type=\"text\" \r\naria-describedby=\"error-message\"&gt;&lt;\/label&gt;\r\n&lt;span id=\"error-message\" <mark>style=\"display:none\"<\/mark>&gt;\r\nYou have provided an incorrect name&lt;\/span&gt;<\/pre>\n<p><strong>Note:<\/strong>\u00a0addition of\u00a0<code>aria-hidden=true<\/code>\u00a0to the referenced element makes no difference:<\/p>\n<pre>&lt;span id=\"error-message\" style=\"display:none\" <mark>aria-hidden=\"true\"<\/mark>&gt;\r\n You have provided an incorrect name&lt;\/span&gt;<\/pre>\n<h3><strong>Error state:<\/strong>\u00a0message visible<\/h3>\n<pre>&lt;span id=\"error-message\" <mark>style=\"display:inline\"<\/mark>&gt;\r\nYou have provided an incorrect name&lt;\/span&gt;<\/pre>\n<h3>Methods to Provide Context Sensitive Name\/Description Text<\/h3>\n<p>If you want to associate context sensitive text, such as an error message, you can (appears that technique 2 is most robust):<\/p>\n<ul>\n<li>Add the referenced element to the DOM when the error state occurs.<\/li>\n<li>Add the error text as child of the referenced element in the DOM when the error state occurs.<\/li>\n<li>Add the <code>id<\/code> reference in the DOM to the\u00a0<code>aria-labelledby\/aria-describedby<\/code>\u00a0attribute, when the error state occurs.<\/li>\n<\/ul>\n<h3>try it yourself<\/h3>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-pen-title=\"ARIA error message patterns\" data-default-tab=\"result\" data-slug-hash=\"GgjBbKw\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/GgjBbKw\"><br \/>\nARIA error message patterns<\/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:\/\/public.codepenassets.com\/embed\/index.js\"><\/script><\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/7QgzYGFVPi4?si=bfMoYk2ckRwR1TE8\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<details>\n<summary>Lyrics<\/summary>\n<pre>They told you in school about freedom\r\nBut when you try to be free they never let ya\r\nThey said \"it's easy, nothing to it\"\r\nAnd now the army's out to get ya\r\nSixty nine America in terminal stasis\r\nThe air's so thick it's like drowning in molasses\r\nI'm sick and tired of paying these dues\r\nAnd I'm finally getting hip to the American ruse\r\n\r\nI learned to say the pledge of allegiance\r\nBefore they beat me bloody down at the station\r\nThey haven't got a word out of me since\r\nI got a billion years probation\r\n\r\nSixty nine America in terminal stasis\r\nThe air's so thick it's like drowning in molasses\r\nI'm sick and tired of paying these dues\r\nAnd I'm sick to my guts of the American ruse\r\nPhony stars, oh no! crummy cars, oh no!\r\nCheap guitars, oh no! Joe's primitive bar... nah!\r\n\r\nRock'em back, Sonic!\r\nThe way they pull you over it's suspicious\r\nYeah, for something that just ain't your fault\r\nIf you complain they're gonna get vicious\r\nKick in the teeth and charge you with assault\r\nYeah, but I can see the chickens coming home to roost\r\nYoung people everywhere are gonna cook their goose\r\nLots of kids are working to get rid of these blues\r\nCause everybody's sick of the American ruse\r\n\r\nWell well well, take a look around!\r\nWell well well, take a look around!\r\nWell well well, take a look around!\r\nWell well well, take a look around!\r\nWell well well, take a look around!\r\n<\/pre>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>This information (I wrote) originally appeared in Using ARIA I am re-upping and updating it here as the Using ARIA has now been updated and the content removed. Beware: Hiding Content Has No Effect on Accessible Name or Description Calculation By design, hiding the content (using CSS display:none\u00a0or\u00a0visibility:hidden\u00a0or the HTML\u00a0hidden attribute) of the element(s) referenced [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1966","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1966","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=1966"}],"version-history":[{"count":11,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1966\/revisions"}],"predecessor-version":[{"id":1978,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1966\/revisions\/1978"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=1966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=1966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=1966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}