{"id":53,"date":"2020-08-20T14:42:14","date_gmt":"2020-08-20T14:42:14","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=53"},"modified":"2020-08-20T14:42:14","modified_gmt":"2020-08-20T14:42:14","slug":"hush-sweet-iframe","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2020\/08\/20\/hush-sweet-iframe\/","title":{"rendered":"Hush Sweet IFrame"},"content":{"rendered":"\r\n
\"Black\r\n
Black people cannot carry the weight of injustice on their shoulders, whilst the institutionalised systems still prevail (source<\/a>)<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n

Back in 2010 I wrote some advice on how to hide iframe elements from screen reader users: Making sure hidden frames are hidden<\/a><\/p>\r\n

10 years on the advice is largely redundant.<\/strong><\/p>\r\n

Some<\/em> background<\/h2>\r\n

HTML is an aural UI<\/a> for screen reader users. Sometimes announcing the element name, when a user navigates to the element, makes sense, other times it seems sort of clunky, jargonistic and even unnecessary (more noise than information). The majority of content is and has been robustly hidden<\/a> using standard methods, for years.<\/p>\r\n

Screen reader developers make the decisions about how and when the semantics of HTML will be conveyed to users (from what is available in the accessibility tree<\/a>), hopefully<\/em> based on user feedback. For most elements there is a strong correlation between the element role and how it is identified to users (unless the role is explicitly overridden using the [ARIA role<\/code><\/a>] attribute): JAWS for example<\/a>.<\/p>\r\n

How iframe<\/code> elements and their content can be hidden from screen readers<\/h2>\r\n

Noting that depending on the platform and screen reader there are multiple ways to interact with content. For example, in JAWS, you can navigate to a iframe<\/code> using the tab<\/kbd> key (if the iframe<\/code> content includes focusable content, or in Firefox the iframe<\/code> itself is in the focus order) or using the M<\/kbd> virtual navigation key or use the arrow<\/kbd> keys to move through content (in virtual<\/em> mode).<\/p>\r\n

Read Understanding screen reader interaction modes<\/a> by L\u00e9onie Watson<\/a> for a detailed introduction to screen reader interaction modes.<\/p>\r\n

Mostly Good Times<\/h2>\r\n

Nowadays unlike in the past all screen readers ignore iframe<\/code>s and their content when they are hidden using the hidden<\/code> attribute or CSS display:none<\/code>, nothing more is needed. There does not appear to be a method to hide visually displayed iframe<\/code>s from all screen readers. The following results are based on testing screen readers with these test cases<\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
hiding iframes from selected screen readers<\/caption>\r\n
Screen reader (latest versions)<\/th>\r\n\u00a0iframe<\/code>\u00a0 + hidden<\/code><\/th>\r\niframe<\/code>\u00a0+ display:none<\/code><\/th>\r\n\r\n

iframe<\/code>\u00a0 aria-hidden=true<\/code> + tabindex=-1<\/code>+ role=none<\/code><\/p>\r\n<\/th>\r\n<\/tr>\r\n

JAWS<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\n<\/tr>\r\n
NVDA<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\n<\/tr>\r\n
Narrator<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\niframe<\/code> content announced and operable<\/td>\r\n<\/tr>\r\n
VoiceOver Mac<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\niframe<\/code> is in navigation order and announced as “application”, content of iframe<\/code> is hidden.<\/td>\r\n<\/tr>\r\n
VoiceOver iOS<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\n<\/tr>\r\n
Talkback Android<\/th>\r\nnot announced<\/td>\r\nnot announced<\/td>\r\nIn Chrome if navigating by heading the heading in the iframe is announced. Not in Firefox.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n

Fun Fact 1<\/strong>: Use of the title<\/code> attribute on an iframe<\/code> does not result in display of a tooltip when the mouse cursor is over the iframe<\/code>.<\/p>\r\n

Fun Fact 2<\/strong>: If you hide content using the hidden<\/code> attribute or CSS display:none<\/code> you don’t need aria-hidden=\"true\"<\/code> as the state is already exposed in the browser accessibility tree!<\/p>","protected":false},"excerpt":{"rendered":"

Back in 2010 I wrote some advice on how to hide iframe elements from screen reader users: Making sure hidden frames are hidden 10 years on the advice is largely redundant. Some background HTML is an aural UI for screen reader users. Sometimes announcing the element name, when a user navigates to the element, makes […]<\/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-53","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/53","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=53"}],"version-history":[{"count":33,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":121,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/53\/revisions\/121"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}