{"id":490,"date":"2021-08-26T11:48:17","date_gmt":"2021-08-26T11:48:17","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=490"},"modified":"2021-08-27T09:19:18","modified_gmt":"2021-08-27T09:19:18","slug":"named-and-framed","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/08\/26\/named-and-framed\/","title":{"rendered":"named and framed"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-492\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/08\/doors.jpg\" alt=\"Garish 70's bedroom decor with added Patrick (barbells man), David (video man) and Jonny the CYRK (Hairy face tuke person).\" width=\"800\" height=\"539\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/08\/doors.jpg 800w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/08\/doors-300x202.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/08\/doors-768x517.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>I asked 3 of the industries most trusted accessibility gurus the question:<\/p>\n<h2>Is the <code>title<\/code> attribute still the most reliable method to provide an accessible name for an <code>iframe<\/code>?<\/h2>\n<p>Their collective response *<sup>assumed<\/sup><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-503 size-full\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/08\/ezgif-6-bd06e1b0a44d.gif\" alt=\"Alan Partridge shrugs repeatedly\" width=\"250\" height=\"186\" \/><\/p>\n<h3>Expectations<\/h3>\n<p>Use of <code>aria-label<\/code> results in the same output as <code>title<\/code> as both, in this case, can provide an <a href=\"https:\/\/www.w3.org\/TR\/accname-1.1\/#dfn-accessible-name\">accessible name<\/a> for the <code>iframe<\/code> element. If both are present the <code>aria-label<\/code> will override the <code>title<\/code> as accessible name.<\/p>\n<h3>To testing it must be<\/h3>\n<p>Using this test file: <a href=\"https:\/\/cdpn.io\/stevef\/debug\/BaZBvNp\">iframe tests<\/a><\/p>\n<p class=\"note\">Big Up to <a href=\"https:\/\/twitter.com\/heresjonnyjames\">Jonny James<\/a> and <a href=\"https:\/\/twitter.com\/_b_ri_\">Brian Elton<\/a> for help with testing.<\/p>\n<p class=\"codepen\" style=\"height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"600\" data-slug-hash=\"BaZBvNp\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/BaZBvNp\"><br \/>\niframe accname 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<h2>The results are in<\/h2>\n<div id=\"scroller\" tabindex=\"0\" role=\"region\" aria-label=\"scollable table\">\n<table id=\"iframe-r\" border=\"1\">\n<caption>test results<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Tests<\/th>\n<th scope=\"col\">Expected acc name mapping<\/th>\n<th scope=\"col\">JAWS<br \/>\nsays<\/th>\n<th scope=\"col\">NVDA<br \/>\nsays<\/th>\n<th scope=\"col\">Narrator<br \/>\nsays<\/th>\n<th scope=\"col\">VO\/OSX<br \/>\nsays<\/th>\n<th scope=\"col\">VO\/iOS<br \/>\nsays<\/th>\n<th scope=\"col\">Talkback\/Android<br \/>\nsays<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 1.<code>iframe<\/code> with <code>title<\/code> attribute and <code>title<\/code> element in source document<\/th>\n<td><code>title<\/code> attribute<\/td>\n<td>title provides name frame<\/td>\n<td>title provides name, frame<\/td>\n<td>title provides name, Document title provides name<\/td>\n<td>Entering title provides name, frame<\/td>\n<td>nothing<\/td>\n<td>Two focus stops:<\/p>\n<ol>\n<li>nothing<\/li>\n<li>Document title provides name<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 2. <code>iframe<\/code> with no <code>title<\/code> attribute and <code>title<\/code> element in source document<\/th>\n<td>none<\/td>\n<td>Document title provides name, frame<\/td>\n<td>frame<\/td>\n<td>Document title provides name<\/td>\n<td>Entering frame<\/td>\n<td>nothing<\/td>\n<td>Document title provides name<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 3. <code>iframe<\/code> with <code>aria-label<\/code> attribute, no <code>title<\/code> attribute and empty <code>title<\/code> element in source document<\/th>\n<td><code>aria-label<\/code> attribute<\/td>\n<td>aria-label provides name, frame<\/td>\n<td>aria-label provides name,\u00a0 frame<\/td>\n<td>aria-label provides name<\/td>\n<td>Entering frame<\/td>\n<td>nothing<\/td>\n<td>nothing<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 4. <code>iframe<\/code> with with <code>aria-label<\/code> attribute, no <code>title<\/code> attribute, and <code>title<\/code> element in source document<\/th>\n<td><code>aria-label<\/code> attribute<\/td>\n<td>Chrome: document title provides name, frame<\/p>\n<p>FireFox: aria-label provides name, frame<\/td>\n<td>aria-label provides name,\u00a0 frame<\/td>\n<td>aria-label provides name, Document title provides name<\/td>\n<td>Entering frame<\/td>\n<td>nothing<\/td>\n<td>Two focus stops:<\/p>\n<ol>\n<li>nothing<\/li>\n<li>Document title provides name<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Test 5. <code>iframe<\/code> with with <code>aria-label<\/code> attribute, and <code>title<\/code> attribute, and <code>title<\/code> element in source document<\/th>\n<td><code>aria-label<\/code> attribute<\/td>\n<td>Chrome: title provides name, frame<\/p>\n<p>FireFox: aria-label provides name, frame<\/td>\n<td>aria-label provides name,\u00a0 frame<\/td>\n<td>aria-label provides name , Document title provides name<\/td>\n<td>Entering title provides name, frame<\/td>\n<td>nothing<\/td>\n<td>Two focus stops:<\/p>\n<ol>\n<li>title provides name<\/li>\n<li>Document title provides name<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p class=\"note\"><strong>Fun Fact<\/strong>: Use of the <code>title<\/code> attribute on an <code>iframe<\/code> does not result in display of a tooltip when the mouse cursor is over the <code>iframe<\/code>.<\/p>\n<h2>What??<\/h2>\n<h3>JAWS\/Windows\/Firefox &amp; Chrome<\/h3>\n<p>Works <em>mostly<\/em> as expected: Announces frame presence, it\u00a0 employs some heuristics for the case (test 2) where there is no accessible name, announcing the <code>iframe<\/code> document <code>title<\/code> instead. Some <em>funkyness<\/em> when both <code>title<\/code> and <code>aria-label<\/code> attributes are present in Chrome; announces <code>title<\/code> attribute instead of <code>aria-label<\/code><\/p>\n<h3>NVDA\/Windows\/Firefox<\/h3>\n<p>Works as expected: Announces <code>iframe<\/code> presence, doesn&#8217;t employ any heuristics to make up for lack of accessible name (test 2).<\/p>\n<h3>Narrator\/Windows\/Edge<\/h3>\n<p>Works <em>mostly<\/em> as expected: Does not announce <code>iframe<\/code> presence, wherever present announces the <code>iframe<\/code> document <code>title<\/code> along with accessible name.<\/p>\n<h3>VoiceOver\/OSX\/Safari<\/h3>\n<p>Works with <code>title<\/code> attribute only. Announces <code>iframe<\/code> presence.<\/p>\n<h3>VoiceOver\/iOS\/Safari<\/h3>\n<p>Does not announce presence of <code>iframe<\/code> or accessible name.<\/p>\n<h3>Talkback\/Android\/Chrome<\/h3>\n<p>Consistently announces the <code>iframe<\/code> document <code>title<\/code> when present, when focused on document in <code>iframe<\/code>, inconsistent announcement of <code>title<\/code> attribute, no announcement of <code>aria-label<\/code>. Does not announce presence of <code>iframe<\/code>.<\/p>\n<h2>In Conclusion<\/h2>\n<p><strong>Yes<\/strong>, <code>title<\/code> is still the most reliable method of providing an <em>announced<\/em> accessible name for an <code>iframe<\/code>. Although support is solid in browsers (Safari being odd one out), screen readers are surprisingly divergent on how and what they convey to users.<\/p>\n<h2>Further reading<\/h2>\n<p><a href=\"https:\/\/html5accessibility.com\/stuff\/2020\/08\/20\/hush-sweet-iframe\/\">Hush Sweet IFrame<\/a><\/p>\n<h2>Further listening<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/xh-5FI21s6M\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I asked 3 of the industries most trusted accessibility gurus the question: Is the title attribute still the most reliable method to provide an accessible name for an iframe? Their collective response *assumed Expectations Use of aria-label results in the same output as title as both, in this case, can provide an accessible name for [&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-490","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/490","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=490"}],"version-history":[{"count":33,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"predecessor-version":[{"id":545,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/490\/revisions\/545"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}