Open aleventhal opened 4 years ago
Unfortunately, aria-hidden often gets applied to something that shouldn’t be hidden (e.g. an in one case and on some icons that should be clicked in another). Currently, screen readers can’t do anything to really help in this situation. JAWS recently asked us to consider exposing all <em>visible</em> aria-hidden objects. If something is truly hidden via CSS it still will not be exposed.</p> <p>This isn't unprecedented. We currently expose <em>focusable</em> aria-hidden nodes. When the author misuses aria-hidden, the user can at least hear where they are tabbing to, instead of complete silence.</p> <p>There would likely be benefits, at least in Chrome's in terms of simplifying the logic. </p> <p>We have a way of marking nodes as invisible on every platform except Mac. Therefore, on Mac, we would likely fall back on simply not including the node, or at least not including it in children. The node would still be able to fire events and expose its ancestry chain.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/joanmarie"><img src="https://avatars.githubusercontent.com/u/3228171?v=4" />joanmarie</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p><em>If</em> the working group agrees with this change, I think we should probably update the text in <a href="https://w3c.github.io/aria/#tree_exclusion">https://w3c.github.io/aria/#tree_exclusion</a>, which currently states:</p> <blockquote> <p>If not already excluded from the accessibility tree per the above rules, user agents SHOULD NOT include the following elements in the accessibility tree:</p> <ul> <li>Elements, including their descendants, that have aria-hidden set to true. In other words, aria-hidden="true" on a parent overrides aria-hidden="false" on descendants.</li> </ul> </blockquote> <p>Aside: If the working group does not agree with this change, we should probably update the text in <a href="https://w3c.github.io/aria/#tree_inclusion">https://w3c.github.io/aria/#tree_inclusion</a>, which currently states:</p> <blockquote> <p>If not already excluded from the accessibility tree per the rules above in Excluding Elements in the Accessibility Tree, user agents MUST provide an accessible object in the accessibility tree for DOM elements that meet any of the following criteria: [...]</p> <ul> <li>Elements that may fire an accessibility API event.</li> <li>Elements that are focusable, or have an ID attribute and an ancestor with the aria-activedescendant attribute that matches the implicit or explicit semantics of the required context role. In either case, the element may receive focus and may fire an accessibility API focus event.</li> </ul> </blockquote> <p>My read of the current spec text is that because elements with <code>aria-hidden='true'</code> SHOULD NOT be included, they are "already excluded from the accessibility tree" and thus we're never going to get to the user agents MUST related to firing events and being focusable.</p> <p>Related aside: I <em>believe</em> the reason that is a SHOULD NOT is because Mozilla didn't want to make the change and thus would formally object to a MUST NOT. It isn't because we wanted to leave it up to user agents to introduce non-interoperable experiences. :wink:</p> <p>Something we need to find out from screen reader developers on Windows is whether or not these things suddenly appearing in the accessibility tree will be a problem. (It shouldn't be in Linux because I never removed the for-Mozilla sanity checks from Orca. But I don't know what everyone in Windows did with their just-in-case code.)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Regarding Windows, JAWS is the one who has asked for this change. I've emailed NVDA to ask for an opinion. However, I know it's not an issue for 2 reasons. 1) This is how Firefox exposed things until relatively recently (they changed because some platforms like Mac didn't have a clear way of marking nodes invisible), 2) We already expose focusable aria-hidden nodes to them, which they ignore in their virtual buffer. We've been doing this for a few releases.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/LJWatson"><img src="https://avatars.githubusercontent.com/u/3501033?v=4" />LJWatson</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>The aria-hidden attribute was created because there are good reasons to hide visible content from screen reader users. Making this change would more or less completely undermine the point of having it.</p> <p>Does FS have quantifiable data in support of their proposal that they can share? A change like this would have serious consequences for screen reader users, so I think we'd want to be absolutely sure that the advantages to users outweigh the disadvantages before considering it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/carmacleod"><img src="https://avatars.githubusercontent.com/u/3331913?v=4" />carmacleod</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Agree with @LJWatson - sometimes there are good reasons to hide things from AT. I have used <code>aria-hidden</code> to <a href="https://lists.w3.org/Archives/Public/public-svg-a11y/2016Jul/0010.html">hide the guts of a decorative SVG</a>. :) I have also used it to hide funny characters in font icons. If we made this change, I'm pretty sure that a bunch of redundant or extraneous content would suddenly show up where authors were counting on it staying aria-hidden.</p> <p>Related to @joanie's comment, reminder that there are word changes for the inclusion/exclusion sections awaiting review in PR <a href="https://github.com/w3c/aria/pull/1100">https://github.com/w3c/aria/pull/1100</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JAWS-test"><img src="https://avatars.githubusercontent.com/u/52748763?v=4" />JAWS-test</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I plead to keep aria-hidden as it is. Too many exception rules (like for role=presentation) make it even more complicated to use ARIA correctly</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@JAWS-test, screen reader behavior would not change, and this would not affect authoring practices. We are only providing a way to work around issues pages are authoring incorrectly. The issue is that aria-hidden is misused quite often and the screen reader has no chance to address it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@LJWatson @carmacleod Screen reader behavior would not change. However, if a user contacts JAWS technical support because they cannot access something, JAWS would be able to provide steps to workaround the issue. Right now they cannot do any repair on these. Repair of bad content is something that needs to occasionally happen.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Sorry, what does that mean “repair something”?</p> <p>Thinking out loud here.</p> <p>If that means that they have a financial incentive to script around others’ bad accessibility implementations, then I have a problem with facilitating that or making that easier. That makes the web worse, not better, for anyone except the individual fortunate enough to have an employer who is willing to pay for this one-time fragile workaround.</p> <p>If it means something else, let me know, but it’s the worst thing when something is inaccessible, and the short-term fix is directly antithetical to the long-term solution, which is the case here because pragmatically speaking, once that pain point goes away, then it will never ever be pursued.</p> <p>If it means a feature whereby you can say “show hidden elements” for example, so that aria-hidden can be ignored by the screen reader to facilitate access, I would see why that could be attractive as a work around, but I feel very conflicted making it easier to get around inaccessible pages. Obviously, as a user, I want this functionality (I do), but as someone who wants there to exist external network pressures; social, financial, and legal, I’m just not so sure.</p> <p>Thoughts?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JAWS-test"><img src="https://avatars.githubusercontent.com/u/52748763?v=4" />JAWS-test</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal </p> <blockquote> <p>screen reader behavior would not change</p> </blockquote> <p>However, I understood your initial comments to mean that the screen reader behavior changes:</p> <blockquote> <p>JAWS recently asked us to consider exposing all visible aria-hidden objects</p> <p>We currently expose focusable aria-hidden nodes. When the author misuses aria-hidden, the user can at least hear where they are tabbing to, instead of complete silence</p> </blockquote> <p>These are changes to the screenreader output, because currently aria-hidden causes the content not to be output by the screenreader even if it gets the focus.</p> <p>I am not against repair mechanisms in the screen reader. I am also in favour of not preventing them. But the repair mechanisms should not be defined in the specification:</p> <ul> <li>because then web developers rely on it and write wrong code</li> <li>because screen readers should be able to do this, but should not be forced to provide repair mechanisms.</li> </ul> <p>A simple example:</p> <ul> <li>If a form field has no label, JAWS outputs the text before or after it as a label when you tab to it. However, in the element overview, form fields are visible as unlabeled. This may sometimes be a useful feature, although it often results in the wrong label being assigned to form fields on pages with errors.</li> <li>However, this method is not described and required in <a href="https://www.w3.org/TR/accname-1.1/">ACCNAME</a>.</li> </ul> <p>For aria-hidden I can imagine the following:</p> <ul> <li>Content with aria-hidden is included in the accessibility tree, but the hidden status is transmitted</li> <li>Screenreaders should not output content, but may decide to implement their own repair mechanisms.</li> <li>It would make sense to make the repair mechanisms in the screen reader configurable, i.e. in the settings management of the screen reader the user can choose whether she or he wants to listen to hidden content or not. </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@JAWS-test I think we agree then. We would still transmit the hidden status. The mechanism to render aria-hidden content would be via configuration. Otherwise, the current behavior is followed. Note: this would also be only for stuff that actually is visible to the sighted user.</p> <p>As far as the focusable aria-hidden thing we're doing, this is for focus mode (as opposed to browse/virtual buffer mode). It doesn't make sense to say absolutely nothing if the user tabs and focus lands somewhere. If the focus lands somewhere that is aria-hidden, JAWS/NVDA etc. will try to read something useful, when used with Chrome, so that the user isn't completely lost. There were too many pages putting aria-hidden on the body element when a modal dialog was open. Sad.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/LJWatson"><img src="https://avatars.githubusercontent.com/u/3501033?v=4" />LJWatson</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal commented:</p> <blockquote> <p>Screen reader behavior would not change. However, if a user contacts JAWS technical support because they cannot access something, JAWS would be able to provide steps to workaround the issue. Right now they cannot do any repair on these. Repair of bad content is something that needs to occasionally happen.></p> </blockquote> <p>There is no guarantee that screen reader behaviour won't change. FS effectively pulled support for aria-controls last year, burying the toggle to enable support somewhere deep in Jaws' settings.</p> <p>As I mentioned above I think we need some actual data for a decision like this. How often do authors get this wrong to the extent it damages the user experience? Is it significantly more often than they get it right?</p> <p>@sinabahram commented:</p> <blockquote> <p>If that means that they have a financial incentive to script around others’ bad accessibility implementations, then I have a problem with facilitating that or making that easier. That makes the web worse, not better, for anyone except the individual fortunate enough to have an employer who is willing to pay for this one-time fragile workaround.></p> </blockquote> <p>It does seem as though this is being requested to assist FS with its Jaws scripting services.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ggordon-vispero"><img src="https://avatars.githubusercontent.com/u/25306242?v=4" />ggordon-vispero</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>This isn't about scripting or consulting. Our intention for JAWS is to expose a user configurable option that says "Ignore ARIA Hidden on this page" that could be enabled on a per-page or per domain basis to allow users to function in the face of incorrect markup. We agree that aria-hidden provides a valuable role when used properly and we don't want to alter the default. But we do want to empower users to get things done when aria-hidden on pages would otherwise prevent it. As things stand, screen readers can't do any user directed remediation because aria-hidden content never makes it into the accessibility tree.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ggordon-vispero"><img src="https://avatars.githubusercontent.com/u/25306242?v=4" />ggordon-vispero</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Here are a couple of cases where aria-hidden is improperly used. In both of them, the misuse is in third-party javascript libraries that the developers of the apps in question can not easily change. Aria-hidden is used on an iframe element that has an entire web application inside of it. This is for a call center environment. It's also misused to hide clickable icons in the Mavenlink project management tool. The icons are used for deleting things, expanding/collapsing items and manipulating calendar dates.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>We're just trying to solve a technical problem. Sorry that I don't have numbers, but this came up twice in crbug.com in the last year, which is actually surprising given that we don't get very many external bugs filed. Glen mentioned separately to me that it comes up as a support issue. We don't really have a way a measuring "when someone gets it wrong", which is the same reason we wouldn't automate anything about it.</p> <p>On the bigger picture, I didn't know we were still discussing as a community whether to enable users to make repairs. I think we have to be realistic about the fact that ARIA is one of the easiest technologies for authors to get wrong. There is so much expertise required to build a web app, and ARIA is only one small piece that a given developer needs to understand. Most authors aren't very comfortable with screen readers and not everything gets tested as much as it should. The spec is complex, and I still get things wrong about it myself. For example, it's really easy to break aria-hidden by assuming it works like CSS visibility -- that aria-hidden=false on a descendant undoes things aria-hidden on an ancestor. And when aria-hidden=true gets applied to the body, a sighted tester won't even notice. (Perhaps we should consider prohibiting aria-hidden on the top frame's body or html element, or perhaps we should allow aria-hidden=true on descendants to make that part of the tree visible, which would be helpful in the modal dialog case.</p> <p>There have been arguments about whether it's right to enable repair of bad content, for example whether auto alt is a good idea. I think that because of the reality of how often accessibility is done incorrectly, and how hard it is for even developers who care to get it 100% correct, we should at least make repairs possible. Users have things to get done, and not all are in a position to go call up a company and wait for probably never to get a fix. We aren't successfully changing things by making users suffer more.</p> <p>I asked a recent very knowledgable accessibility QA engineer, who didn't know my history of ARIA, for an honest assessment of how often ARIA makes a page better vs. worse. She said it makes it better about half the time, and worse about half the time. I don't know how to measure it, but I do know that if I'm a user trying to hold a job or get something done, I don't want to for developers to make an accessibility fix when they may be focused on something else, for whatever reason. </p> <p>Apologies for the long spiel, but I don't think we should need to argue about enabling repair scenarios going forward. Maybe I'm just too forgiving of developers not getting accessibility right all the time! But it is definitely super easy to break accessibility with ARIA, by its very nature.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/LJWatson"><img src="https://avatars.githubusercontent.com/u/3501033?v=4" />LJWatson</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't think there's any doubt that aria-hidden is sometimes misused, any more than there is doubt that it's used properly too.</p> <p>That's why we shouldn't base a decision like this on single examples. We should be absolutely sure that it's misused more often than it's not, and that when it's misused there are no alternatives to working around that.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Sorry, that was an accidental click. Not a statement, haha, although I do find this conversation a little frustrating :/</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi @LJWatson I think I probably didn't explain the proposal well. In general, aria-hidden wouldn't change for users and authors The idea here is that when a user calls technical support because of missing content there is a configuration option for them.</p> <p>For this idea, do you think we need to prove it's misused more often than used properly?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/carmacleod"><img src="https://avatars.githubusercontent.com/u/3331913?v=4" />carmacleod</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal I am ok with this proposal now. I didn't fully understand it at first. It shifts the burden of implementing aria-hidden support from the user agents to the screen readers. As long as that's ok with the screen reader devs, then it's ok with me.</p> <blockquote> <p>We have a way of marking nodes as invisible on every platform except Mac. Therefore, on Mac, we would likely fall back on simply not including the node, or at least not including it in children. The node would still be able to fire events and expose its ancestry chain.</p> </blockquote> <p>We need to get @cookiecrook to weigh in on this.</p> <p>You mentioned an email to NVDA in <a href="https://github.com/w3c/aria/issues/1185#issuecomment-579914477">https://github.com/w3c/aria/issues/1185#issuecomment-579914477</a> but it would be nice to hear from @jcsteh in this issue.</p> <p>@LJWatson I think I may be able to get some rudimentary data. I'll get back to you within the hour.</p> <p>Also, as @joanie mentioned above, if the WG agrees with this change, we would need to make changes to the inclusion/exclusion sections of the spec. I would appreciate it if we started with the words in PR #1100.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>It shifts the burden of implementing aria-hidden support from the user agents to the screen readers. As long as that's ok with the screen reader devs, then it's ok with me.</p> </blockquote> <p>Yes, with the possible exception of platforms where this isn't implemented yet. JAWS/NVDA/Orca already hide objects exposed with an invisible state (although JAWS also needs the hidden object attribute). We should be able to safely do this without any noticeable change for users. There might actually be a net performance improvement as we currently spend a lot of computation power determine whether to expose something or not. Or it could make performance worse. Ultimately we need to try it to find out.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcsteh"><img src="https://avatars.githubusercontent.com/u/4166475?v=4" />jcsteh</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>As much as I understand the real world implications here, I'm super reluctant to go down this path. For many years, Firefox didn't prune aria-hidden objects from the tree, precisely because of the concerns raised here. Part of the reason we ended up finally doing this after so many years was many complaints from authors and AT vendors that we weren't complying with the spec (despite our belief that we were doing the right thing for users), which caused friction because different implementations were doing different things. Despite the obvious issues, at least pruning aria-hidden trees was now clearly defined and consistent: if you use this badly, you get exactly the same result, regardless of browser and AT. Thus, a messy, years-long can of worms was finally closed. Now, we're talking about reopening this.</p> <p>The problem is that it's not as simple as just saying "stop pruning the tree":</p> <ol> <li>We're going to need to do a bunch of work to ensure that name/description computation honours aria-hidden correctly, since we can't rely on the tree alone.</li> <li>We need to ensure that text interfaces don't return aria-hidden content.</li> <li>We need to find a way to prune the tree on Mac, even though our internal tree isn't pruned, and deal with associated edge cases.</li> <li>The above three things are quite a bit of work. Meanwhile, if the spec is changed in this way, Firefox will once again be in violation of the spec until we can resource this work.</li> <li>Hit testing will hit aria-hidden content.</li> <li>NVDA mouse tracking will (re)break in aria-hidden content.</li> <li>The MSAA invisible state is not sufficient to indicate aria-hidden. I can't remember all of the details off the top of my head, but the gist is that the invisible state is conflated with too many different things and NVDA was never able to rely on it. But if we don't use the invisible state, MSAA clients won't know the tree is hidden. I guess we could use both the invisible state and hidden object attribute, though.</li> <li>People inspecting the a11y tree will be confused, since the tree isn't pruned. This was one of the complaints repeatedly received about Firefox's previous implementation. That said, I guess we can just refer them to the spec.</li> </ol> <p>And probably other issues I haven't thought of yet...</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal, thanks for the detailed response, and sorry if you find the conversation frustrating. I think it's helpful, though, and I would like to humbly point out that just trying to solve a technical problem is how a lot of significant usability problems start, and most of the time, under the best of intentions. It's also abundantly obvious that this is one of those issues that engenders a strong response given past discussions, perhaps not all of which have been experienced by everyone, so your patients is appreciated.</p> <p>I of course am very interested in and thankful for the issues that @jcsteh brings up.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/carmacleod"><img src="https://avatars.githubusercontent.com/u/3331913?v=4" />carmacleod</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@LJWatson I scanned 613 website home pages (I can scan more, but it would take a lot longer). The scan found 31 instances of aria-hidden. Data is pasted below. Note that for brevity I only printed the start tag of any element that contained aria-hidden. To see the full content of an element, please click on its URL and locate the element in its DOM.</p> <p><a href="http://msn.com">http://msn.com</a></p> <pre><code>Instances of aria-hidden: 1 Examples: [<div class="errmsg" aria-hidden="true" data-error-in-service-message="An unexpected error occurred, please try again.">]</code></pre> <p><a href="http://mit.edu">http://mit.edu</a></p> <pre><code>Instances of aria-hidden: 11 Examples: [<h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <svg width="85" aria-hidden="true" viewBox="0 0 73 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="mit-logo site-footer__logo">]</code></pre> <p><a href="http://web.archive.org">http://web.archive.org</a></p> <pre><code>Instances of aria-hidden: 12 Examples: [<a class="nav-search-button" href="https://archive.org/search.php" onclick="$(this).parents('#nav-search').find('form').submit(); return false" aria-hidden="true" >, <span class="iconochive-search" aria-hidden="true">, <a href="https://archive.org/details/inlibrary?sort=-publicdate" style="background-image: url('https://archive.org/images/book-lend.png');" aria-hidden="true" data-event-click-tracking="TopNav|CircleWidget-BooksToBorrow" >, <a href="https://openlibrary.org" style="background-image: url('https://archive.org/images/widgetOL.png');" aria-hidden="true" data-event-click-tracking="TopNav|CircleWidget-OpenLibrary" >, <a href="https://archive.org/details/tv" style="background-image: url('https://archive.org/services/img/tv');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/911" style="background-image: url('https://archive.org/services/img/911');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/etree" style="background-image: url('https://archive.org/services/img/etree');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/librivoxaudio" style="background-image: url('https://archive.org/services/img/librivoxaudio');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/internetarcade" style="background-image: url('https://archive.org/services/img/internetarcade');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/consolelivingroom" style="background-image: url('https://archive.org/services/img/consolelivingroom');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/metropolitanmuseumofart-gallery" style="background-image: url('https://archive.org/services/img/metropolitanmuseumofart-gallery');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/brooklynmuseum" style="background-image: url('https://archive.org/services/img/brooklynmuseum');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >]</code></pre> <p><a href="http://fao.org">http://fao.org</a></p> <pre><code>Instances of aria-hidden: 1 Examples: [<button type="button" class="close" data-dismiss="modal" aria-hidden="true">]</code></pre> <p><a href="https://census.gov">https://census.gov</a></p> <pre><code>Instances of aria-hidden: 1 Examples: [<i class="uscb-header-search-icon o-search-1" aria-hidden="true">]</code></pre> <p><a href="http://bu.edu">http://bu.edu</a></p> <pre><code>Instances of aria-hidden: 1 Examples: [<div id="buhp-navigation-modal" class="buhp-navigation-wrapper wp-prepress-component-modal is-style-full" aria-hidden="true">]</code></pre> <p><a href="http://prweb.com">http://prweb.com</a></p> <pre><code>Instances of aria-hidden: 1 Examples: [<a href='#top' title='Scroll to top' id='scroll-top-link' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'>]</code></pre> <p><a href="http://technorati.com">http://technorati.com</a></p> <pre><code>Instances of aria-hidden: 3 Examples: [<button class="clear_input" type="button" aria-hidden="true">, <span aria-hidden="true" class="ss-icon ss-delete">, <span aria-hidden="true" class="ss-icon ss-delete">]</code></pre> <p>In case it's interesting, here is <a href="https://carmacleod.github.io/playground/scanned-pages.txt">the full list of web pages scanned</a>. (697 were attempted, but due to errors or timeouts, only 613 could be scanned).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/carmacleod"><img src="https://avatars.githubusercontent.com/u/3331913?v=4" />carmacleod</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@LJWatson In case it's useful, I let the scan run on 10000 home pages, and found 529 instances of <code>aria-hidden</code>.</p> <p>Here's a really quick surface analysis of some of the uses:</p> <ul> <li>hiding (presumably decorative) svg's and icon font glyphs - valid uses of aria-hidden</li> <li>anchors, buttons, and elements with tabindex - invalid uses of aria-hidden that UA would ignore</li> <li>role=dialog/alertdialog elements with aria-hidden - I assume CSS hides these properly, and I also assume that scripting removes the aria-hidden when the dialog is visible (I didn't verify, though)</li> <li>tabpanels with aria-hidden=true/false, which I assume are being properly hidden/shown with CSS and scripting</li> </ul> <p>Here are a few oddities. I didn't look at any of these in situ (i.e. CSS/JS may fix them).</p> <ul> <li> <p><code><noscript aria-hidden="true" role="presentation"></code> not quite sure what the point of this one is 🤔 </p> </li> <li> <p><code><div class="svg-sprite-sheet sr-only" aria-hidden="true"></code> sr-only and aria-hidden seem a bit odd together (did the author want AT to see it or not?)</p> </li> <li> <p><code><nav class="offcanvas is-at-top-level" role="navigation" aria-label="Main Navigation" aria-hidden="true" id="MainMenu" aria-modal="true"></code> I'm guessing that the author was trying to hide offcanvas, tabindex=-1 nav links from AT by adding aria-hidden and aria-modal to the nav (which doesn't support aria-modal)</p> </li> <li> <p><code><a href="http://www.fnal.gov/pub/science/particle-physics/index.html" aria-hidden="true" role="presentation" tabindex="-1"></code> someone tried very hard to hide this link from AT, but didn't succeed (unless it's also hidden with CSS)</p> </li> </ul> <p>If anyone wants to do a deeper analysis of any of these 529 aria-hiddens, I've pasted the details below.</p> <details> <summary>529 instances of aria-hidden in popular web site home pages</summary> http://msn.com ``` Instances of aria-hidden: 1 Examples: [<div class="errmsg" aria-hidden="true" data-error-in-service-message="An unexpected error occurred, please try again.">] ``` http://mit.edu ``` Instances of aria-hidden: 11 Examples: [<h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <h3 class="spotlight-recirc__title" aria-hidden="true">, <svg width="85" aria-hidden="true" viewBox="0 0 73 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="mit-logo site-footer__logo">] ``` http://web.archive.org ``` Instances of aria-hidden: 12 Examples: [<a class="nav-search-button" href="https://archive.org/search.php" onclick="$(this).parents('#nav-search').find('form').submit(); return false" aria-hidden="true" >, <span class="iconochive-search" aria-hidden="true">, <a href="https://archive.org/details/inlibrary?sort=-publicdate" style="background-image: url('https://archive.org/images/book-lend.png');" aria-hidden="true" data-event-click-tracking="TopNav|CircleWidget-BooksToBorrow" >, <a href="https://openlibrary.org" style="background-image: url('https://archive.org/images/widgetOL.png');" aria-hidden="true" data-event-click-tracking="TopNav|CircleWidget-OpenLibrary" >, <a href="https://archive.org/details/tv" style="background-image: url('https://archive.org/services/img/tv');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/911" style="background-image: url('https://archive.org/services/img/911');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/etree" style="background-image: url('https://archive.org/services/img/etree');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/librivoxaudio" style="background-image: url('https://archive.org/services/img/librivoxaudio');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/internetarcade" style="background-image: url('https://archive.org/services/img/internetarcade');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/consolelivingroom" style="background-image: url('https://archive.org/services/img/consolelivingroom');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/metropolitanmuseumofart-gallery" style="background-image: url('https://archive.org/services/img/metropolitanmuseumofart-gallery');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >, <a href="https://archive.org/details/brooklynmuseum" style="background-image: url('https://archive.org/services/img/brooklynmuseum');" aria-hidden="true" data-event-click-tracking="ItemList|ItemListLink" >] ``` http://fao.org ``` Instances of aria-hidden: 1 Examples: [<button type="button" class="close" data-dismiss="modal" aria-hidden="true">] ``` http://bu.edu ``` Instances of aria-hidden: 1 Examples: [<div id="buhp-navigation-modal" class="buhp-navigation-wrapper wp-prepress-component-modal is-style-full" aria-hidden="true">] ``` http://prweb.com ``` Instances of aria-hidden: 1 Examples: [<a href='#top' title='Scroll to top' id='scroll-top-link' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'>] ``` http://nymag.com ``` Instances of aria-hidden: 23 Examples: [<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 23" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 23" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195 23" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 247 23" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233 23" aria-hidden="true">, <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" aria-hidden="true">, <svg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" aria-hidden="true">, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" aria-hidden="true">, <span class="expanded-terms " aria-hidden="true">, <div class="title-image" aria-hidden="true" data-editable="titleImage">, <div class="title-image" aria-hidden="true">, <div aria-hidden="true">, <span class="feed-callout" aria-hidden="true">, <span class="feed-callout" aria-hidden="true">, <span class="feed-callout" aria-hidden="true">, <div class="svg-header" data-editable="titleSVG" aria-hidden="true">, <div class="svg-header" data-editable="titleSVG" aria-hidden="true">, <div class="svg-header" data-editable="titleSVG" aria-hidden="true">, <div class="svg-header" data-editable="titleSVG" aria-hidden="true">, <div class="svg-header" data-editable="titleSVG" aria-hidden="true">] ``` http://technorati.com ``` Instances of aria-hidden: 3 Examples: [<button class="clear_input" type="button" aria-hidden="true">, <span aria-hidden="true" class="ss-icon ss-delete">, <span aria-hidden="true" class="ss-icon ss-delete">] ``` http://uky.edu ``` Instances of aria-hidden: 9 Examples: [<svg focusable="false" aria-hidden="true" viewBox="0 0 61 27" xmlns="http://www.w3.org/2000/svg">, <span class="ic ic--magnify" aria-hidden="true">, <span class="ic ic--menu" aria-hidden="true">, <svg focusable="false" aria-hidden="true" viewBox="0 0 61 27" xmlns="http://www.w3.org/2000/svg">, <span class="ic ic--magnify" aria-hidden="true">, <span class="ic ic--pin" aria-hidden="true">, <span class="ic ic--facebook-block" aria-hidden="true">, <span class="ic ic--pinterest-block" aria-hidden="true">, <span class="ic ic--youtube-block" aria-hidden="true">] ``` http://emory.edu ``` Instances of aria-hidden: 7 Examples: [<span aria-hidden="true" class="fab fa-facebook">, <span aria-hidden="true" class="fab fa-twitter">, <span aria-hidden="true" class="fab fa-instagram">, <span aria-hidden="true" class="fab fa-youtube">, <span aria-hidden="true" class="fab fa-linkedin">, <noscript aria-hidden="true" role="presentation">, <noscript aria-hidden="true" role="presentation">] ``` http://uic.edu ``` Instances of aria-hidden: 13 Examples: [<div class="header-background-image" aria-hidden="true" style="background-image: url(/_assets/1ebb934270c9662bb7e27857a1b1d06a.jpg)">, <div class="call-to-action-icon-container" aria-hidden="true">, <div class="call-to-action-icon-container" aria-hidden="true">, <div class="call-to-action-icon-container" aria-hidden="true">, <span class="reminders-icon-container" aria-hidden="true">, <div class="m-col-1-2 m-col-2-push-1" aria-hidden="true">, <div class="m-col-1-2 " aria-hidden="true">, <div class="m-col-1-2 m-col-2-push-1" aria-hidden="true">, <svg class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">, <svg class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">, <svg class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">, <svg class="arrow" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">, <img class="footer-brand" src="/images/footer-brand-mark.svg" alt="The University of Illinois at Chicago" aria-hidden="true">] ``` http://ala.org ``` Instances of aria-hidden: 1 Examples: [<span aria-hidden="true">] ``` http://xinmin.cn ``` Instances of aria-hidden: 15 Examples: [<i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">, <i class="fa fa-video-camera" aria-hidden="true">] ``` http://ou.edu ``` Instances of aria-hidden: 3 Examples: [<div class="carousel-inner" aria-hidden="true">, <a class="carousel-control left" href="#webcomm_carousel_1778209254" alt="Previous Image" data-slide="prev" tabindex="-1" role="button" accesskey="p" aria-hidden="true">, <a class="carousel-control right" href="#webcomm_carousel_1778209254" alt="Next Image" data-slide="next" tabindex="-1" role="button" accesskey="n" aria-hidden="true">] ``` http://swissinfo.ch ``` Instances of aria-hidden: 141 Examples: [<span class="fas fa-search" aria-hidden="true">, <span class="fas fa-caret-down" aria-hidden="true">, <span class="fas fa-bars" aria-hidden="true">, <img src="/image/45512026/3x2/305/203/1bef382c00ce4fafcd3a2a0b3ce02ce9/Sl/246516192_highres.jpg" data-interchange="[/image/45512026/3x2/305/203/1bef382c00ce4fafcd3a2a0b3ce02ce9/Sl/246516192_highres.jpg, (img_small)],[/image/45512026/3x2/640/426/1bef382c00ce4fafcd3a2a0b3ce02ce9/DK/246516192_highres.jpg, (img_medium)]" alt="Zwei Flaggen über einem See" title="Which way will the wind blow for Swiss-EU relations? (© Keystone / Gaetan Bally)" itemprop="http://schema.org/image" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45529156/3x2/305/203/f2c91ee4336f534b8d4cda5a38bea9dc/xw/114183185_highres.jpg" alt=" " title="Pro Infirmis's aim is to give a helping hand to people who need it (Keystone / Samuel Truempy)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45442998/large4x3/305/228/39b48d239b406981c77ae393d20a3c63/oJ/votazione-9.2-20---317397950_highres.jpg" alt="Gay Pride demonstrators in Bern" title=" (© Keystone/Peter Klaunzer)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45531238/3x2/305/203/9f372cb3c617f8c5e944d142d4a1477b/rF/341254605_highres.jpg" alt="Podium with government members and crowd of people below " title="Power-sharing is not only about voters' participation in ballots, elections or an open-air citizens' assembly but also about regional autonomy, parliaments and consultations. (Keystone/Patrick Huerlimann)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <img src="/image/45531248/3x2/305/203/749e1ea4ec311a3cf56f6f1397dd0ca0/RN/radon.jpg" alt="radon detector" title="Radon measuring device as seen in a house in Uri (Keystone / Urs Flueeler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <img src="/image/45531012/3x2/305/203/22bd7d52e606fbb7c54114474a7c1de3/hs/corona.jpg" alt="People in masks shopping" title="The Coronavirus has claimed more than 200 lives in China. (Keystone / Stringer)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <img src="/image/45530842/3x2/305/203/837da029b3cc747ea8c9f82bb08937d9/YE/beds.jpg" alt="Bunk beds in a room" title="The process for processing asylum applications has been speeded up in Switzerland. (© Keystone / Christian Beutler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <img src="/image/45530492/3x2/305/203/8b5a0f71b71835ac04b4b97bf27d0e6d/bU/assange.jpg" alt="Julian Assange " title="Assange divides public opinion: some think him a dangerous narcissist and others a defender of freedom. (Keystone / Facundo Arrizabalaga)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <span aria-hidden="true" class="date-in-list">, <span aria-hidden="true" class="date">, <img src="/image/40539342/3x2/305/203/de3ea5109fff00b6369032bb66d8c606/nQ/direct-democracy.jpg" alt=" " title=" (Keystone)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45528720/3x2/305/203/c20d7cf0e199545e01943f0a7c67a767/jN/locarno.jpg" alt="Woman sees herself on a mirror, with a city view sprawling beyond her window " title="A tale of adultery crossing moral, religious and class barriers: "Sorkhe Tirah" (Dark Red), by Diana Saqeb (Afghanistan). (Locarno Film Festival)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45530518/3x2/305/203/f69f814d784bf28925fce72a3330885a/Og/366332249_highres.jpg" alt="Frauen vor dem Auslandschweizer-Home." title="Chilling out in 1957 (Keystone / Alphons Biland)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45526280/3x2/305/203/fd1f5ee955efabb7e278405be6573be8/WL/406326258_highres.jpg" alt="People wearing EU and Union Jack scarves" title="British MEPs in the European Parliament on Wednesday: Britain will leave the European Union at the stroke of midnight in Brussels on Friday (Keystone)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45529164/3x2/305/203/1ec32e54e6141237520ff4a5c976f648/Ee/kang-fam-2-dennis-lindbom.jpg" alt="Emmanuel Mathias Geebelen and his family" title="Emmanuel Mathias Geebelen and his family (Dennis Lindbom)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <div class="fas fa-camera mm-icon" aria-hidden="true">, <img src="/image/45522742/3x2/305/203/949e996d2cfd4b5b85afcce188bb016/WV/a-worker-at-a-chute-in-juan-ttamin%C3%AC-a%C3%A2--s-mine--as-ore-is-emptied-from-a--truck-onto-the-chute--water-separates-the-gold-from-other-matter--the-precious-metal-is-the-caught-in-a-mat-below--the-2.jpg" alt=" " title=" (d)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45522094/3x2/305/203/69977f05f5f42b44e53c7d817d2960b/uq/382955004_highres.jpg" alt="Industrie" title="In Switzerland there are many highly-specialised industrial firms. (© Keystone / Christian Beutler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45444652/3x2/305/203/b34d95a4a728f5ff776b72c0fb114120/fC/_72b1623--1-.jpg" alt="Freiwillige verpacken die Ernte für die Auslieferung." title="Volunteers work together and reap the rewards together (swissinfo.ch)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45521968/3x2/305/203/59cf4e0d8149385ef690b49cf9a859e6/je/332187134_highres.jpg" alt="construction site" title="Opponents argue the initiative was counter-productive, while supporters say it is necessary to have more affordable housing.  (© Keystone/Gaetan Bally)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span aria-hidden="true" class="date">, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <div class="fas fa-camera mm-icon" aria-hidden="true">, <img src="/image/45520622/3x2/305/203/b7c648e37dd416b9263b98369980fdfc/qQ/mumenthaler---portrait-2.jpg" alt="Mumenthaler Teaser " title=" (Beat Mumenthaler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45515790/3x2/305/203/af0fc5c172a7a955056777a9a6b6c921/ER/363499550_highres.jpg" alt="Children in the old town of Bern do warm-up exercises on their skis" title="The winter of 1941/42 was a particularly hard one - or a good one for skiers, who could do their warm ups in town centres like here in Bern. (Keystone / Str)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45520744/3x2/305/203/ce8cd05567fb72c09972eb563dd475ea/GH/316534753_highres.jpg" alt="plane" title=" (© Keystone / Christian Beutler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45444658/3x2/305/203/34c3665062013d54c5cb1fa44486f456/pJ/29395865_highres.jpg" alt="An apprentice mechanic at vocational school with teacher" title="An apprentice mechanic at vocational school (Keystone / Martin Ruetschi)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45519942/3x2/305/203/89ba0f55f0c8fcb02c530a5f006e6213/UD/wef-tax-1.jpg" alt="WEF" title="One of the more lively debates at WEF 2020 was on how to tax companies when most business is done in markets where companies don't have a physical presence. (Keystone / Alessandro Della Valle)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45494004/3x2/305/203/7bb7093014fd7baf21f9a931316261b0/pW/190271830_highres.jpg" alt="Une boîte à bébés" title="La Suisse compte aujourd'hui huit boîtes à bébés installées dans des hôpitaux. (Keystone / Peter Schneider)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45507886/3x2/305/203/b955db37b21c9981ad7829862d982635/mB/thomas-with-students.png" alt="Thomas Geve shows students his concentration camp tattoo" title="Thomas Geve shows students his concentration camp tattoo (Thomas Geve)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45506940/3x2/305/203/a0dcd82d4efe42017087b6c8230e7b64/bD/338815044_highres-student.jpg" alt="students" title="Stress levels appear to be rising, reports say (© Keystone / Christian Beutler)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <img src="/image/45464524/3x2/305/203/b0478f4b0e538d843b1a9825eadd44b9/gL/swi_1219_greta_gysin_gp_02.jpg" alt="Gysin standing in the lobby of the parliament building " title="Gysin and other newly-elected parliamentarians were much sought after by the media, notably photographers, during the first session of the new parliamentary term. (Thomas Kern/swissinfo.ch)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <img src="/image/45495520/3x2/305/203/680fa428de9da4aeb2c28cb6670cd06/Nk/maninnet.jpg" alt="Man in net held by group of women " title=" (swissinfo.ch)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <span class='right fas fa-caret-up' aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <div class="fas fa-volume-up mm-icon" aria-hidden="true">, <img src="/image/45509398/3x2/305/203/cbb263bbb769d5d7d8ed1479b974d644/jt/405478388_highres.jpg" alt="people at big conference" title=" (Keystone / Alessandro Della Valle)" itemprop="url" aria-hidden='true' class="var-3x2"/>, <i class="fas fa-angle-up" aria-hidden="true">, <p aria-hidden="true">, <p aria-hidden="true">, <p aria-hidden="true">, <img src="/static/Themes/basic/img/logos/swi_logo_small_footer.png" data-interchange="[/static/Themes/basic/img/logos/swi_logo_small_footer.png, (default)],[/static/Themes/basic/img/logos/swi_logo_small_footer.png, (img_medium)],[/static/Themes/basic/img/logos/swi_logo_medium_footer.png, (img_medium_logo)]" alt="Front page - SWI swissinfo.ch" title="Front page - SWI swissinfo.ch" aria-hidden='true' class="logo-swi no-image-resize"/>, <img src="/static/Themes/basic/img/logos/footer_byline_small.png" alt="swissinfo.ch - a branch of Swiss Broadcasting Corporation SRG SSR" title="https://www.srgssr.ch/en/home/" aria-hidden='true' class="byline-logo"/>, <i class="fas fa-caret-down" aria-hidden="true">, <li class="parent-title" aria-hidden="true">, <a data-open="rssModal" tabindex="-1" aria-hidden="true" class="social-links">, <div id="rssModal" class="reveal tiny" data-reveal role="alertdialog" aria-hidden="true">] ``` http://vestacp.com ``` Instances of aria-hidden: 1 Examples: [<span aria-hidden="true">] ``` http://ddns.net ``` Instances of aria-hidden: 11 Examples: [<div id="cartModal" class="modal fade container-fluid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">, <button type="button" class="close close-cart" data-dismiss="modal" aria-hidden="true" onClick="ga('send', 'event', 'cartModal', 'click', 'x-close');">, <section id="addDomainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Add-Domain" aria-hidden="true">, <button type="button" class="close" data-dismiss="modal" aria-hidden="true">, <fieldset class="controls controls-row" aria-hidden="true">, <fieldset id="domain-options" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none;">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset id="NexusCountry" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none">, <section id="localizationModal" class="localization-modal modal fade center" tabindex="-1" role="dialog" aria-hidden="true">, <button type="button" class="modal-close-no-head close" data-dismiss="modal" aria-hidden="true">] ``` http://auburn.edu ``` Instances of aria-hidden: 2 Examples: [<span aria-hidden="true">, <span aria-hidden="true" class="glyphicon glyphicon-chevron-left">] ``` http://utm.edu ``` Instances of aria-hidden: 1 Examples: [<svg data-dismiss="modal" aria-hidden="true" viewport="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg">] ``` http://openculture.com ``` Instances of aria-hidden: 1 Examples: [<div id="lashare-holler" class="lashare-modal fade hollertemplate_facebook_like lashare-in" style="max-height: 978px; height: 0px; width: 0px; padding: 0px;" aria-hidden="false">] ``` http://wetpaint.com ``` Instances of aria-hidden: 2 Examples: [<div style="position: absolute; left: -5000px;" aria-hidden="true">, <div style="position: absolute; left: -5000px;" aria-hidden="true">] ``` http://sympatico.ca ``` Instances of aria-hidden: 25 Examples: [<span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://ttu.edu ``` Instances of aria-hidden: 3 Examples: [<div id="feature-slider" class="slider feature-slider" aria-hidden="true">, <div id="second-slider-image" class="slider slider-swipe secondary-slider" aria-hidden="true">, <div id="third-slider-image" class="slider slider-swipe secondary-slider" aria-hidden="true">] ``` http://sytes.net ``` Instances of aria-hidden: 11 Examples: [<div id="cartModal" class="modal fade container-fluid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">, <button type="button" class="close close-cart" data-dismiss="modal" aria-hidden="true" onClick="ga('send', 'event', 'cartModal', 'click', 'x-close');">, <section id="addDomainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Add-Domain" aria-hidden="true">, <button type="button" class="close" data-dismiss="modal" aria-hidden="true">, <fieldset class="controls controls-row" aria-hidden="true">, <fieldset id="domain-options" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none;">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset id="NexusCountry" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none">, <section id="localizationModal" class="localization-modal modal fade center" tabindex="-1" role="dialog" aria-hidden="true">, <button type="button" class="modal-close-no-head close" data-dismiss="modal" aria-hidden="true">] ``` http://uni-goettingen.de ``` Instances of aria-hidden: 2 Examples: [<span class="fa fa-chevron-left" aria-hidden="true">, <span class="fa fa-chevron-right" aria-hidden="true">] ``` http://slu.edu ``` Instances of aria-hidden: 1 Examples: [<div class="grid grid--scroll" aria-hidden="true">] ``` http://ulg.ac.be ``` Instances of aria-hidden: 1 Examples: [<span class="glyphicons glyphicon-info-sign" aria-hidden="true">] ``` http://environment.gov.au ``` Instances of aria-hidden: 1 Examples: [<noscript aria-hidden="true">] ``` http://businessdictionary.com ``` Instances of aria-hidden: 1 Examples: [<span class="fa fa-search fa-2x" aria-hidden="true">] ``` http://rollcall.com ``` Instances of aria-hidden: 1 Examples: [<div class="modal fade" id="ShowInterstitialAd" tabindex="-2" role="dialog" aria-labelledby="editSectionModal" aria-hidden="true" style="margin-left: auto;margin-right: auto;margin-top: 30px;padding-right: 0px;">] ``` http://fau.edu ``` Instances of aria-hidden: 5 Examples: [<span class="fa fa-facebook" aria-hidden="true">, <span class="fa fa-twitter" aria-hidden="true">, <span class="fa fa-facebook" aria-hidden="true">, <span class="fa fa-twitter" aria-hidden="true">, <span class="fa fa-youtube-play" aria-hidden="true">] ``` http://nv.gov ``` Instances of aria-hidden: 4 Examples: [<span class="carousel-control-prev-icon" aria-hidden="true">, <span class="carousel-control-next-icon" aria-hidden="true">, <div class="default-battleborn d-none d-sm-none d-md-block" aria-hidden="true">, <span aria-hidden="true">] ``` http://csulb.edu ``` Instances of aria-hidden: 1 Examples: [<header id="header" aria-hidden="true">] ``` http://qub.ac.uk ``` Instances of aria-hidden: 1 Examples: [<noscript aria-hidden="true">] ``` http://umt.edu ``` Instances of aria-hidden: 2 Examples: [<span aria-hidden="true">, <div class="col-sm-2 col-xs-3 text-center pull-left story-date" aria-hidden="true">] ``` http://pe.hu ``` Instances of aria-hidden: 1 Examples: [<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">] ``` http://minikami.it ``` Instances of aria-hidden: 2 Examples: [<a href="?s=" data-avia-search-tooltip="<form action="http://www.minikami.it/" id="searchform" method="get" class=""> <div> <input type="submit" value="î ƒ" id="searchsubmit" class="button avia-font-entypo-fontello" /> <input type="text" id="s" name="s" value="" placeholder='Cerca' /> </div></form>" aria-hidden='true' data-av_icon='î ƒ' data-av_iconfont='entypo-fontello'>, <a href='#top' title='Scorrere verso l’alto' id='scroll-top-link' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'>] ``` http://government.ru ``` Instances of aria-hidden: 29 Examples: [<li class="service-panel-icon-layer" aria-hidden="true">, <li class="service-panel-icon-layer" aria-hidden="true">, <li class="menu_item menu_item__special menu_item__icons" aria-hidden="true">, <div id="panel-1" class="tabs--vertical__panel_wrapper tabs--vertical__panel_wrapper--active" aria-labelledby="tab-1" role="tabpanel" aria-hidden="false">, <div id="panel-2" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-2" role="tabpanel" aria-hidden="true">, <div id="panel-3" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-3" role="tabpanel" aria-hidden="true">, <div id="panel-4" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-4" role="tabpanel" aria-hidden="true">, <div id="panel-5" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-5" role="tabpanel" aria-hidden="true">, <div id="panel-6" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-6" role="tabpanel" aria-hidden="true">, <div id="panel-7" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-7" role="tabpanel" aria-hidden="true">, <div id="panel-8" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-8" role="tabpanel" aria-hidden="true">, <div id="panel-9" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-9" role="tabpanel" aria-hidden="true">, <div id="panel-10" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-10" role="tabpanel" aria-hidden="true">, <div id="panel-11" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-11" role="tabpanel" aria-hidden="true">, <div id="panel-12" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-12" role="tabpanel" aria-hidden="true">, <div id="panel-13" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-13" role="tabpanel" aria-hidden="true">, <div id="panel-14" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-14" role="tabpanel" aria-hidden="true">, <div id="panel-15" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-15" role="tabpanel" aria-hidden="true">, <div id="panel-16" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-16" role="tabpanel" aria-hidden="true">, <div id="panel-17" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-17" role="tabpanel" aria-hidden="true">, <div id="panel-18" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-18" role="tabpanel" aria-hidden="true">, <div id="panel-19" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-19" role="tabpanel" aria-hidden="true">, <div id="panel-20" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-20" role="tabpanel" aria-hidden="true">, <div id="panel-21" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-21" role="tabpanel" aria-hidden="true">, <div id="panel-22" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-22" role="tabpanel" aria-hidden="true">, <div id="panel-23" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-23" role="tabpanel" aria-hidden="true">, <div id="panel-24" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-24" role="tabpanel" aria-hidden="true">, <div id="panel-25" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-25" role="tabpanel" aria-hidden="true">, <div id="panel-26" class="tabs--vertical__panel_wrapper" aria-labelledby="tab-26" role="tabpanel" aria-hidden="true">] ``` http://ivoox.com ``` Instances of aria-hidden: 4 Examples: [<span aria-hidden="true">, <div id="modal" data-urlorigin="http://www.ivoox.com/http://www.ivoox.com/" style="display: none;" class="remote-submit modal fade " tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="false" data-backdrop="static">, <div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">, <div class="modal fade" id="programHeader-modal" tabindex="-1" role="dialog" aria-labelledby="programHeader-modal-label" aria-hidden="true">] ``` http://stsci.edu ``` Instances of aria-hidden: 8 Examples: [<span class="sr-only" aria-hidden="true">, <div class="search-widget__panel js-search-panel" aria-hidden="true">, <nav class="offcanvas is-at-top-level" role="navigation" aria-label="Main Navigation" aria-hidden="true" id="MainMenu" aria-modal="true">, <h2 class="sr-only" aria-hidden="true">, <div class="hover-reveal__revealed variable-width" aria-hidden="true">, <div class="hover-reveal__revealed variable-width" aria-hidden="true">, <div class="hover-reveal__revealed variable-width" aria-hidden="true">, <div class="svg-sprite-sheet sr-only" aria-hidden="true">] ``` http://wgntv.com ``` Instances of aria-hidden: 1 Examples: [<button type="button" class="close" data-dismiss="modal" aria-hidden="true">] ``` http://utsa.edu ``` Instances of aria-hidden: 10 Examples: [<i aria-hidden="true" class="fa fa-globe orangetext">, <i aria-hidden="true" class="fa fa-newspaper-o orangetext">, <i aria-hidden="true" class="fa fa-map-o orangetext">, <i aria-hidden="true" class="fa fa-users orangetext">, <i aria-hidden="true" class="fa fa-search orangetext">, <i aria-hidden="true" class="fa fa-facebook utsa-social-circle text-center">, <i aria-hidden="true" class="fa fa-twitter utsa-social-circle text-center">, <i aria-hidden="true" class="fa fa-youtube-play utsa-social-circle text-center">, <i aria-hidden="true" class="fa fa-linkedin-square utsa-social-circle text-center">, <i aria-hidden="true" class="fa fa-instagram utsa-social-circle text-center">] ``` http://babylon.com ``` Instances of aria-hidden: 2 Examples: [<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://hopto.org ``` Instances of aria-hidden: 9 Examples: [<div id="cartModal" class="modal fade container-fluid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">, <button type="button" class="close close-cart" data-dismiss="modal" aria-hidden="true" onClick="ga('send', 'event', 'cartModal', 'click', 'x-close');">, <section id="addDomainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Add-Domain" aria-hidden="true">, <button type="button" class="close" data-dismiss="modal" aria-hidden="true">, <fieldset class="controls controls-row" aria-hidden="true">, <fieldset id="domain-options" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none;">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset id="NexusCountry" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none">] ``` http://tv5monde.com ``` Instances of aria-hidden: 2 Examples: [<svg aria-hidden="true" class="tv5monde-metanav-icon tv5monde-metanav-icon--logo">, <svg aria-hidden="true" class="tv5monde-metanav-icon tv5monde-metanav-icon--earth">] ``` http://karelia.ru ``` Instances of aria-hidden: 1 Examples: [<div class="modal modal_autoclosable modal_theme_small-modal popup popup_autoclosable i-bem" data-bem='{"modal":{},"popup":{"zIndexGroupLevel":20}}' role="dialog" aria-hidden="true">] ``` http://zapto.org ``` Instances of aria-hidden: 11 Examples: [<div id="cartModal" class="modal fade container-fluid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">, <button type="button" class="close close-cart" data-dismiss="modal" aria-hidden="true" onClick="ga('send', 'event', 'cartModal', 'click', 'x-close');">, <section id="addDomainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Add-Domain" aria-hidden="true">, <button type="button" class="close" data-dismiss="modal" aria-hidden="true">, <fieldset class="controls controls-row" aria-hidden="true">, <fieldset id="domain-options" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none;">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset class="controls controls-row topmarg-half" aria-hidden="true">, <fieldset id="NexusCountry" class="controls controls-row topmarg-half" aria-hidden="true" style="display:none">, <section id="localizationModal" class="localization-modal modal fade center" tabindex="-1" role="dialog" aria-hidden="true">, <button type="button" class="modal-close-no-head close" data-dismiss="modal" aria-hidden="true">] ``` http://fnal.gov ``` Instances of aria-hidden: 10 Examples: [<a href="http://www.fnal.gov/pub/science/lbnf-dune/index.html" aria-hidden="true" role="presentation" tabindex="-1">, <a href="http://www.fnal.gov/pub/science/particle-physics/index.html" aria-hidden="true" role="presentation" tabindex="-1">, <a href="http://fnal.gov/pub/science/particle-accelerators/index.html" aria-hidden="true" role="presentation" tabindex="-1">, <a href="https://fnal.gov/pub/science/particle-detectors-computing/index.html" aria-hidden="true" role="presentation" tabindex="-1">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://garant.ru ``` Instances of aria-hidden: 2 Examples: [<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">, <button type="button" class="close" data-dismiss="modal" aria-hidden="true">] ``` http://umsl.edu ``` Instances of aria-hidden: 3 Examples: [<div aria-hidden="â€trueâ€" class="logo-line">, <div aria-hidden="true" class="logo-line">, <div aria-hidden="”true”" class="logo-line">] ``` http://thefa.com ``` Instances of aria-hidden: 16 Examples: [<a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/24/240120-fa-youth-cup-6r">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/22/england-futsal-squad-named-for-euro-qualifiers">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/13/130120-shebelieves-cup-announcement">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/14/england-2019-players-of-the-year-revealed-140120">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/10/100120-gareth-southgate-on-squad-for-euros">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2019/dec/23/lewes-fc-festive-walking-football-231219">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2020/jan/20/200120-asian-community-news">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2019/dec/18/james-coyne-grassroots-coach-21-days-of-positivity-161219">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2019/nov/07/matchday-app-071119">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">, <a class="fa-content-promo__block-link" aria-hidden="true" tabindex="-1" href="http://www.thefa.com/news/2019/dec/18/fa-attends-un-forum-on-refugees-181219">, <svg class="fa-row-heading__arrow icon" width="20" height="20" aria-hidden="true" focusable="false">] ``` http://thefiscaltimes.com ``` Instances of aria-hidden: 1 Examples: [<div style="position: absolute; left: -5000px;" aria-hidden="true">] ``` http://upi.edu ``` Instances of aria-hidden: 5 Examples: [<i class="fa fa-bar-chart fa-5x " aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://duma.gov.ru ``` Instances of aria-hidden: 1 Examples: [<span class="menu-toggle__elements" aria-hidden="true">] ``` http://sonoma.edu ``` Instances of aria-hidden: 1 Examples: [<noscript aria-hidden="true">] ``` http://oakland.edu ``` Instances of aria-hidden: 1 Examples: [<ul id="drop2" data-dropdown-content="" class="f-dropdown" aria-hidden="true">] ``` http://rising.com.cn ``` Instances of aria-hidden: 2 Examples: [<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://clouddn.com ``` Instances of aria-hidden: 2 Examples: [<div class="modal fade bs-example-modal-lg" id="englishVideo" tabindex="-1" role="dialog" aria-labelledby="englishVideo" aria-hidden="true" style="display: none;">, <span aria-hidden="true">] ``` http://freddiemac.com ``` Instances of aria-hidden: 5 Examples: [<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 54 54">, <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 54 54" stroke-width="6">, <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="46" height="50" preserveAspectRatio="none" viewBox="0 2 24 22">, <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="48" height="50" preserveAspectRatio="none" viewBox="0 0 24 24">, <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="47" height="50" viewBox="0 -1 24 25">] ``` http://liveaapnews.com ``` Instances of aria-hidden: 2 Examples: [<i class='fa fa-angle-double-right' aria-hidden='true'>, <i class='fa fa-angle-double-left' aria-hidden='true'>] ``` http://msn.cn ``` Instances of aria-hidden: 1 Examples: [<div class="errmsg" aria-hidden="true" data-error-in-service-message="å?‘生æ„?外错误，请é‡?试。">] ``` http://cast.org ``` Instances of aria-hidden: 5 Examples: [<span class="caret" aria-hidden="true">, <span class="caret" aria-hidden="true">, <span class="caret" aria-hidden="true">, <span class="caret" aria-hidden="true">, <ul class="topnavTTS" aria-hidden="true" ignore="true">] ``` http://bbk.ac.uk ``` Instances of aria-hidden: 6 Examples: [<a class="logo--owl" href="http://www.bbk.ac.uk" title="Birkbeck homepage" aria-hidden="true">, <svg class="icon icon--ok" aria-hidden="true">, <svg class="icon icon--ok" aria-hidden="true">, <svg class="icon icon--ok" aria-hidden="true">, <svg class="icon icon--ok" aria-hidden="true">, <svg class="icon icon--ok" aria-hidden="true">] ``` http://erau.edu ``` Instances of aria-hidden: 8 Examples: [<div class="icon icon-er-applied-science" aria-hidden="true">, <div class="icon icon-er-aviation" aria-hidden="true">, <div class="icon icon-er-business" aria-hidden="true">, <div class="icon icon-er-computers" aria-hidden="true">, <div class="icon icon-er-engineering" aria-hidden="true">, <div class="icon icon-er-security" aria-hidden="true">, <div class="icon icon-er-space" aria-hidden="true">, <div id="news-5dc841fa-c4fb-473f-bb0f-69002542d582" class="owl-carousel owl-theme col-xs-12 unpad" aria-hidden="true">] ``` http://zxxk.com ``` Instances of aria-hidden: 1 Examples: [<svg class="icon" aria-hidden="true">] ``` http://missingkids.com ``` Instances of aria-hidden: 8 Examples: [<span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">, <span aria-hidden="true">] ``` http://tcm.com ``` Instances of aria-hidden: 1 Examples: [<div class="modal fade" id="gigyaModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">] ``` http://scarlet.be ``` Instances of aria-hidden: 1 Examples: [<i class="icon icon-scarletlogo" aria-hidden="true">] ``` http://spettacolovivo.it ``` Instances of aria-hidden: 4 Examples: [<i class="fa fa-play-circle" aria-hidden="true">, <i class="fa fa-play-circle" aria-hidden="true">, <i class="fa fa-play-circle" aria-hidden="true">, <i class="fa fa-play-circle" aria-hidden="true">] ``` http://barebones.com ``` Instances of aria-hidden: 1 Examples: [<div style="position: absolute; left: -5000px;" aria-hidden="true">] ``` http://cialisonla.com ``` Instances of aria-hidden: 1 Examples: [<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">] ``` http://uprrp.edu ``` Instances of aria-hidden: 21 Examples: [<i aria-hidden="true" class="fas fa-landmark">, <i aria-hidden="true" class="fas fa-pencil-alt">, <i aria-hidden="true" class="fas fa-book-reader">, <i aria-hidden="true" class="fas fa-map-marker-alt">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-file">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-plus-circle">, <i aria-hidden="true" class="fas fa-phone">, <i aria-hidden="true" class="fas fa-book">, <i aria-hidden="true" class="fas fa-map-marker-alt">, <i aria-hidden="true" class="fab fa-facebook">, <i aria-hidden="true" class="fab fa-twitter">, <i aria-hidden="true" class="fab fa-instagram">, <i aria-hidden="true" class="fab fa-youtube">, <i aria-hidden="true" class="fas fa-podcast">, <i class="fa fa-chevron-up" aria-hidden="true">] ``` http://unair.ac.id ``` Instances of aria-hidden: 6 Examples: [<span class="ua-nav glyphicon glyphicon-menu-left" aria-hidden="true">, <span class="ua-nav glyphicon glyphicon-menu-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">, <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">] ``` http://lunarpages.com ``` Instances of aria-hidden: 2 Examples: [<div class="modal fade" id="login-drop" tabindex="-1" role="dialog" aria-labelledby="login-dropLabel" aria-hidden="true">, <span aria-hidden="true" class="demo-icon icon-cancel">] ``` http://aig.com ``` Instances of aria-hidden: 3 Examples: [<ul id="list-items-1" aria-hidden="true">, <ul id="list-items-2" aria-hidden="true">, <ul id="list-items-3" aria-hidden="true">] ``` http://bostonreview.net ``` Instances of aria-hidden: 10 Examples: [<i class="header-menulink-icon" aria-hidden="true">, <div style="position:absolute;left:-3000px;" aria-hidden="true">, <div class="featuredpromo-accents" aria-hidden="true">, <div class="featuredpromo-accents featuredpromo-accents_front" aria-hidden="true">, <div class="featuredpromo-accents" aria-hidden="true">, <div class="featuredpromo-accents featuredpromo-accents_front" aria-hidden="true">, <div class="featurednewsletter-accents" aria-hidden="true">, <div style="position:absolute;left:-3000px;" aria-hidden="true">, <div class="featurednewsletter-accents" aria-hidden="true">, <div style="position:absolute;left:-3000px;" aria-hidden="true">] ``` </details> <p>Attribution and appreciation to <a href="https://blog.majestic.com/development/majestic-million-csv-daily/">Majestic Million</a> for their list of the top million websites.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jcsteh some of the concerns seem to be the amount of work, and some others, I think are addressed by exposing both the state and object attribute, which is what Chrome does for aria-hidden focusable objects. We don't seem to have any issues with that. Regarding hit testing / mouse tracking, doesn't NVDA respect the results that come back from accHitTest()? Isn't it up to the browser to not return hidden objects there?</p> <p>I'm not sure about going through all these concerns point by point, because I feel like in general people are against this either way, and this really only affects poorly authored pages.</p> <p>Would everyone be happier if we defined some cases where aria-hidden is invalid? For example, we could consider disallowing aria-hidden content on</p> <ul> <li>anything focusable (as Chrome does now)</li> <li>iframe, frame, body, html elements (or if there is a purpose for hiding an entire document, perhaps we at least disallow hiding the top level document). </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Closing this issue as it is more controversial than I anticipated. Opening issue 1190 instead, to ban aria-hidden on body and html elements.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ggordon-vispero"><img src="https://avatars.githubusercontent.com/u/25306242?v=4" />ggordon-vispero</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>We have run into this again with a Timekeeping app called UltiPro. There is a form the user must fill out to request time off, but unfortunately it has been marked up with aria-hidden="true".</p> <p><code><form name="page_form" method="POST" action="/usg/ta/top/timeOffCalendar.jsp" onsubmit="return wbValidateForm();" aria-hidden="true"></code></p> <p>It's definitely another case where aria-hidden was injected automatically or the developer was unfamiliar with aria-hidden. The child <code><div></code> of the <code><form></code> element is marked up with aria-hidden="false", but this of course is overridden since the parent is marked up with aria-hidden="true". Good times.</p> <p><code><div class="modal ui-draggable is-visible" role="dialog" aria-hidden="false" style="z-index: 1001; transform: scale(1); left: 1141.5px; top: 445.5px;"></code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>What's the history behind having aria-hidden="false" on a descendant not make a subtree visible when an ancestor has aria-hidden="true"? I think this might be a source of most of these issues, and it's easy for developers to make that mistake. After all, why bother putting aria-hidden="true" on a descendant in that case? It makes sense for CSS display to work that way because everything has a default display style.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/carmacleod"><img src="https://avatars.githubusercontent.com/u/3331913?v=4" />carmacleod</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't know the history, but I do think the spec for <a href="https://w3c.github.io/aria/#aria-hidden">aria-hidden</a> isn't helping. It lists "false" as a valid value in its characteristics and values tables, and even defines the "false" value as:</p> <blockquote> <p>The element is exposed to the accessibility API as if it was rendered.</p> </blockquote> <p>Then it backpedals by adding a note that says:</p> <blockquote> <p>NOTE At the time of this writing, aria-hidden="false" is known to work inconsistently in browsers. As future implementations improve, use caution and test thoroughly before relying on this approach.</p> </blockquote> <p>If I had to guess, I'd say many authors ignore that note, thinking, "Surely false will work according to spec soon enough, and browsers are probably working hard to fix any inconsistencies". 😄 </p> <p>Further, the spec for <code>aria-hidden</code> suggests that authors add the following line to their CSS:</p> <pre><code class="language-css">[aria-hidden="true"] { visibility: hidden; }</code></pre> <p>which completely negates the whole purpose for having an <code>aria-hidden</code> attribute.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/scottaohara"><img src="https://avatars.githubusercontent.com/u/4152514?v=4" />scottaohara</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@carmacleod, yes. i'm slowly but surely researching <a href="https://github.com/w3c/core-aam/issues/58">Core AAM #58</a> which will cover what you mentioned / likely require some modifications to the ARIA spec.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Here's a new example of the problem, on the vanguard site:</p> <ol> <li>Visit <a href="https://personal.vanguard.com/us/investnow/si/oaeviastart.jsp">https://personal.vanguard.com/us/investnow/si/oaeviastart.jsp</a></li> <li>Click the continue button A simulated modal dialog opens, where the content is not accessible because of aria-hidden="true" on an ancestor. This is the fourth or fifth example I've seen of the issue since I started paying attention a few months ago.</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Are there any legitimate uses of aria-hidden="true" where visible elements reachable with the tab key are contained within the subtree? Can we error correct for those cases?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcsteh"><img src="https://avatars.githubusercontent.com/u/4166475?v=4" />jcsteh</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Error correcting for a condition like "visible elements reachable with the tab key" opens up a whole lot of problems. Two examples off the top of my head:</p> <ol> <li>Do you include their ancestors or not?</li> <li>You'd end up with a patchwork tree where potentially important surrounding content is missing. For example, say you have a form inside an aria-hidden subtree, but the form contains explanatory text essential to complete the form. Or perhaps the form doesn't properly associate labels, in which case the labels wouldn't be accessible at all. The user might think they're seeing the whole picture when they aren't, causing them to fill it in incorrectly. They don't know that some author screwed up and the browser is trying to second guess the author. Yes, it's obviously bad that the user can't access huge parts of a page. But if the browser error corrects, gives the user a false sense of security and makes them believe something that isn't true (e.g. missing explanitory content on a form), without even telling the user it happened, that's far worse.</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jcsteh, what if we were allowed consider an entire aria-hidden illegal in the case where there are visible elements reachable with the tab key. The entire subtree would get its aria-hidden cancelled.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcsteh"><img src="https://avatars.githubusercontent.com/u/4166475?v=4" />jcsteh</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <ol> <li>Define visible. Are we just talking something that doesn't have display: none? Or do we consider off-screen content as hidden? What about z-index, opacity, etc.?</li> <li>What if the focusability changes (e. disabled element, tabindex changing)? Do we just keep throwing away and rebuilding the tree?</li> <li>Do we consider elements that are focusable but not tabbable (tabindex="-1")? If not, why not?</li> <li>What about the Google Groups case (maybe this is gone now?) where we have something like: <div role="button" aria-label="blah"><input type="text" aria-hidden="true"></div> <p>(where the input is visually hidden) My understanding is that this was one of the reasons Google was originally pushing for hidden/presentational focusable content to be unconditionally pruned from the tree.</p></li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Awesome Q's. I'm not going to answer all of them right now. I'd like someone to say this is a reasonable direction to explore, and that we should define an error case, where the browser is allowed to ignore aria-hidden.</p> <p>Or, can someone suggest an alternative other than giving up on these cases?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>For what it is worth, I do not believe the browser should ever ignore aria-hidden.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@sinabahram what should a user do that needs to access hidden content?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal, a few different concepts come to my mind when considering this.</p> <p>Should the browser ever ignore aria-hidden automatically?</p> <p>I struggle with that and err on the side of no because I am incredibly concerned about these kinds of author mistakes not being appropriately flagged, remediated, and used for educational purposes. We’ve had a similar discussion to this on another thread, so I don’t wish to bring up the same concerns, which triggered a strong response, but I do not believe that the browser should always fix something, which would prevent the appropriate actions to be taken by authors, content creators, business owners, etc. to resolve things in a more meaningful and comprehensive way, especially a way that adds to the experience of developers for future websites they create.</p> <p>If we aren’t talking automatically e.. there is a context menu that says “ignore aria-hidden on this page and reload” or something along those lines, then of course there’s a slippery slope to be aware of, for sure, but I find myself at least thinking of that as a dev or power-user tool with potential benefits. Does the user know the content they need to access is incorrectly aria-hidden? That seems like it would be true for an incredibly small amount of users, though, so I’m not sure if that’s at all of interest compared to the browser doing it automatically, just in terms of reach.</p> <p>I’m also concerned about situations where patterns exist that have a visible component, which is being aria-hidden on purpose to achieve a good experience for everyone e.g. imagine a card with a title, which is also a heading and a link, along with some CTA text, maybe an image, and then another link that says “learn more”, where it is guaranteed that those consecutive links always go to the same place. Now, let’s put aside the insufficiency of “learn more” as link text, because that’s a whole other set of issues, but one nice thing that can be done in those situations is to put an aria-hidden and tabindex of -1 on that “learn more” link, so that each card is only a single tab stop for sighted keyboard users, for screenreader users too, and the continuous “learn more” links don’t pollute an otherwise pleasant navigational and reading experience. Yup, other solutions exist as well, like block links, but I’m just laying out a super-common pattern that we’ve come across repeatedly.</p> <p>I would imagine something like this being in conflict with a pattern like that, but maybe I’m wrong?</p> <p>I suppose my metric would be that the browser has the potential to make something worse, not better, by ignoring aria-hidden, and also that philosophically, shouldn’t the author’s intentions be respected, even when they are wrong?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mraccess77"><img src="https://avatars.githubusercontent.com/u/5640755?v=4" />mraccess77</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>If browsers respect aria-hidden on focusable element I'm worried the user will reach something with no accessibility properties. I'd argue that if aria-hidden is applied to a focusable element that is not inert, hidden, or otherwise removed then aria-hidden true should not be legal. I can't think of a case where aria-hidden true on on something that has active keyboard focus is ever a good idea.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I’m neither advocating for this nor not, but just to point out that some folks may put aria-hidden=”true” on something, not put tabindex=-1 because they actually want the thing to get focus, then dispatch those focus events to an offscreen accessible version, while visually changing state on-screen, thereby keeping a 1-to-1 state between on/off-screen.</p> <p>Again, not advocating for it, just stating it very much exists.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/mraccess77"><img src="https://avatars.githubusercontent.com/u/5640755?v=4" />mraccess77</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I'd be fine with an explicit tabindex=-1 and aria-hidden true to cause a focusable element not be in the tree. My concern is more with things that can actively be focused.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Right, but that’s the opposite of what I said, because they would not have the tabindex=-1 there, no?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/accdc"><img src="https://avatars.githubusercontent.com/u/1865064?v=4" />accdc</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi, I understand the point about browsers having to do extra work, however there are critical accessibility issues for non-sighted screen reader users that cannot be handled in any other way as a result of this.</p> <p>Here is a real-world example of why. There is an application called Resilio Sync, which is a folder synchronizing application that works across various platforms. When you first run the installer, you have to sign in through your web browser, and they incorrectly have aria-hidden="true" on the body, and aria-hidden="false" on the dialog that has the required account creation form fields, under the mistaken impression that one will cancel out the other. Because browsers are incorrectly handling this by hiding focusable form fields, it is literally impossible for all non-sighted screen reader users to sign up for this process. So, because I use this application a lot, I had to write a JavaScript bookmarklet that I can run from an external server that will scan the page I'm on and automatically remove every instance of aria-hidden="true" that it finds, just because there was no way for me to access this information otherwise. This is not a reasonable solution for the general public, and I was only able to do this myself because I was frustrated enough and I knew how to do it.</p> <p>I will argue that any element, as soon as it receives focus using any method supported by the browser for making an element focusable including tabindex="0" in the tab order or tabindex="-1" by using element.focus() to set focus to it programmatically, should always be exposed in the accessibility tree regardless whether it includes aria-hidden="true" or role="presentation" or role="none", especially since there is no way to override what browsers do in this context from within screen reader settings.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcsteh"><img src="https://avatars.githubusercontent.com/u/4166475?v=4" />jcsteh</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@accdc, this isn't just about browsers having to do more work, although that is a significant issue; see <a href="https://github.com/w3c/aria/issues/1185#issuecomment-580331860">https://github.com/w3c/aria/issues/1185#issuecomment-580331860</a>. However, aside from the fact that this is a backwards incompatible change, there are critical questions which haven't been satisfactorily addressed; see <a href="https://github.com/w3c/aria/issues/1185#issuecomment-591650313">https://github.com/w3c/aria/issues/1185#issuecomment-591650313</a> and <a href="https://github.com/w3c/aria/issues/1185#issuecomment-591656012">https://github.com/w3c/aria/issues/1185#issuecomment-591656012</a>, and those are just the problems I was able to come up with off the top of my head without putting much thought into it. IMO, until these are satisfactorily addressed, this is not something we should even consider implementing.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/aleventhal"><img src="https://avatars.githubusercontent.com/u/1376358?v=4" />aleventhal</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I'd like to reopen this issue. Found 2 more reasons that should be discussed.</p> <ol> <li>Hidden content can be the end target of a relation, whether aria-hidden, display:none, visibility-hidden, or content-visibility:hidden</li> <li>Sometimes aria-hidden is used on visible content to avoid redundant verbalizations in the screen reader. However, it's still on the screen, and needs to respond to features like ChromeOS Select To Speak (user can draw a rectangle on the screen and have the contained content spoken), or screen reader features to speak content on mouseover.</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't understand your second point. Why are we talking about visible VS focusable. Did we agree that visible stuff with aria-hidden should not honor aria-hidden? I definitley agree there are valid usecases where visible content must be allowed to have aria-hidden, from icons who meaning is conveyed through other means to custom implementations of various controls where the author very much knows what they are doing from an accessibility perspective.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@aleventhal thanks a ton for the chat. I'm 100% clear on this now. I withdraw my confusion. The issue at hand here is using the mouse while a screen reader is enabled. In that specific situation, the object with aria-hidden of true must be able to be read because the mouse is the indicator of regard not focus or virtual buffer position; therefore, it makes complete sense to consider that case for a variety of users from cognitive and reading differences to low vision folk to facilitating exploration by blind users. This in no way harms blind screen reader users just using the keyboard, as the invisible trait on Windows and other platforms can be used to indicate to the screen reader when to read and when not to read the object, simply based on whether or not invisible is set and mouse was used to get there VS keyboard or other means.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/MarcoZehe"><img src="https://avatars.githubusercontent.com/u/1568574?v=4" />MarcoZehe</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>FWIW, when Firefox finally implemented aria-hidden in the "prune the entire sub tree" sense, we got a complaint from one of the screen magnifier vendors, namely Dolphin, who had used our previous implementation of keeping aria-hidden stuff in a separate tree, to still be able to highlight, zoom in on, etc., these accessible objects. Because even though they were aria-hidden, they still had valid screen coordinates in our implementation. But because we were asked so often to comply with the spec, even though our approach had many advantages, which we also clearly communicated more than once, we caved in.</p> <p>But FWIW, I think we had both your new raised points already solved in Firefox until we caved in and pruned the tree.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcsteh"><img src="https://avatars.githubusercontent.com/u/4166475?v=4" />jcsteh</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <blockquote> <pre><code>1. Hidden content can be the end target of a relation, whether aria-hidden, display:none, visibility-hidden, or content-visibility:hidden</code></pre> </blockquote> <p>Then why is it hidden in the first place? For aria-labelledby/describedby, browsers already handle that. For other relations, it simply doesn't make sense.</p> <blockquote> <pre><code>2. Sometimes aria-hidden is used on visible content to avoid redundant verbalizations in the screen reader. However, it's still on the screen, and needs to respond to features like ChromeOS Select To Speak (user can draw a rectangle on the screen and have the contained content spoken), or screen reader features to speak content on mouseover.</code></pre> </blockquote> <p>So now we're defining aria-hidden as "content that shouldn't be spoken by a screen reader when using the keyboard or moving the focus". That's pretty AT specific and certainly isn't what the spec says. If we wanted that, it should be called aria-hidden-from-keyboard-sr or something.</p> <p>What about touch screens? Should it be hidden when moving by object with a touch screen? Should it be hidden from explore by touch?</p> <p>The fundamental problem here is that the semantic purpose of aria-hidden was always poorly defined. IMO, we should quit trying to re-specify aria-hidden and instead create new attributes that more accurately reflect the actual intent of the author.</p> <blockquote> <p>But FWIW, I think we had both your new raised points already solved in Firefox until we caved in and pruned the tree.</p> </blockquote> <p>That depends on your definition of "solved". NVDA mouse tracking users had aria-hidden content reported to them, which is what <a href="https://github.com/w3c/aria/issues/1185#issuecomment-638952230">https://github.com/w3c/aria/issues/1185#issuecomment-638952230</a> requests. But actually, this was reported as a bug against NVDA; see <a href="https://github.com/nvaccess/nvda/issues/4322">https://github.com/nvaccess/nvda/issues/4322</a>. So, apparently, this isn't always what people want in the real world. Which leads us back to the problem of trying to overload a single, vague attribute with several different intents.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sinabahram"><img src="https://avatars.githubusercontent.com/u/1811181?v=4" />sinabahram</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jcsteh your point about necessary semantic attributes is accurate, but there's stuff that can be done now VS later. Are you not ok with doing something better about aria-hidden behavior now while something like better attributes can be discussed for 1.3/beyond? Trying not to let the perfect be the enemey of the good.</p> </div> </div> <div class="page-bar-simple"> <a href="/w3c/aria/1185?page=2" class="next">Next</a> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Unfortunately, aria-hidden often gets applied to something that shouldn’t be hidden (e.g. an