Confirming. After I "Jump to content" I get a language dropdown and a bunch of tabs. Before I get content.

@bwang, @Jdlrobson - curious what your thoughts are about this one

I understand it, the main element should contain content that's specific to a page/document. There are cases where navigation links belong in the main element, i.e. table of contents. Similarly, the links in the tabs are always unique (i.e. Talk page for a specific article), and change depending on the type of page (i.e. Special pages, Edit pages). The skip link does skip over site wide navigation, i.e. the header, user links, search bar etc.

While I believe that this is the most semantically correct approach, I definitely understand the concern around users needing to tab through more items before reaching the main content. I could especially see this being a pain point for keyboard users, because at least screen readers users can also navigate by heading. I mentioned this issue in the description of T308055 as well, as the TOC should also be inside the main element after the h1, and that would exacerbate this issue. Perhaps a simple solution could be to add another skiplink inside the main element that goes to #bodyContent. I also think this would be a good topic for review with AFB in T310033

After looking at this problem for a bit this afternoon, I've come to the same conclusion like @bwang – adding one more skip link pointed to #bodyContent seems indeed as only technically sound, at the same time viable solution in response to user friendliness.
One thing to keep in mind is that #bodyContent misses the h1.firstHeading, it should considered to be mirrored there to provide clear context.
Also strong agreement to test such an idea (new skip link, link text, heading or not) with our partner American Foundation for the Blind.

I could especially see this being a pain point for keyboard users, because at least screen readers users can also navigate by heading.

Yeah, but if you navigate by headings you also land right before navigation. Not great in any case. So I imagine this is as confusing to blind users as is for sighted users probably. To be honest it was confusing to me for first few days (until I reverted the order in css).

Anyway, I agree that some UX tests or consultation with daily screen reader users would be great 🙂

Just so it's recorded here as well, @Jdrewniak was suggesting an alternate approach that just moved the skiplink target to be after the page toolbar. This is a departure from most of the skiplink guidance I've seen, which usually are implemented to jump to the <main> element. However, given Vector has so much secondary navigation (which presumably should be inside the <main> element) this could be a simple solution given we are ok with the page toolbar and TOC being skipped over.

Change 833834 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Point skip link to #bodyContent

https://gerrit.wikimedia.org/r/833834

The change above moves the skip-link from pointing to #content to #bodyContent. This skips over the toolbar and the table of contents and goes (almost) directly to the content.

The patch also adds an extra screenreader-only <H1> as the first child of #bodyContent. I assume this is expected behaviour, but I'm not sure the extra <H1> is necessary. It means that we'd now have 2 <h1> elements on the page, which I think is semantically incorrect. Maybe we should set the visible <h1> to aria-hidden?

As Jon already pointed in the right direction, duplicated h1s would be an SEO issue.

Maybe
<main aria-labelledby="firstHeadingID">
or
<main aria-label="firstHeading.value">

Sadly it didn't work as expected in my VO quick run.

@Jdrewniak Instead of duplicating the h1 could we add an h2 with a different label? Perhaps we could reflect the "Beginning" link in the ToC and have the label be "'Page title' Beginning" or "Beginning"? This could be updated depending on the outcome of T314867

Current:

<a href="content">Skip to content</a>
<main id="content">
  <h1>Page title</h1>
  <nav>a bunch of stuff<nav>
  <div id="bodyContent"> 
    The actual content 
  </div>
</main>

Proposed:

<a href="bodyContent">Skip to content</a>
<main id="content">
  <h1>Page title</h1>
  <nav>a bunch of stuff<nav>
  <div id="bodyContent"> 
    <h2>Page title beginning<h2> // visually hidden
    The actual content 
  </div>
</main>

@Jdrewniak After chatting with @Volker_E, it sounds like duplicating the title at all isnt going to work for SEO, so it sounds like we are left with the aria-labelledby approach. In my testing this makes the skip link worse for screenreader users, in VO the label is not read out, instead #bodyContent is just read out a group with many elements. However, the skip link is primarily useful for keyboard users, so this might be an acceptable temporary solution until AFB is able to provide a second opinion.

aria-labelledby approach:

<a href="bodyContent">Skip to content</a>
<main id="content">
  <h1>Page title</h1>
  <nav>a bunch of stuff<nav>
  <div id="bodyContent" aria-labelledby="firstHeading"> 
    The actual content 
  </div>
</main>

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b32b74eadb/w

Change 833834 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Modify Vector 2022 skip-links

https://gerrit.wikimedia.org/r/833834

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b32b74eadb/w/