Location of "Skip to Main" link below admin toolbar in Claro is problematic for screen magnifier users

Here are some options for Claro 9.5 using the theme's white-in-green focus ring:

1. Partial focus ring with round edge:
   
2. Partial focus ring with square edge:
   
3. Full focus ring with round edge:
   
4. Full focus ring with square edge:
   

And here's a MR using option 1

Great to see movement here @camilledavis! Would be nice to be able to close some of these issues from the Before Times.

Can you provide before/after snapshots? You're providing a number of options.

Also looks like these are just CSS changes, there shouldn't be any semantic changes, just visual layout.

Also Andrew noted:
"I think the centred horizontal position could be an issue too. A safer placing would be the top corner of the viewport, not just top edge. CSS position:fixed + an high z-index should be enough, no?"

I has this been addressed? It is difficult to see from the screenshot. If you need help with the bidirectional code, let me know.

Daniel also mentioned the BBC (usually pretty solid to follow their lead), and this is what they have used:

Here's a before/after for option 1

(The different options are just for focus ring style, in all 4 options the link is on the top left)

Before:

After:

Still need to make a right-aligned version for RTL

Seems there is a build failure in the MR.

Also could the issue summary be updated to include the proposed solution please.

Updated proposed solution

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Adding WCAG SC 1.4.11 - https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

Created MR for 11.x, just for Claro though. Wondering what to do about Olivero since the skiplink design is different. Would be good to have some input from designers...

Think the issue summary could use before/after screenshots of claro, and if not applicable if olivero is included.

Separated Olivero issue into its own issue.

Updated issue summary to use template.

Out of curiosity tried with new navigation module

Change looks good to me.

This fixes it in claro, need to fix umami, it does the same center positioning think as before. Olivero is fine (design is different but it's top-left aligned already)

Lets also include screenshots of umami since the change doesn't appear to be 1 to 1

No RTL needed for Umami?

I have attached after patch screenshot for LTR & RTL.

Believe this is fine.

nod_ → closed merge request !5112

Fixed css lint error on commit

Committed and pushed 5e0d1efa0a to 11.x and 0b36d01ad6 to 11.0.x and c1f7726488 to 10.4.x and 12b546ca74 to 10.3.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.