w3c
All Pages: Update SkipTo feature to version 5.9
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, 11 Dec 2025 19:36:39 GMT).
@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.
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/w3c/aria-practices/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
@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
@mcking65 @howard-e Had to fix the link in the landmarks section to get the preview to build.
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/w3c/aria-practices/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
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 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
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.
@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?
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/w3c/aria-practices/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
@mcking65 Seems the issue with the menu not opening using Voice Over on iOS fixed itself, at least for me on my iPhone.
@jongund hmm what ios version are you on? I am still facing the same issue with IOS 18.6.1 and clearing my cache
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.
https://github.com/user-attachments/assets/487918bd-b45e-485b-8bb6-c49f448e079f
https://github.com/user-attachments/assets/753072b6-324d-4aa9-997b-bac94f47bfe2
@mcking65 @adampage Can you please review the lastest push on fixing the iOS issue with SkipTo.js.
Hi @jongund, I just tested the preview build, and am still getting the same results as last time in both Safari and Chrome.
GitHub claims the preview was “Last built on Mon, 06 Oct 2025 20:37:08 GMT”, but I wonder if your latest changes are actually deployed?
GitHub claims the preview was “Last built on Mon, 06 Oct 2025 20:37:08 GMT”, but I wonder if your latest changes are actually deployed?
Hello folks! Confirming the latest is deployed via this commit from the builder repo. And the netlify deploy log from Oct 6.
Can also confirm the skipto script source is changed for me when viewing from the preview link. Perhaps a caching issue?
@adampage Thank you for testing the updated skipto.js, if you have time can you just try to clear your browser cache. I will also do some more testing on some other iOS devices, not sure why it works for me and no one else.
Hi @jongund, I cleared my iOS Safari cache and I’m afraid I still get the same results.
I asked two of my colleagues to try the preview link on their iPhones, and I have good news and bad news. 😅 It worked correctly for one of them, but the other got the same result that I do. 🤦🏻 All three of us are running iOS 26 and have default VoiceOver settings.
In my case, this aspect is suspicious: upon focus, the button‘s top position remains at var(--skipto-popup-offset) rather than move down to the 0 position:
@adampage I figured out where the inconsistency of behavior in iOS is coming from. I had in my iOS accessibility settings:
Accessibility > Keyboard & Typing > Full Keyboard Access > On
When I turn this feature off I replicate the behavior on my iPhone you and other people in the task force are reporting. I just need to figure out what is different with my latest version (5.9.0) with version 5.3.2 on the current APG website.
Thank you to you and all the other task force members who have helped in identifying this issue.
Heya @jongund, I made a quick Codepen to satisfy my own curiosity about top versus translate, but both of these seem to behave just fine for me in iOS VoiceOver, so 🤷🏻♂️ 😅 .
Heya @jongund, I made a quick Codepen to satisfy my own curiosity about
topversustranslate, but both of these seem to behave just fine for me in iOS VoiceOver, so 🤷🏻♂️ 😅 .
I tried translate and it did not seem to make a difference, but functionally works the same.
@adampage @mcking65 I have made some update to SkipTo.js and it is working for me now. When you have a chance could you try again. Thanks, Jon
Heya @jongund, I just checked out the latest deployment in iOS with both Chrome and Safari with VoiceOver. Fixed! 💪🏻