"Hidden button receives focus on the homepage"

[lol768]

p135 of the reaudit report

Issue (WCAG-020) – Hidden button receiving focus [Low priority] – Not Fixed Pages affected: 1
Platforms affected: Desktop

On the homepage, there is a hidden heading and button in the footer. The hidden heading is not technically an accessibility failure.

However, the hidden button does not indicate focus when you tab onto it, there is no visible button label, and nothing happens when you activate it.

This may be particularly confusing for sighted keyboard users. When tabbing through the end of the page, it is not clear what element is receiving focus.

The child content, which is an SVG, has aria-hidden, but this does not stop the parent button from receiving focus. It merely hides the SVG inside the button.

Figure 117 – hidden button receiving focus in the footer (page 1)

Recommendation

Remove this button from the focus order. You could remove it wholesale from the site. If this is not possible, there are a few options.

Use hidden, display:none, or tabindex=“-1” in addition to aria- hidden=“true”.

For more information, see Cloud Four - Hidden Content and accessibility.
https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/

[halfninja]

One solution was attempted that made the close button not-tabbable, but this doesn't really help screenreaders. Proper solution is probably to make the whole widget not visible to screenreaders whenever it's not visible visible, either by using aria-hidden on the whole element or by changing to use display:none rather than throwing it far off the viewport.