All Pages: Update SkipTo feature to version 5.8

[jongund]

Updates include:

• Scollto landmark or heading feature when navigating menu items
• Added number of headings and landmarks to group labels
• Scrolling list for landmarks and headings when there are a large number of either one, so the group labels are always vsible
• Added an about option in the menu for people to learn abut SkipTo.js
• Support light-dark color scheme
• Support forced-colors media query

---

WAI Preview Link (Last built on Thu, 07 Aug 2025 17:25:27 GMT).

[mcking65]

@jongund

I'm finding the extra information in the group labels very distracting. It is making the menu content harder to understand.

Why is it including only headings in main? Seems like we should not be limiting the list of headings to main content. I don't recall when that change was made, but I'm not sure it's the most desirable approach.

The more information button in the about dialog gives a 404.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Pull request 3213 - Update skipTo.

The full IRC log of that discussion

<jugglinmike> Topic: Pull request 3213 - Update skipTo
<jugglinmike> github: https://github.com//pull/3213
<jugglinmike> Matt_King: I added some comments to the pull request
<jugglinmike> Matt_King: Before we dive in: in general, jongund made changes to the menu that is included at the top of each page
<jugglinmike> Matt_King: This skipTo includes both landmark regions and headings, but only headings in the main content. I didn't realize that until yesterday. I'm wondering where that decision came from--that we would exclude headings from any other part of the page
<jugglinmike> jongund: That is configurable in skipTo. We can reconfigure it to show all headings
<jugglinmike> jongund: There's now browser extension versions of skipTo where users have access to a lot of configuration
<jugglinmike> Matt_King: That configuration appears on every single page--we don't have it centrally.
<jugglinmike> jongund: I could change the default to be all headings
<jugglinmike> Zakim, end the meeting

[jongund]

@mcking65
I have updated SkipTo.js to show all level 1 and 2 landmarks, no longer just looking for headings in the main landmark region.
I have also updated the landmark and headings group labels to be more screen reader friendly name
The more information button should also work now

[jongund]

@mcking65
@howard-e
Had to fix the link in the landmarks section to get the preview to build.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3213: Update SkipTo feature to version 5.8.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3213: Update SkipTo feature to version 5.8
<jugglinmike> github: https://github.com//pull/3213
<jugglinmike> Matt_King: A few weeks ago, I gave jongund some feedback (especially on group labeling)
<jugglinmike> Matt_King: The skipTo feature that is at the top of every page comes from a shared script inside of content/shared/js
<jugglinmike> Matt_King: jongund copies that in directly from what he maintains in his skipTo repository
<jugglinmike> Matt_King: This is version 5.8 of the script
<jugglinmike> Matt_King: The pull request has been updated,but I can't tell what exactly has changed
<jugglinmike> Matt_King: As a screen reader user, I have found the extra information in the group label to be not helpful
<jugglinmike> jongund: There is in the actual group label, information about the number of headings and labels
<jugglinmike> Matt_King: I'd like it removed from the screen reader label of the group
<jugglinmike> Matt_King: When I go from one group to another group, JAWS reads the group label before it reads the menu item. So I'm on the APG homepage, and I open the skipTo. When it first opens, it's not particularly distracting. But when I'm navigating the menu (I get to "Complimentary" which is the third landmark
<jugglinmike> Matt_King: This might be a general problem with putting groups in menus, but it just makes it harder to understand the menu
<jugglinmike> jongund: Should we give the group an empty heading?
<jugglinmike> Matt_King: I think, since there is a group of landmark regions and a group of headings...
<jugglinmike> Matt_King: I think if it just said "landmark regions" instead of the number of landmark regions. And "headings".
<jugglinmike> Matt_King: Maybe the thing that makes it hard to understand (at least to me) is adding the number. Because there are are a lot of numbers elsewhere in this text
<jugglinmike> jongund: Okay, I can remove the number
<jugglinmike> Matt_King: I don't care if you leave the number in visually; it's just redundant information for a screen reader user
<jugglinmike> jongund: The reason for the number is because there are so many items that they can visually fill up the screen
<jugglinmike> jongund: Regarding the scrolling behavior; people can try it out and share some feedback
<jugglinmike> Matt_King: What does this mean, "labels are always visible"?
<jugglinmike> jongund: If there are a lot of landmarks on the page, you wouldn't even see the headings group
<jugglinmike> jongund: I clip them so that if there's more, there will be a scrollbar
<jugglinmike> Matt_King: So it's separately visually scrollable with the mouse or keyboard
<jugglinmike> jongund: That's right
<jugglinmike> jongund: The menu is visually smaller, and there's an "about skipTo" message at the bottom
<jugglinmike> Matt_King: Oh, right. That should say something about it being an external link. Right now, it just says "about skipTo.js". It doesn't say that it's going to another website
<jugglinmike> jongund: It only opens a dialog
<jugglinmike> Matt_King: Ah, yes. And from there, it gives you an option to go to another site
<jugglinmike> Matt_King: Okay, so no one is going to leave APG without realizing that they are leaving APG
<jugglinmike> Matt_King: Okay, we need some reviewers
<jugglinmike> Matt_King: We don't need a code review (this code isn't meant to be pedagogical code for others; it's only infrastructure)
<jugglinmike> Matt_King: Though if anyone wants to review the code, that's great!
<jugglinmike> Matt_King: I'm mostly interested in the functionality, both with and without a screen reader
<jugglinmike> arigilmore: I can try
<jugglinmike> Matt_King: Thank you, arigilmore! I will assign you

