How does this accessible navigation work?
Guys, is this accessible navigation "button" difficult to make? It works as follows, when you scroll with TAB, it presents other sections for you to navigate such as, Go to main menu, Go to page content, go to footer
2 Replies
it's a link that's "hidden" by using
clip-path and other styles to make it as tiny as possible (preferably even move it out of the document layout by using position: absolute)
it's the very first thing inside the body
it points to the main component, by id
when it is focused, the styles added before are all removed, and the only way to do it is to press tabKevin Powell
YouTube
Most sites have a skip-to-main link, and yours should too!
The 'skip navigation' or 'skip to main content' link is everywhere on the web, but why do so many sites have it, and how can you add one to your own projects?
🔗 Links
✅ Accessibility with Ashlee Boyer: https://youtu.be/qr0ujkLLgmE
✅ Smooth scrolling with CSS: https://youtu.be/MNNr7TU7XcU
⌚ Timestamps
00:00 - Introduction
00:50 - Adding ...