Component Proposal: Skipto #5769
Replies: 5 comments 4 replies
-
|
I like this idea a lot however how would it work with pages generated using a CMS? If someone adds sections to a page does the skitpto automatically know how to adjust? Or is there a feature built into the programming to allow the CMS editor to simultaneously adjust the skipto links to the new areas that were added? |
Beta Was this translation helpful? Give feedback.
-
|
The SkipTo tool looks for headings in the text and exposes them. Aside from adding the JavaScript to the HTML, no further work should be need. As long as the content is properly structured HTML, then the navigation should be displayed. New content would automatically have the headings added, because it's just some JavaScript applied to the page. We might want to adjust the SkipTo to restrict the links to just the content within the body of the page, but that should be easy enough to do. It makes the invisible (heading structure) visible and displays it much like a table of contents would. |
Beta Was this translation helpful? Give feedback.
-
|
I'd say my only other issue might be with added javascript on the page it might slow the site down. But this may not be the case, teams would just have to test and see in their own environments. |
Beta Was this translation helpful? Give feedback.
-
|
It is definitely worth testing to see what the performance impacts might be on both mobile/desktop and new/old devices. JavaScript isn't free after all. It does have an impact on the users. |
Beta Was this translation helpful? Give feedback.
-
|
some functionality might be approximated with existing side-nav or in-page-nav patterns i think 🤔 what do you see as the main benefit over those patterns? limited screen-space seems like one spot where this could be helpful 👍 |
Beta Was this translation helpful? Give feedback.
-
|
I could think of a few benefits; one benefit would be a "what's on this page" highlight list anyone could access without having to scroll further down the page or use the "H" shortcut in a screen reader to navigate to each heading. I also just learned from a usability researcher that many people appreciate "on this page" anchor links even if they don't click on them. They appreciate a synopsis of a long page without having to skim, so it may help reduce cognitive load for some users. The side-nav and in-page-nav still creates potentially dozens of additional links on a page which can overwhelm AT and other users. This feature doesn't rely on links, instead it's using headings as content demarcation. |
Beta Was this translation helpful? Give feedback.
-
|
seems reasonable :) i can also think of ways this could help out with testing and content verification tasks 👍 what happens if javascript is disabled? I'm not very familiar with these libraries. |
Beta Was this translation helpful? Give feedback.
-
|
thinking on this a bit more... one way to support a server rendered version can be to document the pattern and styles independent of JS and allow either :) otherwise, if it's a helpful pattern I'd trust it just like the Moon Tooth song coming from uswds 🤝 🤘 |
Beta Was this translation helpful? Give feedback.
-
|
Also, kinda related but just saw this in my feed ❤️ |
Beta Was this translation helpful? Give feedback.
-
Summary
Would be really nice to have the functionality of Skipto built into the USWDS.
Describe the solution you'd like
Often government web pages are very, very long. This is very true for documentation, but also for other elements too.
Describe alternatives you've considered
Well, there's also a terrific model here https://fluidproject.org to build on.
Giving users preferences there is amazing. The preferences editor allows users to see the Table of Contents which the heading structure represents.
Additional context
Making it easier to point to sections of content in government documents makes it much easier to communicate about an issue.
Code of Conduct
Beta Was this translation helpful? Give feedback.
All reactions