Bypass blocks

[martyn-w]

Ensures that when the user clicks on "skip to main content" they arrive directly at the main content and are not presented with a back button as the first link.

Trello card

5442

Context

Following a DAC Audit, it was noted that repeated content blocks should be bypassed when clicking on "Skip to main content", to aid accessibility of the site and comply with WCAG 2.4.1

Changes proposed in this pull request

Implement required changes on the mailing list signup wizard, as a precursor for rolling out to other areas of the site.

Guidance to review

• Please test the "Skip to main content" button now skips to the correct part of the page on the signup form
• Please test on both webbrowser and tablet/phone
• Verify the look and feel of the site is otherwise unchanged

[ekumachidi]

Looks good to me

[martyn-w]

Should be OK to merge on Monday 8/1

[gemmadallmandfe]

I've successfully tested the changes on the front end on desktop as a keyboard user, for the following forms:

• mailing list
• events
• adviser
• callback
• feedback

Focus from Skip to main content went to the first form element rather than the Back link; the back link position was as expected

However, I've also tested on mobile (iPhone 11) using VoiceOver. The Skip to main content appears to still take the user to the Back link first? Let's review on Monday @martyn-w

[gemmadallmandfe]

Thanks @martyn-w - I've tested as a keyboard only user on desktop and as a iPhone 11 / iOS / Safari VoiceOver user and all looks good now - if I select Skip to main content, I am taken to the body rather than the Back link

One minor issue - if I do that, the focus area has a visible outline, in both cases - like this:

[github-actions]

Review app deployed to https://get-into-teaching-app-review-3779.test.teacherservices.cloud

[sonarqubecloud]

Quality Gate failed

Failed conditions

B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[martyn-w]

This issue is discussed in https://axesslab.com/skip-links/

[gemmadallmandfe]

Looks good to me (other than iOS issues which are beyond our control)

Tested successfully as keyboard user on desktop
Tested successfully on iPhone 12 and up in landscape mode

Happy for this to be merged as this is an improvement on what we have; we will return to this if there are future iOS releases that enable us to fix this for all iPhone users