{"id":1672,"date":"2025-07-21T16:26:43","date_gmt":"2025-07-21T16:26:43","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1672"},"modified":"2025-07-21T16:41:22","modified_gmt":"2025-07-21T16:41:22","slug":"super-short-note-placeholder-perfidy","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2025\/07\/21\/super-short-note-placeholder-perfidy\/","title":{"rendered":"super short note: placeholder perfidy"},"content":{"rendered":"<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1674 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/07\/ChatGPT-Image-Jul-21-2025-12_09_31-PM.jpg\" alt=\"A cartoon portrayal of the Laukestar naked, sitting on a rock on the bad side of the moon, contemplating WCAG 3 &quot;I am tired of Earth. These people. I am tired of being caught in the tangle of their lives.&quot;\" width=\"500\" height=\"750\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/07\/ChatGPT-Image-Jul-21-2025-12_09_31-PM.jpg 500w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/07\/ChatGPT-Image-Jul-21-2025-12_09_31-PM-200x300.jpg 200w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>Patrick muses upon his Web Standards life, from the bad side of the moon<\/figcaption><\/figure>\n<h2>It&#8217;s a hint not a <a href=\"https:\/\/html5accessibility.com\/stuff\/2025\/07\/14\/a-label-and-a-name-walk-into-a-bar\/\">label<\/a><\/h2>\n<p>The <code>placeholder<\/code> attribute is defined as:<\/p>\n<blockquote><p>The\u00a0<dfn id=\"attr-input-placeholder\" data-dfn-for=\"input\" data-dfn-type=\"element-attr\"><code>placeholder<\/code><\/dfn>\u00a0attribute represents a\u00a0<em>short<\/em>\u00a0hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.<\/p>\n<p>The\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/input.html#attr-input-placeholder\"><code id=\"the-placeholder-attribute:attr-input-placeholder-2\">placeholder<\/code><\/a>\u00a0attribute should not be used as an alternative to a\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#the-label-element\"><code id=\"the-placeholder-attribute:the-label-element\">label<\/code><\/a>.<\/p><\/blockquote>\n<p>I made the mistake in a <a href=\"https:\/\/html5accessibility.com\/stuff\/2025\/07\/14\/a-label-and-a-name-walk-into-a-bar\/\">recent article<\/a> of using the <code>placeholder<\/code> attribute content to illustrate when a <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-labels\">label<\/a> is not correctly associated it does not provide an accessible name. <code>placeholder<\/code> content is used as an accessible <em>name of last resort<\/em> when other sources are absent. My motivation for using it was to include the names of my nearest and dearest friends (<em>Dr Throater<\/em> for example!) in some form as I often do, not to give people the idea to use <code>placeholder<\/code> themsleves, for anything!.<\/p>\n<p class=\"note\"><strong>For this I am truly sorry. I did not mean to imply that it was a good idea, in fact its a really shit idea for lots of reasons.<\/strong><\/p>\n<p>The <a href=\"https:\/\/w3c.github.io\/html-aam\/\">HTML Accessibility API Mappings 1.0<\/a> name computation for <code>input type=\"text\"<\/code> (amongst others) details where placeholder is in the acc name source <em>pecking order:<\/em><\/p>\n<blockquote>\n<ul>\n<li>If the control has an\u00a0<a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#aria-label\"><code>aria-label<\/code><\/a>\u00a0or an\u00a0<a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#aria-labelledby\"><code>aria-labelledby<\/code><\/a>\u00a0attribute the\u00a0<a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>\u00a0is to be calculated using the algorithm defined in\u00a0<a class=\"accname\" href=\"https:\/\/w3c.github.io\/accname\/\">Accessible Name and Description: Computation and\u00a0<abbr title=\"application programming interface\">API<\/abbr>\u00a0Mappings<\/a>.<\/li>\n<li>If the <a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>\u00a0is still empty: use the\u00a0<a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#mapping_additional_nd_te\">text equivalent computation<\/a>\u00a0of the associated\u00a0<code style=\"color: #000000;\">label<\/code>\u00a0element&#8217;s subtree &#8211; if more than one\u00a0<code style=\"color: #000000;\">label<\/code>\u00a0is associated; concatenate their subtrees by DOM order, delimited by spaces.<\/li>\n<li>If the control is encapsulated by its\u00a0<code>label<\/code>\u00a0element, exclude the control&#8217;s author specified or user-entered value from its computed\u00a0<a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>.<\/li>\n<li>If the <a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>\u00a0is still empty: use the value of the control&#8217;s\u00a0<code style=\"color: #000000;\">title<\/code> attribute.<\/li>\n<li><strong>If the\u00a0<a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>\u00a0is still empty: use the value of the control&#8217;s\u00a0<a href=\"https:\/\/w3c.github.io\/html-aam\/#att-placeholder\">placeholder<\/a> attribute.<\/strong><\/li>\n<li>Otherwise, use the value of the element&#8217;s\u00a0<a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#aria-placeholder\"><code>aria-placeholder<\/code><\/a> attribute.<\/li>\n<li>If none of the above yield a usable text string there is no\u00a0<a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/#dfn-accessible-name\">accessible name<\/a>.<\/li>\n<\/ul>\n<\/blockquote>\n<h2>Further reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/names-and-descriptions\/\">Providing Accessible Names and Descriptions<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2021\/02\/14\/re-upped-placeholder-the-piss-take-label\/\">placeholder \u2013 the piss-take label<\/a><\/li>\n<\/ul>\n<h2>Further listening: Toe Fat 1970 &#8211; Bad Side Of The Moon<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/lmKx2i5zXvA?si=6TWIOClbr-NwrubY\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<details>\n<summary>Lyrics<\/summary>\n<pre>This is my life, this is my life, this is my life\r\nThis is my life,\u2005this\u2005is my life,\u2005this is my life\r\nThis is my\u2005life, this is my life, this is my life\r\nThis is my life, this is my life, this is my life\r\nThis is my life, this is my life, this is my life\r\nThis is my life, this is my life, this is my life\r\n\r\nIt seems as though I've lived my life\r\nOn the bad side of the moon\r\nTo stir your dregs in sickness still\r\nWithout the rustic spoon\r\nCome on people, live with me\r\nWhere the light never never shone\r\nAnd the hermits flock like-a hummingbirds\r\nTo speak in a foreign tongue\r\n\r\nI'm a light world away\r\nFrom the people who make me stay\r\nSitting on the bad side of the moon\r\nYeah, I'm a light world away\r\nFrom the people who make me stay\r\nSitting on the bad side of the moon\r\n\r\nEverybody sing\r\nThis is my life, this is my life, this is my life\r\nThis is my life, this is my life, this is my life\r\n<\/pre>\n<p>&nbsp;<\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Patrick muses upon his Web Standards life, from the bad side of the moon It&#8217;s a hint not a label The placeholder attribute is defined as: The\u00a0placeholder\u00a0attribute represents a\u00a0short\u00a0hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value [&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-1672","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1672","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=1672"}],"version-history":[{"count":6,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1672\/revisions"}],"predecessor-version":[{"id":1680,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1672\/revisions\/1680"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=1672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=1672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=1672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}