{"id":349,"date":"2021-03-15T15:44:20","date_gmt":"2021-03-15T15:44:20","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=349"},"modified":"2021-03-15T16:10:14","modified_gmt":"2021-03-15T16:10:14","slug":"re-upped-short-note-on-the-disabled-aria-disabled-attributes","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/03\/15\/re-upped-short-note-on-the-disabled-aria-disabled-attributes\/","title":{"rendered":"re-upped: Short note on the disabled\/aria-disabled attributes"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-355 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy.jpg\" alt=\"Japanese kitkat and several finger food sticks\" width=\"1466\" height=\"222\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy.jpg 1466w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy-300x45.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy-768x116.jpg 768w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy-1024x155.jpg 1024w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/03\/Capture_copy-1200x182.jpg 1200w\" sizes=\"auto, (max-width: 1466px) 100vw, 1466px\" \/><\/p>\n<p><strong>Note:<\/strong> originally published on my now defunct codepen blog.<\/p>\n<p>The <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\">HTML <code>disabled<\/code> attribute<\/a> can be used on a limited set of HTML elements: <code>button<\/code>, <code>input<\/code>, <code>select<\/code>, <code>textarea<\/code>, <code>option<\/code>, <code>optgroup<\/code>, <code>fieldset<\/code>, or <em>form-associated custom elements<\/em> (<a href=\"https:\/\/www.chromestatus.com\/feature\/4708990554472448\">currently supported in Chrome only<\/a>)<\/p>\n<h2>What <code>disabled<\/code> does<\/h2>\n<p>When added to a control:<br \/>\n<code>&lt;input type=\"text\" disabled&gt;<\/code><br \/>\nA user:<\/p>\n<ul>\n<li>Cannot operate or move focus to it.<\/li>\n<li>Will get a different visual representation of the control. Usually it will be dimmed\/grayed out.<\/li>\n<li>If using a screen reader they will get a different <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2015\/10\/thus-spoke-html\/\">aural representation<\/a> of the control. Usually the <em>disabled<\/em> state will be announced.<\/li>\n<\/ul>\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-theme-id=\"5390\" data-default-tab=\"html,result\" data-user=\"stevef\" data-slug-hash=\"XLvaVG\" data-pen-title=\"disabled fieldset\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/XLvaVG\"><br \/>\ndisabled fieldset<\/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<h2>Other things to note:<\/h2>\n<ul>\n<li>The <code>value<\/code> in a disabled control will not be included in form submission<\/li>\n<li>When present on a <code>fieldset<\/code> element all descendant controls that can be <code>disabled<\/code>, will be <code>disabled<\/code> including those in nested <code>fieldset<\/code> elements.<\/li>\n<li>It has <strong>no effect<\/strong> on arbitrary elements with interactive element roles:\n<ul>\n<li><code>&lt;div role=\"textbox\" disabled&gt;<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>disabled<\/code> is a <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/common-microsyntaxes.html#boolean-attribute\">boolean attribute<\/a>, when present = true, when absent = false:<\/li>\n<\/ul>\n<h3>false<\/h3>\n<p><code>&lt;input type=\"text\"&gt;<\/code><\/p>\n<h3>true<\/h3>\n<p><code>&lt;input type=\"text\" disabled&gt;<\/code><\/p>\n<p>It does not require or need <em>any value<\/em>, but still works regardless of what the <em>value<\/em> is:<\/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-theme-id=\"5390\" data-default-tab=\"html,result\" data-user=\"stevef\" data-slug-hash=\"voBgbM\" data-pen-title=\"disabled attribute values\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/voBgbM\"><br \/>\ndisabled attribute values<\/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<h2>What <code>aria-disabled<\/code> does<\/h2>\n<p><code>&lt;input type=\"text\" aria-disabled=\"true\"&gt;<\/code><\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/core-aam-1.1\/#ariaDisabledTrue\"><code>aria-disabled<\/code><\/a> does <strong>one thing<\/strong>: It sets the disabled state in the <a href=\"https:\/\/developer.paciellogroup.com\/blog\/2015\/01\/the-browser-accessibility-tree\/\">accessibility tree<\/a> exposed in the browser. If using a screen reader, when the user navigates to the control, the <em>disabled<\/em> state will be conveyed.<\/p>\n<p>It <strong>does not<\/strong> effect control operation, or navigation, or value submission<\/p>\n<p><code>aria-disabled<\/code> requires a value of either <code>true<\/code> or <code>false<\/code>(absence of the attribute in the DOM also = <code>false<\/code>)<\/p>\n<h3>Also note<\/h3>\n<p>Setting the <code>disabled<\/code> attribute on a control as well as <code>aria-disabled=\"true\"<\/code> is <strong>not necessary<\/strong> under any circumstances:<\/p>\n<p><strong>Not necessary<\/strong><\/p>\n<p><code>&lt;input type=\"text\" aria-disabled=\"true\" disabled&gt;<\/code><\/p>\n<p>If <code>aria-disabled=\"false\"<\/code> is set on a control along with the <code>disabled<\/code> attribute, the <code>aria-disabled<\/code> attribute is ignored.<\/p>\n<p><strong>Still disabled<\/strong><\/p>\n<p><code>&lt;input type=\"text\" aria-disabled=\"false\" disabled&gt;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: originally published on my now defunct codepen blog. The HTML disabled attribute can be used on a limited set of HTML elements: button, input, select, textarea, option, optgroup, fieldset, or form-associated custom elements (currently supported in Chrome only) What disabled does When added to a control: &lt;input type=&#8221;text&#8221; disabled&gt; A user: Cannot operate or [&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-349","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/349","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=349"}],"version-history":[{"count":5,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/349\/revisions\/356"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}