Accessibility - Skip content or navigation

[Revanuru]

My actions were as follows:

1. Compliance with WCAG 2.4.1 https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html: The expected result: Keyboard - There is a mechanism to skip to content, or skip past navigation. The actual result was : On an iOS mobile device, activating the "skip to main content" link using a keyboard does not work. When the keyboard focus is on the "skip to main content" link, pressing enter moves the focus of the page to the main content but pressing tab again directs users back to the "skip to main content" link rather than the next focusable element in the main content.

Can someone help me if the non-compliance with WCAG 2.4.1 on a mobile device is an LGD issue?

[Revanuru]

https://github.com/localgovdrupal/localgov_base/assets/139997807/e1d90e36-ddd1-4bcd-a371-18bece9da56d

Pls find attached the video for your reference!

[markconroy]

Interesting, thanks for posting this. Would you be able to get the Nomensa folk to see if they can create a fix for it for us, and I can test it for them?

[Revanuru]

Thanks Mark - can ask them!

[markconroy]

Hi @Revanuru, can you test this again? I'm trying to replicate it but can't. I don't have a physical keyboard plugged into an iphone but any other simulator I am using I am not getting this result.

---

Thanks to Big Blue Door for sponsoring my time to work on this.

[Revanuru]

Hi Mark - thanks for looking into this! Just had a quick read through of the ticket again, I think it specifies more on the external keyboard attached to the iOS device! However I will also check from my end, the test analyst currently on leave, I will ask them to retest too!

[markconroy]

Thanks very much @Revanuru

[anthonylindsay]

I've got an external keyboard. I can replicate the issue. Fundamentally, from my reading, it's an IOS bug. Focus doesn't go to the target. It gets dropped back to body instead. Will try forcing focus with some Javascript as a workaround for the skip-link.

I expect, although I have not yet tested/proved it, that this will affect all in-page-jump-links. We can cross one bridge at a time I guess.

[anthonylindsay]

FWIW, I think it's pretty widespread. Not just an LGD thing, like. I've seen it on all sorts of Drupal sites, once I went looking. Haven't really looked wider tbh.

[anthonylindsay]

I have a solution here. Well, a workaround, but it seems to work. Will whip up a PR. Any testing will require an IOS device + external keyboard in real life.

[anthonylindsay]

PR here https://github.com/localgovdrupal/localgov_base/pull/587

[markconroy]

Howdy @anthonylindsay

I'm back out from about an hour and a half down a 🐰 hole, trying to get a keyboard connected to an iPad and iPhone to not-much-luck.

If possible, I'd like to find a more simple solution than beating it with the JavaScript stick and adding a new library.

From my reading - while not able to get the keyboard connected - it looks like the issue might be the .visually-hidden class using the clip property which is deprecated. I wonder could you test just removing the clip property from .visually-hidden or setting it to clip: initial or something like that to see if it fixes the issue?

Failing that, maybe we could set add clip-path: rect(1px,1px,1px,1px); instead of clip and see if that helps?

Also, if this is happening across Drupal sites and is not specific to LGD, it might be worth reporting it in the core issue queue and see can we get it fixed for everyone.

[anthonylindsay]

I don't get it. How's clip involved?

FWIW, I too would like a simple solution, but it seems Apple has other ideas.

[anthonylindsay]

In any case, as far as I can see, clip has no effect on the keyboard behaviour. I tried clip: initial and removing .visually-hidden altogether.

Whilst it's not specific to LGD, as far as I can tell/have read, it is really up to Apple to solve. Anything we do here or in core is really a workaround. Like one might have done for IE6 back in the day.

[markconroy]

Presuming iOS will allow you to tab to other links, click on them via keyboard, and then jump to that link (if it's an internal page link), I'm stumped as to why it doesn't allow that behaviour for a skip-to-content link.

[anthonylindsay]

Yep, it's a dilly of a pickle.

[anthonylindsay]

I have a better solution! More reading, and consulting with the accessibility $deities led me to tabindex="-1" Seems to work a treat. Will kill off old PR and spin up new PR.

[anthonylindsay]

There now: much, much simpler PR. https://github.com/localgovdrupal/localgov_base/pull/589 I guess we still need someone else to be able to validate it as a solution though.

[markconroy]

589 is merged now, I'll get a release out soon.

Thanks very much for this work.

[anthonylindsay]

Yay!