Most sites have a skip-to-main link, and yours should too!
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- 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: • Getting started with w...
✅ Smooth scrolling with CSS: • Smooth scrolling with ...
⌚ Timestamps
00:00 - Introduction
00:50 - Adding the link
02:04 - Why do we need one?
03:37 - Styling the link to hide it (and show it on focus)
#a11y
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I appreciate developers building websites with accessibility for keyboard centric navigation. Its really helpful to users with certain disabilities like, for instance, being a vim user.
XD average emacs enjoyer
HAHAH
This comment is God tier. I think I'll frame it and put it on my wall
@@nevergonnagiveyouup4189 Torvalds?
Dude! How did you know I'm disabled.
I really appreciate that more people are considering accessibility when designing websites. Thanks Kevin, great video as usual!
He isn't considering accessibility. Animations are inaccessible, yet he adds them to the accessibility button! Also, overriding the browsers smooth scroll setting is inaccessible. People turn those things off for a reason (nervous system illness/damage). There is css prefers reduced motion, but some users may not know about it, it isn't available on all OSes, and in this case, the css doesn't check for it.
Gotta grind that Chrome lighthouse score
@@tsg1zzn yeah i was gonna say, Text readers are gonna care about animation why, accessibly should always be function over form, and even then just using a anchor jump on the page does not help for them, this is one of those trends that was started by someone who thinks they are doing accessibility when they are not and every other idiot who has not tested accessibility software copying them.
@@kidmosey i have no problems with jumps using an anchor i have a problem with it being hidden & animated so that your using a none mouse command to find it, hiding it from those that are not using screen readers that was my point. this was design over function. use aria, or main tag, and then if it's not within a few tabs to jump to it put an icon as the first thing on your menu bar that's like a down arrow that jump to the content, build the accessibility into the normal design of the site. another one is colour blind software you should really look at it, you would be amazed how how few people check there diesgns in it, colour oracle is one i have used before
Skip to content is also amazing for command-line browsers like Lynx or w3m. I work a lot on very basic Linux environments without a display server available, and it's amazing to not have to tab 95 times. Thanks for spreading the word!
This strikes me as an out-of-place hack that should probably have been done by something prescribed in a broader standard for accessibility (if it isn't already).
Surely the screen reader should be capable of jumping to the tag instead of having to mark it again like .
I suppose for the user who is using a normal browser, and is using [tab], [shift]+[tab] and [enter] to navigate, this is potentially helpful, as a substitute for holding down the [tab] key to skip through nav sections. That said, a normal enough webpage is liable to have so many elements reachable by the tab key that such a user will have to hold [tab] down to scroll anyway. Wikipedia homepage does this the other way around though: tab once for jump TO navigation section, and tab twice for jump to search.
I was just thinking the same thing. Seems like there would be a standard element for this.
Screen readers can handle this with keyboard shortcuts etc, but not everyone who uses tab navigation uses a screen reader
I so wish there was a standard that everyone would follow, but people, including standards-writers, forgetting about accessibility concerns, is a common theme.
Even if there were standards, I'm not sure people would follow them. Plenty of sites are still using tags everywhere.
Wikipedia sets the order in which [tab] activates elements, which is what people should do. So many login pages don't place focus on the username field, and have you tab through the navigation bar again.
@@Encysted Div tags are necessary for controlling flow of the page. So I don't know if I agree that using div tags is an issue. I would agree that if someone uses div tags as a substitute for paragraph tags for example that wouldn't be good. Without divs it's extra hard to organize, or style a page. They're also used as boxes for uncategorized content like thumbnails, nodes in a diagram, or tag clouds.
In regards to website makers an accessibility consultant would be valuable, but not every company can afford such services. I otherwise do agree with you that accessibility is often overlooked which isn't good.
Agreed. This is a rather dumb trick no one will use because they don't know it's there. And this doesn't work for sites that force keyboard focus on some stupid text (search) box. It's like the sitemap that was all the rage in years long past.
Another tip along similar lines (accessibility) would be to add the "smooth scrolling" (or any animated transitions) only if the user doesn't prefer reduced motion 👍🏽
I believe Kevin already touched the topic related to media queries and user preference in some of his previous video. But yeah, don't forget to check user preference all the time.
Or just let the f@$#ing browser do it.
Smooth scrolling is inaccessible. Don't expect users to know about this setting. Just stop forcing smooth scrolling. When users turn smooth scrolling off in browser setting, that should be enough.
@@tsg1zzn nah force your will upon every user, after all Apple does it for its products and it works fine 🙂
@@tsg1zzn I personally would want to disable smooth scrolling with my mouse wheel but enable smooth scrolling when clicking jump links. This combination is entirely impossible in Chrome without the use of JavaScript to intercept the link clicks. This means I either get disorienting jump links without smooth scrolling, or distracting smooth scrolling with my mouse wheel. Really inaccessible to not have each scenario be a separate user-controlled option.
It still surprises me how many long time fe devs don’t know that this is a thing. Another thing worth understanding when doing A11y work is screen reader support; it’s so important to use semantic elements and aria tags (when required). Finally, another thing I see a lot is people removing the outline from buttons, that’s actually useful for visually impaired people so instead of deleting it, restyle it.
I never even thought of implementing this, thank you so much! I've seriously upgraded my accessibility skills over the past year because of your videos
Hi @kevin
It's cool to have someone talking about accessibility... And it is a good introduction to this huge and complex subject. I have to precise that every link without text must have an aria-label(for accessibility)(ex:aria-label="skip navigation") so the reader can tell what is that text less link. Moreover if the link does not contain an anchor (ex:logic in JavaScript) it is better to use a button tag.
Thanks for your video always cool to see you talking about any web subject.
Peace ✌️
I saw this type of link recently while making a stylestage submission, so thank you for this explanation^^
This is really cool. Thanks for pointing this out. It's easy to forget about accessibility.
Just something to keep in mind! I love the idea of the concept but...
The whole point of this button is to make the website more accessible for some users but yours just scrolls down the site
Take the TH-cam button for example: If you tab to the hidden button itself and activate it.. it also moves the focus state to the content section which means if I keep pressing the TAB key I'm now browsing the actual content of the page
But in your implementation it would just scroll back up and keep on going to the navigation bar
So rather just implementing the button to scroll down you also should focus the following content with JS (f.e. the headline in the first given section) after activating it so when the user presses TAB afterwards it doesn't jump back up
which browser are you finding this behavior in? on current firefox implementing just as in the video skips focusing the navbar as intended
@@blairc158 he did fix it already
It used to skip to the content area but if you pressed tab one more time you'd find yourself focused on the first item of the navigation bar instead of the actual content of the page. So it would just scroll back up instead of focusing the main content
I want accessibility in all websites I make and actually never thought of this.
I'm implementing it right away !
Thanks a lot !
Clarification for 03:04: All modern screen readers have a slue of keyboard commands to jump between different types of elements (H for heading, 1-6 for levels, c for combo boxes and so on), so I believe it's not as important for screen reader users, provided you've clearly sign-posted your website with headings and landmarks. That way you could simply jump to specific types of elements if you know what you're looking for. Obviously this still holds incredibly useful for various other disabilities though. Also if you were acquainted with the website you were navigating and if it was malformed, you could make use of the find feature to speed up mindless navigation. Something I also wanted to pick up is that screen reader users rarely tab through websites. This is because (as you've already demonstrated) this only shifts keyboard focus to every element you can interact with and then some, depending on how the site has been coded. No, it's far more common to see screen reader users pressing arrows to navigate back and forth. All the textual information gets put in an invisible kind of buffer that can try and emulate the layout and styling of the source page. This buffer updates on the fly to show relevant info on-screen. You could compare this buffer to any open text document in some ways, in the sense that navigating in the buffer is very linear because the left and right arrows aren't making equivalent mouse movements left and right from the keyboard, but reading the previous and next character on the line.
Thanks for coming to my seminar I guess... I didn't expect this comment to be so long.
I don't even do any web development anymore, but your videos are still fascinating and really well-made! Thanks for continually making great content
This is great! I never thought to do such a thing. Off to fix my site!! Thanks for this! 👏👏⭐⭐👍👍
I'm definitely going to implement this on my upcoming project! Thanks!
This is great and super important. Thank you for supporting accessibility!
I also had performance problems with the top property while animating it. Thank you so much kevin for pointing it out. ❤
This looks really helpful, definitely going to give this a try!
I genuinely hadn't thought of this, even though I am someone who quite likes to use my keyboard sometimes for navigation just because it's faster and more convenient. Even though I am someone who immediately took to heart the function and use of aria roles for screen reader accessibility to hide the unnecessary decorative elements on what will become my new index page from screen readers.
I got this section when I took the Expert Web Development certification, truly just knew and consider. Awesome that more people are more and more aware of UX in from different people that use the product.
creating that little button is the very reason I took a deep dive into javascript. But, it's cool to know I can accomplish it in css!
Really great video! Even though, I am not into web that much, still was interesting to watch.
Thanks!
Thanks for this video! Thanks to you, now i can add it in my project.
I havent think about this and i think its pretty important, thanks for the tip!!
I've had this in my boilerplate for about a year now.
Accessibility is so important
Excellent! Love accessibility. Wonderful!
Quick and easy - nice to have that explained ;)
I don’t do this on websites as much, but I love keyboard shortcuts and basically anything that keeps my hands on the keyboard when I’m coding.
Learned something new today. Always seen these links, now I know how to make them.
Love accessibility content, Kevin! One suggestion I’d make is choosing a different color combo for the skip link. You’re making a button (typically used by the visually impaired) and black/red is a common color blindness
It's not really how color blindness works. They're not mixed in shades of colors. People will still see what it says and the contrast is really good for this exact reason
@@appsenence9244 I’m a software engineer who focuses solely on web accessibility. I’m not sure what gave you the confidence to make your comment because you’re just wrong.
Some color blind users are lacking the capability to detect the lower color wave frequencies associated with red. For these users, red color waves read as "no signal", or "black". These users confuse red and black, so this contrast should be avoided whenever possible.
@@travisv i was gonna comment on this exact issue, i'm color blind and red easily turns black, with red on black either being completely black or headache inducing. Glad someone brought it up.
I'm color blind and red on black is really hard for me to see
yeah, plus red on black is not easy to read even for people who aren't colorblind?? it's just bad contrast.
Wooooot! Accessibility is so important. It grows audiences! Thank you!!
Great introduction. But I miss one thing: In the shown solution the focus-state isn't moved anywere. The anchor target isn't even focusable. Shouldn't the focus be moved for screen readers?
That's such a great idea. I might hide some more easter-eggs on my site.
Solid addition. Good call!
I still don't get how it's supposed to make youtube easier to use. When i press tab on the starting page and and press enter when "skip navigation" is highlighted, i still have to tab through all the different categories. Only after like 15 tabs it selects the videos.
accessibility ftw.
On a few sites I've added multiple skip links (no more than 3, to other useful areas on the page)
Make sure to have higher text to background contrast for a11y as well
im trying grid+lightbox css only.
but only the first image aligns in the center.
anyone know where i can ask some help?
Dude
Great video
Subbed
Is there a reason to use 325ms instead rounded 333ms? I doubt, but I also doubted translate animations were faster than top/left attributes...
Excellent tutorial!
Thanks for Awesome videos !!👍If you’re going to discuss about a11y in future I would like to see talk about a11y for non standard elements (e.g. when we create an element using just divs and make it look like something else, etc)
👍
Very useful thank you !
Your videos are gold! 🤩
very nice explained and helpful content
Had no idea this was a thing. I do most of my browsing from the couch, using keyboard. There are times I have to walk over to the computer just to make a single mouse click - thankfully I'm able to! I love the Chrome option to highlight the focused item. And I've come to hate infinite scrolling sites where a single tab press can unload everything you've scrolled down to see using arrow keys. Can't even search it back into view if that happens. Ironically, I find the websites with fancy, high-budget designs to be the least accessible.
very curious, thank you!
I wish everyone was doing more of this. I have problems using a mouse and the problem below drives me nuts because it is just sloppy and inconsiderate:
Poorly designed pages - particularly login screens where there is literally one field to interact with and the developer makes the user place their curser into that field, instead of defaulting to having that field active are infuriating.
Once I select the login or signin button - I should be able to begin typing.
THAT annoys me, and I don't even have any accessibility issues. It's just poor design.
Yeah that's really frustrating, and makes me wonder what the developers are up to all day. If you're using a regular HTML input field, it's literally just one property you need to put in there: "autofocus" ...that's it!!
I use the keyboard + vimium because using the mouse is so in inefficient when you could just keep your hands on the keyboard for everything + It's certainly better for your wrists.
But I don't really understand the point of this feature, someone could just use "j" or number + "j" or simply the arrow keys or pgDown instead of tabs unless he wants to reach a form. With vimium you'd just do "f" and then select the area of your choice with letter combinations proposed.
I pretty much try to avoid the mouse as much as possible, but it’s less because of a11y, and more because of workflow. It’s faster and more efficient.
Ever since I found out one of the main reason the keyboard shortcuts exist is because of a11y, I have been interested in making my web development accessible for those that need it. I can achieve this better now because of instructions like this.
Do you have a video about the different "units" of measurement in CSS?
I know that px is pixels for example but it gets confusing fast with px, rem, hv, wv, % etc etc etc
When should some be used versus other and that kind of thing, thanks
After years of using vim, I can appreciate when something allows me to navigate easily with my keyboard.
Super awesome thanks for this info
Never tought about this. Really nice.
This is cool. I think it would be extra good to see/hear examples of how these things affect people with screen readers. I know that's an extra mini project of work but it would go the extra mile and be interesting too.
A screen reader user at your service...
Hi Kevin
How can you handle this on a Nuxt/Vue website? Because it remembers on what link you were on the navigation
If you did top instead of transform, it would use the container to base the percent on rather than itself
I know close to nothing in web development but I watched this video and I enjoyed it. That's the mark of a good content creator.
Good for you. Web development is a mess.
It is also useful for troubleshooting broken mouse or driver issue or low battery mouse.
I'd love more info on how the individual browsers handle tabbed functionality (or how to set them up for access). I always find Safari and Firefox horrible and unpredictable using the tab key, unless an element has a specified tabindex - not sure if it's something in the settings I'm not aware of or just the browsers themselves. Chrome seems to be ok, although not my browser of choice.
I haven't faced any issue when it comes to the browsers. More often than not it's the particular site which implements the indices incorrectly or ends up using incorrect elements altogether. However, I am really curious if you can give me a quick example about this, where it's predictable in one browser over the other. From what I do know, Firefox sticks to the web specifications better than the other browsers, so I'd expect it to be the most predictable with regards to tab functionality and anything else.
Hi Ian, unfortunately, when using Firefox on a Mac, you need to tweak some hidden settings to have a proper tab navigation. I guess most users with accessibility needs know about it, but certainly many developers don't. The param accessibility.tabfocus in the config needs to be set to a number with value of 7 instead of the default boolean : true.
Well these little things! Thanks!
Accessibility is really hard to get right. Keep the videos coming.
this is phenomenal !
I was busy creating a 2 directional arrow key navigation on all my pages and video player.
The script it only requires a data-nav property on every selectable element to work.
My keyboard navigation is cooler 😝
Must be a call from the CSS gods that were doing the same thing 😂
Honestly just found it on YT recently and started implementing it myselt
So, this link should always be the first element in the body, right? The first that is seleted at least
Wow.... I just found it
Thanks anyway for this information
that's help me a lot 🙏🏻👍🏻👍🏻
Woah that's amazing thank you
How do you access the hidden link? Is it by hitting the tab key and something else?
How do I change the font size and color of the link?
Thanks Kevin. Want more videos on accessibility.
I was wondering for a long time what this button actually is, thanks
how to make transparent background pop up when I move my mouse over the image. (like bmwusa website. bmwusa>models) someone help me pls
How is this better than the arrow keys? Does it affect the way screen readers read the screen or something?
hi Kevin - do you have any videos about Task Runners? Do people even use them anymore?
I have one or two that look at Gulp. Still works great, but I think there are simpler solutions these days a lot of the time, such as Vite :)
love your videos
I've actually broken 2 fingers last week. And although I knew of this hidden link and I've included it in all my work I have now gained a different appreciation for it
i always wondered what that button was for, figured it was a bug/leftover code or something lol
Just wondering, does it contribute to SEO by any chance ?
short answer: the hash part is usually not indexed by search engines, so it does not really contribute much to seo
long answer for context:
Search engines ignore the # part based of what it was originally designed for. GA also ignores it by default (except for utm parameters and if you rewrite the page sent to GA).
The # value is meant to indicate a position on a page, not a different page. Browsers will request content excluding the # value, once a page loads they will try and scroll to the id/name on the page with that value.
But as always, it depends.
For a while Google supported a special #! parameter to help it index dynamic JS pages. That complex thing has been dropped now.
Google at times does reference # based URLs in its search results. These are called "Jump to" links and relate back to the proper use of the #. They jump to a location on a page.
thanks. had no clue
Never saw it til now. Reddit does it pretty cool.
I will check each page now for that nice feature
Screen reader is a possibility - I don't have experience with those - but keyboard navigation is for me something that someone who only occasionally use keyboard "figured out" - arrow down and page down buttons are easier to use and works on nearly every single page in existence.
ohhhhh, its for when my right hand is too busy to use the mouse.... Excellent!
Is skip navigation accessibility work for mobile devices also??
My previous comment disappeared. Excellent video and from a fellow Canadian, even better. Subscribing, liking, giving 5 stars, etc. etc. Can't find you on LinkedIn, what a pitty.
YT has an issue with vanishing comments lately, so happy that this one made it through 👍
I have no idea why, but they just go *poof*. Not in my spam section or anything. A lot of creators have been talking about it, and it seems very random 🤷♂️
But glad you like my content!
Thank you for welcoming me back
i did discover it last year on youtube itself when trying to access search bar using tab
How do i see this button on youtube?
Ah the good ol' Anchor tag trick, I remember this.
Spot on!
I think, a lot of accessible things should be handled by browser and not by the front-end devs. :)
But how would you implement that generically?
I agree, but most browsers don't have such accessibility, even if you make a pull request for the said feature, they probably would shelve it first. That is why frontend devs do the work of implementing it for every single website they do. But lest not lose heart, html and css is evolving for good... just kinda slow but still good.
@@copypaste4097 Combination out of markup and AI
The browsers do this a lot, like with very accessible form inputs that users then attempt to re-create so they can style them differently... and there are probably sites where you want it to go to the main nav, whereas with others, it's more beneficial to skip it. I think it makes sense leaving it up to the devs, and it's not very hard in this case.
For an average page organized in a main tag modern browser can already do this easily
What a coincidence. I just implement it 1 hour ago for my project.
The PageUp and PageDown keys exist. If you have a keyboard you can just press those.
4:50 "animations on transforms are much more performant that doing animations on top, bottom, left and right"
Yeah, about that. I know that everybody is teaching that, and that transforms use that GPU acceleration, but in my experience on my machine (Macbook Pro, early 2015) it is the other way around. Very often, I get better performance animating on top, left, rather than on transform. I don't know the specific reason, maybe that is my GPU, maybe that is subpixel accuracy of transforms, maybe some GPU buffer related things, idk. But the thing is, transforms are not universally more performant.
And for such small things, like this link in the video, it probably doesn't matter, both should have similar perceived performance. So maybe that subpixel accuracy should be the deciding factor.
Thanks :D
This is really cool. The next course in my degree plan is actually focusing on accessibility, so this is pretty in line with what I'll be learning in the next couple weeks
Why would you want smooth scrolling for this particular link? I feel like this one should have instant scrolling. Also not sure about the ease-in - it should pop with a contrasting border, I think.
Great piece of contents as usual! 👏🏻
After I took a course on web accessibility I noticed this link everywhere aswell