[jongund]

@howard-e
Hi Howard,
How do I get the preview link to rebuild?

[jongund]

I have updated to version 5.8.2 to fix some other issues, would be good to review once the preview gets re-built.

[howard-e]

@howard-e Hi Howard, How do I get the preview link to rebuild?

@jongund preview is updated now. I also got a chance to check into the issue and that should be resolved, going forward

[ariellalgilmore]

This looks good to me! The only thing is not sure if i'm correctly trying on mobile. It reads the skip-to button, but I'm not able to initiate the skip-to on mobile using an Iphone with VO.

[mcking65]

@jongund thank you for the change to group labels. they are easier to understand now.

Does the version currently in prod work on an iPhone? Is @ariellalgilmore finding something unexpected?

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3213: Update SkipTo feature to version 5.8.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3213: Update SkipTo feature to version 5.8
<jugglinmike> github: https://github.com//pull/3213
<jugglinmike> Matt_King: Ari tested this on an iPhone and left a comment saying that she couldn't get it to work
<jugglinmike> Matt_King: I think she couldn't get the menu to open
<jugglinmike> jongund: If you don't have a keyboard, you can't open the menu
<jugglinmike> Matt_King: But if you're using a screen reader, you will still observe it
<jugglinmike> jongund: I have an iPhone, so I can test it out
<jugglinmike> Jem: She's asking how she performs an action equivalent to "tab" on mobile
<jugglinmike> jongund: Well, we don't have a "click" event on the menu button
<jugglinmike> jongund: What does VoiceOver do with hidden content? If something is "display: none", is it considered inert?
<jugglinmike> Matt_King: This isn't "display: none", this is off-screen
<jugglinmike> Adam_Page: I just did a very quick test on my iPhone, and I was able to navigate backwards to the skipTo menu
<jugglinmike> Adam_Page: It looks like it's working to me, so I am curious to hear more from Ari
<jugglinmike> Adam_Page: I was doing this on the production APG site
<jugglinmike> Matt_King: The question is whether it works on this new version, from the preview
<jugglinmike> Adam_Page: I can check that
<jugglinmike> Jem: I'll assign it to you, Adam_Page
<jugglinmike> Adam_Page: I'll check the deploy preview. If it still seems to be working to me, then I'll double-check with Ari and make sure I understand what she is expecting
<jugglinmike> Matt_King: Thank you! We have time here because we're planning to deploy on September 3
<jugglinmike> Jem: the production APG site is currently using version 5.3.2 of skipTo.js

[jongund]

@mcking65
Seems the issue with the menu not opening using Voice Over on iOS fixed itself, at least for me on my iPhone.

[ariellalgilmore]

@jongund hmm what ios version are you on? I am still facing the same issue with IOS 18.6.1 and clearing my cache

[adampage]

Heya @jongund and @ariellalgilmore, I’m also on iOS 18.6.1 and still reproducing the issue.

Here are two quick video caps of my VoiceOver + iOS Chrome experience on APG production versus the PR preview deploy.

Safari exhibits the same essential issue, but it doesn’t open the address bar menu like Chrome does in the video; it just shows a focus outline around the invisible SkipTo button and then fails to open the menu on double-tap.

skipto-prod.mp4

skipto-pr-preview.mp4