Code example for visually hidden elements isn’t cross-browser compatible

[AndreasMoesch]

In the chapter about visually hiding elements the second code example should illustrate how you can toggle the visibility of visually hidden elements on focus.

Code Example: Toggling visibility of a hidden element on focus

The instruction is to use Tab to move the focus and toggle the visibility of the “Jump to content” link. This works well in Chrome but doesn’t work in Firefox (version 71) or Safari (version 13.0.4). I haven’t tested in Edge or IE.

[jmuheim]

Works well for me in FF72/macOS:

Also in Safari 13.0.5:

[backflip]

@AndreasMoesch, could you retest this by any chance?

[AndreasMoesch]

@backflip Successfully tested don Firefox 87.0 and on Safari 14.0.3 (both on macOS)

The thing about Safari though: it doesn’t support support tabbed navigation per default. You have to activate it in the Safari app settings 🤷

If this setting isn’t activated the example won’t work, but I think there isn’t anything we can do about it.

[backflip]

@AndreasMoesch, ah, good point. I guess what we could do is adding a Safari page to https://github.com/Access4all/adg/tree/master/pages/setup/browsers where this setting is explained. WDYT?

[NicSR]

@AndreasMoesch, are there other settings to activate in safari? Maybe then it is important to add a Safari page? What do you think? And thanks for your input.

[jmuheim]

@NicSR, Andreas Moesch isn't working in the field anymore, as far as I know.

[AndreasMoesch]

@NicSR, Andreas Moesch isn't working in the field anymore, as far as I know.

That is indeed the case @jmuheim. I’m afraid I can’t be of help anymore in this regard.