{"id":618,"date":"2021-11-04T22:49:05","date_gmt":"2021-11-04T22:49:05","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=618"},"modified":"2021-11-04T22:49:05","modified_gmt":"2021-11-04T22:49:05","slug":"super-short-note-on-css-text-again","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/11\/04\/super-short-note-on-css-text-again\/","title":{"rendered":"Super short note on CSS text (again)"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-626\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/showdemon-1.jpg\" alt=\"on a t-shirt: text - 2.4.7 Focus Visible, pic of doctor S smiling coquettishly. text - SHOW THYSELF DEMON,pic of doctor S smiling coquettishly with a halo of many colours. \" width=\"618\" height=\"268\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/showdemon-1.jpg 618w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/showdemon-1-300x130.jpg 300w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/p>\n<h2>Why does CSS text get announced by screen readers?<\/h2>\n<p>Because it&#8217;s included <strong>as text<\/strong> in the <a>accessibility tree<\/a> in <em>modern browsers<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-619\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/csstext.png\" alt=\"aViewer object inspection tool displaying the iAccessible2 properties for the CSS text: name=Neon Meat Dream of an Octofish, role=text\" width=\"977\" height=\"300\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/csstext.png 977w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/csstext-300x92.png 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/csstext-768x236.png 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/p>\n<p class=\"codepen\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"600\" data-default-tab=\"html,result\" data-slug-hash=\"EqVmaQ\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/EqVmaQ\"><br \/>\nCSS text example<\/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:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<blockquote><p><strong>Accessibility Tree<\/strong><\/p>\n<p>Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.<\/p>\n<p><a href=\"https:\/\/w3c.github.io\/html-aam\/#dfn-accessibility-tree\">source<\/a><\/p><\/blockquote>\n<h2>Why is [<em>insert some symbol or punctuation mark here<\/em>] not announced in CSS generated text?<\/h2>\n<p>It&#8217;s not because it&#8217;s CSS text, it&#8217;s because each screen reader has preferences for announcing symbols and punctuation, which may preclude the content being announced in the context being used.<\/p>\n<p class=\"codepen\" style=\"height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"500\" data-slug-hash=\"aevwzr\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/aevwzr\"><br \/>\nCSS text example ?<\/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:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>For example, NVDA announces question marks at the end of a sentence, but otherwise ignores them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-624 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/symbol.png\" alt=\"NVDA symbol pronunciation dialog.\" width=\"554\" height=\"628\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/symbol.png 554w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/symbol-265x300.png 265w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/p>\n<h3>Further reading<\/h3>\n<ul>\n<li><a href=\"https:\/\/tink.uk\/accessibility-support-for-css-generated-content\/\">Accessibility support for CSS generated content<\/a><\/li>\n<li><a href=\"https:\/\/www.deque.com\/blog\/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols\/#math\">Why Don\u2019t Screen Readers Always Read What\u2019s on the Screen? Part 1: Punctuation and Typographic Symbols<\/a>. <strong>Note:<\/strong> somewhat stale so results are not to be trusted, but good overview.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Why does CSS text get announced by screen readers? Because it&#8217;s included as text in the accessibility tree in modern browsers. See the Pen CSS text example by steve faulkner (@stevef) on CodePen. Accessibility Tree Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents [&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-618","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\/618","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=618"}],"version-history":[{"count":5,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/618\/revisions"}],"predecessor-version":[{"id":627,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/618\/revisions\/627"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}