Made in Webflow

Skip Blocks - Hidden Skip Links for Keyboard Navigation

site profile thumbnail


Every page should include hidden links that by clicking on them (either using keyboard navigation or a screen-reader), the user will "skip" certain blocks directly to main landmarks such as main content, menu, or footer. I was trying to achieve this on my projects and noticed that the focus didn't shift to the target section when using keyboard navigation. So I added custom code to the component to make the focus shift as intended. Feel free to clone the Skip Blocks symbol for use on your own sites and please provide any feedback to improve the experience!
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

More by Matthew John Meredith

See profile
View details
Pearly Dental: Website Template