{"id":416,"date":"2021-05-31T14:43:01","date_gmt":"2021-05-31T14:43:01","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=416"},"modified":"2021-05-31T17:29:32","modified_gmt":"2021-05-31T17:29:32","slug":"the-hidden-world-of-aria-hidden","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/05\/31\/the-hidden-world-of-aria-hidden\/","title":{"rendered":"The hidden world of aria-hidden"},"content":{"rendered":"
\"David's
Dr Swallow returns, and it is fair to say, despite a dose of bath salts, he is not pleased with aria-hidden<\/figcaption><\/figure>\n

hides in the light<\/h2>\n

An interesting feature of aria-hidden<\/code> is that it hides stuff from screen reader users, but its effects are hidden from everyone else. Unless you going looking for it and understand what it does, you will have no idea how powerful it is and what a detrimental effect it can have if used unwisely, without understanding.<\/p>\n

This is further complicated by interoperability issues. The effects of aria-hidden are not consistent across browsers and screen readers.<\/p>\n

Take the following quote:<\/p>\n

Text available to all except screen readers.<\/p><\/blockquote>\n

code:<\/h3>\n
<blockquote aria-hidden=\"true\"<\/mark>>\r\nText available to all except screen readers.\r\n<\/blockquote><\/pre>\n
So far so good<\/h2>\n
When the descendants of an element aria-hidden=true<\/code> are non focusable<\/strong> they are chopped<\/em> out of the accessibility tree<\/a> in both Chrome and Firefox.<\/p>\n
\"blockquote
Firefox accessibility tree does not include the blockquote<\/code><\/figcaption><\/figure>\n
\"blockquote
Chrome accessibility tree does not include the blockquote<\/code><\/figcaption><\/figure>\n
What happens when interactive elements are added to the mix?<\/p>\n
Browser bifurcation time<\/h2>\n
Take the following quote:<\/p>\n
Folie \u00e0 Deux<\/span><\/a> (The X-Files<\/span>)<\/p>\n
<\/p>\n
Folie \u00e0 Deux<\/span>, a form of insanity shared by two people. It usually begins with one person who conceives of a delusional belief and then spreads it to another; thus, those two share the same delusion.<\/p>\n<\/blockquote>\n
Code:<\/h3>\n
<blockquote aria-hidden=\"true\"<\/mark>>\r\n<p>\r\n<a href=\"...\"><\/mark>\r\n<span lang=\"fr\">Folie \u00e0 Deux<\/span><\/a> \r\n(The <span tabindex=\"-1\"<\/mark>>X-Files<\/span>)<\/p>\r\n<input type=\"image\" src=\"hides.jpg\" \r\nalt=\"hides in the light\" \r\nonclick=\"skinner();\"><\/mark>\r\n<p tabindex=\"0\"<\/mark>>\r\n<span lang=\"fr\">Folie \u00e0 Deux<\/span>, \r\na form of insanity shared by two people. \r\nIt usually begins with one person who \r\nconceives of a delusional belief and \r\nthen spreads it to another; thus, \r\nthose two share the same delusion.<\/p>\r\n<\/blockquote><\/pre>\n
Splitsville<\/h2>\n
While Firefox still chops the blockquote and its descendants out of the accessibility tree:<\/p>\n
\"blockquote
Firefox accessibility tree does not include the blockquote<\/code><\/figcaption><\/figure>\n
Chrome exposes interactive elements<\/a> and<\/em> elements with a tabindex<\/code>, which are exposed with states of focusable, invisible<\/code>, and it appears that Safari on Mac does the same.<\/p>\n
<blockquote aria-hidden=\"true\"> <p><\/del>\r\n<a href=\"...\"><\/strong><span lang=\"fr\">Folie \u00e0 Deux<\/span><\/a><\/strong>\r\n(<\/del> <span tabindex=\"-1\">X-Files<\/span> <\/strong>)<\/p><\/del>\r\n<input type=\"image\" src=\"hides.jpg\" alt=\"hides in the light\" \r\nonclick=\"skinner();\"><\/strong>\r\n<p tabindex=\"0\"> <span lang=\"fr\">Folie \u00e0 Deux<\/span>, \r\na form of insanity shared by two people. It usually \r\nbegins with one person who conceives of a delusional \r\nbelief and then spreads it to another; thus, those \r\ntwo share the same delusion.<\/p><\/strong>\r\n<\/blockquote>\r\n<\/del><\/pre>\n
\"\"
Chrome does not include the blockquote<\/code>, but it does include the focusable descendants of the blockquote<\/code><\/figcaption><\/figure>\n
Special affects<\/h2>\n
When interactive elements are descendants of an element with aria-hidden=\"true\"<\/code> (or have it set on the element itself) in Firefox it’s not included in the accessibility tree, but is still focusable<\/strong>, and not announced by Screen Readers such as NVDA and Narrator in Chrome.\u00a0 This is why I made up the:<\/p>\n
\n
4th Rule of ARIA<\/abbr> Use<\/strong><\/a><\/p>\n
Do not use role=\"presentation\"<\/code> or aria-hidden=\"true\"<\/code> on a focusable<\/strong> element .<\/p>\n
Using either of these on a focusable<\/strong> element will result in some users focusing on ‘nothing’.<\/p>\n
Applying aria-hidden<\/code> to a parent\/ancestor of a visible interactive element will also result in the interactive element being hidden, so don’t do this either<\/strong>:<\/p><\/blockquote>\n
bad behaviour<\/h2>\n