localgovdrupal / localgov_base

The base theme for LocalGov Drupal websites.
8 stars 15 forks source link

Accessibility - Skip content or navigation #478

Closed Revanuru closed 2 months ago

Revanuru commented 1 year ago

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 commented 1 year ago

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

Pls find attached the video for your reference!

markconroy commented 1 year ago

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 commented 1 year ago

Thanks Mark - can ask them!

markconroy commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

Thanks very much @Revanuru

anthonylindsay commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

markconroy commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Yep, it's a dilly of a pickle.

anthonylindsay commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

Thanks very much for this work.

anthonylindsay commented 2 months ago

Yay!