{"id":871,"date":"2023-05-02T07:28:09","date_gmt":"2023-05-02T07:28:09","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=871"},"modified":"2023-05-02T11:46:48","modified_gmt":"2023-05-02T11:46:48","slug":"short-note-why-isnt-rolepresentation-none-allowed-on-focusable-elements","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2023\/05\/02\/short-note-why-isnt-rolepresentation-none-allowed-on-focusable-elements\/","title":{"rendered":"short note: why isn&#8217;t role=presentation\/none allowed on focusable elements?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-873\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/05\/Capture.jpg\" alt=\"The man who mistook a hydrant cover for an early prototype of R2D2.\" width=\"717\" height=\"381\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/05\/Capture.jpg 717w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2023\/05\/Capture-300x159.jpg 300w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/p>\n<p>A friend and colleague pondered why ARIA <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#presentation\"><code>role=presentation<\/code><\/a> and its facsimile <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.2\/#none\"><code>role=none<\/code><\/a> is not allowed on focusable elements?<\/p>\n<p>The answer is, theses days, purely a function of implementation reality. It don&#8217;t work on interactive elements or indeed any focusable elements, regardless of their semantics.<\/p>\n<p>When <code>role=none<\/code> is used on a non-interactive element such as <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/sections.html#the-aside-element\"><code>aside<\/code><\/a>, its <a href=\"http:\/\/el-aside-ancestorbodymain\">role semantics<\/a> are suppressed. The role <strong>is not<\/strong> exposed in the browser accessibility tree and <strong>is therefore not<\/strong> announced by screen readers.<\/p>\n<p>When a <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/interaction.html#attr-tabindex\"><code>tabindex<\/code><\/a> attribute is added to the element, making it focusable, the role semantics are no longer suppressed. Likewise on controls, such as <code>input type=text<\/code>, the role semantics <strong>are not<\/strong> suppressed. The role is exposed in the browser accessibility tree and <strong>is announced<\/strong> by screen readers.<\/p>\n<h2>Try it for yourself:<\/h2>\n<p class=\"codepen\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"400\" data-default-tab=\"html,result\" data-slug-hash=\"rNqGemK\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/rNqGemK\"><br \/>\nUntitled<\/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>Further reading<\/h2>\n<p>For a complete list of where and when ARIA attributes are allowed to be used on HTML elements, refer to the <a href=\"https:\/\/www.w3.org\/TR\/html-aria\/\">ARIA in HTML<\/a> specification.<\/p>\n<h2>Further listening<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/48-EJ5fD1Kc\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A friend and colleague pondered why ARIA role=presentation and its facsimile role=none is not allowed on focusable elements? The answer is, theses days, purely a function of implementation reality. It don&#8217;t work on interactive elements or indeed any focusable elements, regardless of their semantics. When role=none is used on a non-interactive element such as aside, [&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-871","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/871","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=871"}],"version-history":[{"count":11,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/871\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/871\/revisions\/883"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}