{"id":629,"date":"2022-01-10T10:36:34","date_gmt":"2022-01-10T10:36:34","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=629"},"modified":"2024-12-20T14:56:22","modified_gmt":"2024-12-20T14:56:22","slug":"alt-tag-emptiness","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2022\/01\/10\/alt-tag-emptiness\/","title":{"rendered":"ALT TAG EMPTINESS"},"content":{"rendered":"<figure><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-631 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/EMPTY.jpg\" alt=\"'Say ALT TAG AGAIN' says Adrian, replete with mouse cursor tattoo below his eye, looking menacingly out of a mug. White Mug, yellow inside and handle.\" width=\"372\" height=\"414\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/EMPTY.jpg 372w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/11\/EMPTY-270x300.jpg 270w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><figcaption><a href=\"https:\/\/twitter.com\/aardrian\">Adrian<\/a> is displeased, as he dislikes people referring to a <code>HTML<\/code> <strong>attribute<\/strong> as something it <strong><em>clearly is not<\/em><\/strong><\/figcaption><\/figure>\n<h2><code>alt=\"\"<\/code> empty, null<\/h2>\n<pre>&lt;img src=\"decor.jpg\" <mark>alt=\"\"<\/mark>&gt;<\/pre>\n<p>With the <code>alt<\/code> <strong>attribute<\/strong> you can provide a <a href=\"https:\/\/w3c.github.io\/wcag\/guidelines\/22\/#dfn-text-alternative\">text alternative<\/a> to represent the meaning of the visual content in an <a href=\"https:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/img-alt.html\"><code>&lt;img&gt;<\/code><\/a> in the context of its use or to signify the img can be safely ignored.<\/p>\n<p class=\"note\">In a context where the image is considered decorative or contains information provided in text elsewhere in the same context, the <code>alt<\/code> attribute may be empty.<\/p>\n<h3>equivalents <em>can be confusing<\/em><\/h3>\n<p>In modern browsers (except Firefox):<\/p>\n<p><code>alt=\"\"<\/code> <a href=\"https:\/\/www.w3.org\/TR\/html-aam-1.0\/#mapping-html-to-accessibility-apis\">is mapped to<\/a> <code>role=\"presentation|none\"<\/code><\/p>\n<p><code>alt=\"\"<\/code> on an <code>&lt;img&gt;<\/code> has the same effect as:<\/p>\n<ul>\n<li><code>alt<\/code><\/li>\n<li><code>role=\"presentation\"<\/code><\/li>\n<li><code>aria-hidden=\"true\"<\/code><\/li>\n<\/ul>\n<p>Which means that the <code>img<\/code> element is removed from the accessibility tree, (except in Firefox where <code>alt\/alt=\"\"<\/code> results in the <code>img<\/code> being present in the accessibility tree with an accessible name <code>=\"\"<\/code>)<\/p>\n<p>no <code>alt<\/code> is equivalent to<\/p>\n<ul>\n<li><code>aria-label=\"\"<\/code><\/li>\n<li><code>aria-labelledby=\"\"<\/code><\/li>\n<li><code>title=\"\"<\/code><\/li>\n<\/ul>\n<p>Which means that the <code>img<\/code> element is present in the accessibility tree but has an accessible name <code>=\"\"<\/code> (except for Firefox where the accessible <code>name=null<\/code> for <code>alt<\/code>, <code>aria-label=\"\"<\/code>, and <code>aria-labelledby=\"\"<\/code>)<\/p>\n<h2>What&#8217;s it all mean?<\/h2>\n<p>If you have an <code>img<\/code> that you consider decorative all of the following are methods that will have the desired effect of hiding the <code>img<\/code> from screen readers: <code>alt<\/code>, <code>alt=\"\"<\/code>, <code>role=\"presentation|none\"<\/code>, and <code>aria-hidden=\"true\"<\/code> and will conform with <a href=\"https:\/\/www.w3.org\/TR\/WCAG\/#non-text-content\">WCAG Success Criterion 1.1.1 Non-text Content<\/a>:<\/p>\n<blockquote><p>Decoration, Formatting, Invisible<\/p>\n<p>If non-text content is <a href=\"https:\/\/www.w3.org\/TR\/WCAG\/#dfn-pure-decoration\">pure decoration<\/a>, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by <a href=\"https:\/\/www.w3.org\/TR\/WCAG\/#dfn-assistive-technologies\">assistive technology<\/a>.<\/p><\/blockquote>\n<p>while no <code>alt<\/code>, <code>aria-label=\"\"<\/code>, <code>aria-labelledby=\"\"<\/code>, <code>title=\"\"<\/code> <strong>will not.<\/strong><\/p>\n<p class=\"note\">no <code>alt<\/code>, <code>aria-label=\"\"<\/code>, <code>aria-labelledby=\"\"<\/code>, <code>title=\"\"<\/code> are not sufficient methods to conform to WCAG Success Criterion 1.1.1 Non-text Content requirements for decorative images.<\/p>\n<p class=\"note\"><code>alt=\"\"<\/code> and <code>alt<\/code> are the only methods that conform with the <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/images.html#guidance-for-conformance-checkers\">requirements<\/a> of the HTML spec.<\/p>\n<h2 id=\"where\">where <code>alt<\/code> works<\/h2>\n<p>The <code>alt<\/code> attribute provides an <a href=\"https:\/\/www.w3.org\/TR\/accname\/#dfn-accessible-name\">accessible name<\/a> on <code>&lt;img&gt;<\/code>, <code>&lt;input type=\"image\"&gt;<\/code> and <code>&lt;area&gt;<\/code> elements. It <strong>does nothing<\/strong> when used with or without <code>role=\"img\"<\/code>, on any other elements.<\/p>\n<pre>&lt;div role=\"img\" alt=\"\"&gt;&lt;\/div&gt;<\/pre>\n<p class=\"note\"><code>alt<\/code> <strong>does nothing<\/strong>, with or <em>without<\/em> <code>role=\"img\"<\/code>, on any other elements.<\/p>\n<h2>when is an image decorative?<\/h2>\n<p>Difficult question, the subject of much debate, sometimes accompanied by third party <a href=\"https:\/\/www.google.com\/search?client=firefox-b-d&amp;q=anecdata\"><em>anecdata<\/em><\/a> from a blind person who may want all images described or some or none&#8230;<\/p>\n<p>Some resources which may be helpful:<\/p>\n<ul>\n<li><a href=\"https:\/\/tink.uk\/text-descriptions-emotion-rich-images\/\">Text descriptions and emotion rich images<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/2016\/REC-html51-20161101\/semantics-embedded-content.html#a-purely-decorative-image-that-doesnt-add-any-information\">A purely decorative image that doesn\u2019t add any information<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/2016\/REC-html51-20161101\/semantics-embedded-content.html#an-image-not-intended-for-the-user\">An image not intended for the user<\/a><\/li>\n<li id=\"images-that-enhance-the-themes-or-subject-matter-of-the-page-content\"><a href=\"https:\/\/www.w3.org\/TR\/2016\/REC-html51-20161101\/semantics-embedded-content.html#images-that-enhance-the-themes-or-subject-matter-of-the-page-content\">Images that enhance the themes or subject matter of the page content<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">An alt Decision Tree<\/a><\/li>\n<\/ul>\n<h2>test cases<\/h2>\n<p>If you are keen, you can run through the test cases with your favourite browser\/screen reader<\/p>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/stevef\/pen\/QWMPQEW\">ALT TAG EMPTINESS<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/stevef\/pen\/VwMwarj\">ALT TAG EMPTINESS with links<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/stevef\/pen\/jOGvEJO\">ALT TAG EMPTINESS with links and text<\/a><\/li>\n<li><a href=\"https:\/\/codepen.io\/stevef\/pen\/poWOvMj\">ALT TAG EMPTINESS with links and aria-label<\/a><\/li>\n<\/ul>\n<h2>Motorcycle Emptiness<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/gavcjNniIvk\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<details open=\"\">\n<summary>Motorcycle emptiness &#8211; Lyrics<\/summary>\n<pre>Culture sucks downwards\r\nItemize loathing and feed yourself smiles\r\nOrganize your safe tribal war\r\nHurt, maim, kill and enslave the ghetto\r\nEach day living out a lie\r\nLife sold cheaply forever, ever, ever\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nLife lies a slow suicide\r\nOrthodox dreams and symbolic myths\r\nFrom feudal serf to spender\r\nThis wonderful world of purchase power\r\nJust like lungs sucking on air\r\nSurvival's natural as sorrow, sorrow, sorrow\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nAll we want from you are the kicks you've given us\r\nAll we want from you are the kicks you've given us\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nDrive away and it's the same\r\nEverywhere death row, everyone's a victim\r\nYour joys are counterfeit\r\nThis happiness corrupt political shit\r\nLiving life like a comatose\r\nEgo-loaded and swallow, swallow, swallow\r\nUnder neon loneliness\r\nMotorcycle emptiness\r\nUnder neon loneliness\r\nEverlasting nothingness\r\nSource: Musixmatch\r\nSongwriters: Bradfield James Dean \/ Moore Sean Anthony \r\n\/ Edwards Richard \/ Jones Nicholas\r\n<\/pre>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Adrian is displeased, as he dislikes people referring to a HTML attribute as something it clearly is not alt=&#8221;&#8221; empty, null &lt;img src=&#8221;decor.jpg&#8221; alt=&#8221;&#8221;&gt; With the alt attribute you can provide a text alternative to represent the meaning of the visual content in an &lt;img&gt; in the context of its use or to signify the [&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-629","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/629","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=629"}],"version-history":[{"count":40,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":1473,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/629\/revisions\/1473"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}