Page MenuHomePhabricator

[Keyboard UX] WCAG problems with tabs below title (h1)
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT


Steps to replicate the issue (include links if applicable):

  • Apply tabs change -- T303549
  • Open article with vector-2022 enabled site.
  • Press tab.
  • Choose a skip-link.

What happens?:
User navigates to #content. So this is main, but not really main content. Main now starts with navigation. And to my knowledge the main point of skip links from a11y stand point is to skip all of the navigation.

From a logical stand point this doesn't make sense for me either. Note that h1 changes when you navigate to different tabs. I mean sure I get that tabs on the right are all about the same page. I could still argue that h1 is different..., but sure, history and view are just different aspects of the same thing... Don't see that with tabs on the left, though. Special home page, my actual user page and my talk page.

What should have happened instead?:

Let me quote an example of skip link from WebAim:

<a href="#maincontent">Skip to main content</a>
<main id="maincontent">
<p>This is the first paragraph</p>

So you see the link points to main and you should not put anything between h1 and content. And you cannot change visual order for a11y reasons. So I don't think you can do what you want in an accessible way. Or at least none that I can think of.

    1. AC
  • Using the skip link navigates the user to #bodyContent

QA Results - Prod


Event Timeline

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

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.

bwang renamed this task from WCAG problems with tabs below title (h1) to [Keyboard UX] WCAG problems with tabs below title (h1).Sep 16 2022, 5:45 PM
LGoto set the point value for this task to 3.Sep 20 2022, 5:16 PM

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

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

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.

<main aria-labelledby="firstHeadingID">
<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


<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 


<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 

@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 

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

bwang claimed this task.
bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q1) board.
bwang added a subscriber: Edtadros.

Change 833834 merged by jenkins-bot:

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

bwang removed bwang as the assignee of this task.Sep 27 2022, 9:01 PM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Using the skip link navigates the user to #bodyContent

Screen Recording 2022-10-01 at 11.42.36 (1×844 px, 770 KB)

Looks good, resolving

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