Add "Skip to content" link to all screens

[azaozz]

As the title. A "screen-reader-text" link that would focus the main content area on any screen in the admin.

Related #21324

In [21305]:

Add "Skip to content" link to all screens in the admin, fixes #21361

In [21308]:

Prevent WebKit from adding outline to #wpbody-content as a result of tabindex="-1", see #21361

Please make this visible on :focus. I find this rather confusing when the focus seems to be lost.

Do you mean highlighting/adding outline to the whole #wpbody-content on focus, like without [21308] in WebKit?

The focus is not exactly "lost", as the link has href that is shown at the bottom of the screen. Perhaps we could show the link somewhere when it receives focus by tabbing? Looking at all admin screens, seems best place would be to the left of the Screen Options and Help tabs.

Yes, I mean the link text. :) It can be very prominent when it gets focus and even sit on top of other elements.

How to highlight the link target … that’s more difficult. No focus indicator at all is probably not good. Maybe we set the first h2 as link target and highlight that when it receives the focus? This way the user wouldn’t have to tab through help and screen options on each page.

Would this be good when the link is focused?

Thinking that not bypassing Help and Screen Options would be good. They are not present on all screens and there's no other indication whether they exist. Also div.wpbody-content is the last element in admin-header.php which guarantees it will be available on all plugin pages, div.wrap or the h2 may not be there.

Looks good. A border|outline to indicate the focus state would be useful.

div.wrap or the h2 may not be there.

Oh, right. Didn’t think of that.