{"id":1107,"date":"2024-05-27T16:54:03","date_gmt":"2024-05-27T16:54:03","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1107"},"modified":"2024-05-28T22:32:36","modified_gmt":"2024-05-28T22:32:36","slug":"alt-left","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2024\/05\/27\/alt-left\/","title":{"rendered":"ALT LEFT"},"content":{"rendered":"<p style=\"padding-left: 40px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1123 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-171524.png\" alt=\"a deeply unsettling figure, one that seems to belong more to the realm of nightmares than reality. Its skin is smooth and pale, a stark, almost ghostly canvas that draws attention to its grotesquely exaggerated features. The eyes are vast, black voids, round and all-consuming, evoking a sense of emptiness and dread. These hollow eyes, devoid of any life or light, contribute significantly to the figure's eerie presence. The nose is perhaps even more bizarre, composed of three nostrils arranged in a triangular configuration, an unnatural deviation from the human norm that adds to the overall disquieting effect. Below this strange nose, the mouth gapes wide, a dark, cavernous hole that mirrors the eyes in its blackness. This gaping maw, combined with the hollow eyes, creates a visage that is both haunting and alien. The overall expression, if it can be called that, is one of perpetual shock or terror, frozen in an eternal scream. This creature, with its surreal and distorted features, stands as a representation of the bizarre and the macabre, evoking a visceral reaction of unease and fascination.\" width=\"639\" height=\"616\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-171524.png 639w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-171524-300x289.png 300w\" sizes=\"auto, (max-width: 639px) 100vw, 639px\" \/><\/p>\n<p>AI can help by providing mostly accurate descriptions of images on web pages. This can be especially helpful when the image has not been provided with a text alternative, but is visible on the page.<\/p>\n<p>For example it is marked up with an empty <code>alt<\/code> no <code>alt<\/code> or <code>aria-hidden=true<\/code> or <code>role=presentation<\/code><\/p>\n<p>A problem is that although visible on the page such images are not identified or discoverable for screen reader users.<\/p>\n<h2>Typical markup examples:<\/h2>\n<pre>&lt;img src=\"poot.jpg\" <mark>alt=\"\"<\/mark>&gt;\r\n\r\n&lt;img src=\"poot.jpg\" <mark>alt<\/mark>&gt;\r\n\r\n&lt;img src=\"poot.jpg\"&gt;\r\n\r\n&lt;svg <mark>aria-hidden=\"true\"<\/mark>&gt;\r\n\r\n&lt;svg role=\"img\"&gt;\r\n\r\n&lt;img <mark>role=\"presentation\"<\/mark> src=\"poot.jpg\"&gt;\r\n\r\n&lt;div <mark>role=\"img\"<\/mark>&gt;\r\n\r\n&lt;div role=\"img\" <mark>aria-hidden=\"true\"<\/mark>&gt;\r\n<\/pre>\n<h2>Why do developers use this code?<\/h2>\n<p>Developers use such code as it is prescribed in WCAG and other sources of accessible coding advice that <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decorative\/\">decorative images<\/a> should be hidden from users of screen readers.<\/p>\n<h2>Why are they not discoverable?<\/h2>\n<p>When images are hidden (to screen reader users) using one of methods described above, most images are removed from the browser accessibility tree. An <code>&lt;img&gt;<\/code> without an <code>alt<\/code> attribute is a special case, in that it is still included in the accessibility tree but is hidden from users by a user preference setting:<\/p>\n<p>For example the JAWS setting allows users to include <em>all images<\/em> or <em>labeled images<\/em> or <em>no images<\/em>. The default is <em>labeled images<\/em>. Note <em>All images<\/em> includes all images available in in the accessibility tree, not all images <strong>visible on the page<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1116 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-142558.png\" alt=\"JAWS include images settings: 3 radio buttons. 1 All images, 2 Labeled images, 3 no images\" width=\"238\" height=\"93\" \/><\/p>\n<h2>Try it yourself<\/h2>\n<p>How many of the following images are included in the browser accessibility tree?<\/p>\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-default-tab=\"result\" data-slug-hash=\"YzbWKXK\" data-pen-title=\"ALT LEFT tests\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/YzbWKXK\"><br \/>\nALT LEFT 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:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Of the 5 visible images, only 1 is included in the accessibility tree. The image with no <code>alt<\/code> and no attributes used that remove the image from the accessibility tree:<\/p>\n<pre> &lt;img src=\"BonnyJonny.png\"&gt;<\/pre>\n<p>Reviewing the <a href=\"https:\/\/developer.chrome.com\/blog\/full-accessibility-tree\">accessibility tree<\/a> in the Chrome browser Developer tools confirms this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1118 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-144006.png\" alt=\"one img is represented in the accessibility tree.\" width=\"548\" height=\"143\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-144006.png 548w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-144006-300x78.png 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/p>\n<p>The effect of this is that if an image is not provided with a text alternative or is marked as <em>decorative\u00a0<\/em>using the current methods it is not available to AI image description tools that rely on the accessibility tree to construct a view of a page for screen readers. This is evident in the <a href=\"https:\/\/vispero.com\/freedom-scientific-unveils-revolutionary-picturesmart-ai-for-jaws\/\">JAWS Picture Smart<\/a> image description tool. With default settings it does not recognise there are any images on the <a href=\"https:\/\/cdpn.io\/pen\/debug\/YzbWKXK\">test page<\/a>.<\/p>\n<h2>What to do?<\/h2>\n<p>In the now, developers should continue to provide what they think is an appropriate alt for images, including cases where the image is marked as decorative and effectively hidden from users.<\/p>\n<p>For screen reader developers, it is suggested they ensure that any AI image description tools they implement recognise and make available for description all images on a page, including those marked as decorative.<\/p>\n<h2>How to do?<\/h2>\n<p>A possible method is to modify the HTML DOM of the page to unhide visible images so that they are included in the accessibility tree.<\/p>\n<p>As a proof of concept I created a <a href=\"https:\/\/cdpn.io\/pen\/debug\/BaeQzex\">Show Decorative bookmarklet<\/a> that walks through the DOM, looking for hidden visible images and updating their code so that they are available in the accessibility tree.<\/p>\n<p>If the bookmarklet is run on a <a href=\"https:\/\/cdpn.io\/pen\/debug\/YzbWKXK\">test page<\/a> with visible images that are marked as decorative, the images will now be in the accessibility tree:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1122 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-170350.png\" alt=\"accessibility tree view of the test page showing 5 images with an a numbered aria-label.\" width=\"453\" height=\"274\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-170350.png 453w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-27-170350-300x181.png 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/p>\n<h2>Further reading<\/h2>\n<p><a href=\"https:\/\/html5accessibility.com\/stuff\/2022\/01\/10\/alt-tag-emptiness\/\">ALT TAG EMPTINESS<\/a><\/p>\n<h2>Further listening<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/MAVmWEMhxCM?si=rO7OOlgQn94qIEeV\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI can help by providing mostly accurate descriptions of images on web pages. This can be especially helpful when the image has not been provided with a text alternative, but is visible on the page. For example it is marked up with an empty alt no alt or aria-hidden=true or role=presentation A problem is that [&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-1107","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1107","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=1107"}],"version-history":[{"count":19,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1107\/revisions"}],"predecessor-version":[{"id":1133,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1107\/revisions\/1133"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=1107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=1107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=1107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}