Up next in 10
Why Does Nearly Every Site Have This “Invisible Unclickable“ Link_
706 views
Feb 7, 2024
"Why Does Nearly Every Site Have This 'Invisible Unclickable' Link?" is an insightful video exploring a common yet often unnoticed element found on many websites. The video delves into the purpose and significance of this seemingly hidden link, shedding light on its role in web design and user experience. Viewers are provided with explanations and examples to understand why this element is prevalent across various websites and its impact on navigation and accessibility. Through clear analysis and observations, the video prompts viewers to reconsider their understanding of web design conventions and the importance of usability in creating effective online experiences. Whether you're a web developer, designer, or simply curious about website design practices, this video offers valuable insights into a ubiquitous but often overlooked aspect of web development.
View Video Transcript
0:00
In today's video, I'm going to talk about how a single invisible link, which you've probably never even seen before
0:06
makes websites more accessible for millions of people. And then at the end of this video, I'm going to show you how to implement and use your very own hidden links
0:17
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you, so you can start building your dream project sooner
0:24
And today I want to talk about a hidden link that is on nearly every good website that has good accessibility
0:30
and this is the very first link you'll get to when you go to a website. For example, Amazon.com, if you hit tab immediately when getting on the website
0:37
you're going to see a link that pops up over here that says skip to main content. And when I click on that link by hitting enter, it's going to navigate me to the main content
0:44
of the page. So if I start to hit tab, you can see I can tab through all the other content on the page
0:48
It skips past all of the stuff that's in their navigation, which is really useful
0:53
This is on tons of different websites. For example, target, I hit tab. You can see my skip to main content link
0:58
I hit enter on that, and now I'm down below the next. navigation, and I can navigate through all the different content on the page with my keyboard
1:03
Same thing with Zillow, hit tab. It's going to have this skip main navigation button, click it, and now I can tab through all
1:09
the different content on the page. This is a very important link to have because if you have a user that's using a screen reader
1:15
or needs to use the keyboard for accessibility or navigation instead of a mouse, it's very
1:20
difficult to have to navigate through all of the different navigation tabs and links at
1:23
the top of your page when all you really want to get to is the main content of the page
1:27
So implementing these links is really important, and luckily, it's incredibly easy
1:31
So let me show you exactly what I'm talking about. We're going to close out of all these pages. Now I now have just a really simple document here
1:37
I have a bunch of links at the top of the page. I have an article with some information, a bunch more links, some more information, and then a
1:43
footer, and all of that HTML is over here. It's very basic. I just have, you know, a link here for our navigation
1:48
I have a section with a header and an article for our actual content, some more links
1:52
inside of here and then finally our footer at the very bottom Very basic stuff And I also have one single CSS style that just adds a really thick outline to everything So when I tab through you can very clearly see what my tab icon is on
2:05
As you can see, we're going through all the different links of my page right now, all the way to the very end
2:09
And what we want to do is we want to add a link at the very top of our page. And this link is going to be for navigating past all of the extra content to get to the main portion of our page
2:18
So to do that, you want to put this link at the very top of your page. So for example, in the very beginning of the header, or the very top of the body
2:24
and it's just going to be a very simple anchor tag, which has an href, that points to the ID of wherever your main content starts
2:30
So, for example, we're going to say, like, main content like this, and that'll point to an element with the ID main content
2:35
which we're just going to put on our main element here. We're going to say main content, just like that
2:39
And in here, we can just give us some text that's self-explanatory as to what's happening
2:43
We can say skip to main content. That's pretty common naming for this link
2:49
So now, if we save, you can see we have that link right here, but obviously we want to style this so it's not going to be visible to the user unless they're navigating with the keyboard
2:57
It's a really important thing about these links is you want them to be hidden from everyone except for people that are using the keyboard to navigate
3:04
That way it doesn't get in the way of people using their mouse to navigate, but it's easily accessible to people that are using their keyboard
3:10
So to hide this, we're just going to add a simple class to it. And this class is just going to be called skip link, just like that
3:16
Now we can write our CSS styles for hiding this. But as you can see right now, if I just tab onto that and I hit enter and I hit tab again
3:23
you can see my next link that I'm tabbing to is the link inside of our main content because it skipped all the navigation section
3:29
Our link is already working and doing what we want, we just now need to add some CSS to hide this link from us
3:35
So what's added in that skip link style right here, and also I want to change my focus here to be for anything that is not our skip link
3:43
just so that we don't have weird styling happening on this link as well. we go So now what I want to do is I want to give it a position of fixed And honestly a lot of these styles are going to be personal preference I just like it when it at the top of the page So we can say position fixed top zero left zero right zero And we can say text align center
4:02
And what that's going to do is just going to put it at the very top of the page, and it's going to be text aligned in the very center
4:06
and it's going to be right in the center like this, taking up the full width. We can also give it a background color
4:12
let's just give it a dark background color. And we can give our text a color of white, for example
4:17
And now you can see it kind of has a dark or banner on the top of our screen. We can also add in some padding, for example, 0.5REM
4:24
Now it looks a little bit bigger, which is really good. Now all we need to do is make it so it's hidden by default
4:28
So we're going to have skip link focus. That means that we're focused on this actual skip link
4:34
and then I want it to be visible, otherwise I want it to be hidden. So by default, I'm just going to set our translate property here to zero and negative 100%
4:42
What that's going to do is it's going to translate zero in the X direction and negative 100% in the Y direction
4:48
so it's just going to hide it off the top of our page. page, it will change this to like 90%, you can see just the very bottom of it poking out
4:53
or like 50%, you can see the bottom poking out, but with 100%, it's going to be completely hidden
4:59
And if you're unfamiliar with this Translate property of a full video covering this Translate, rotate, and other properties, I'll link it in the cards and description for you
5:06
Now, in order to make this visible, all we need to do is say Translate is going to be set
5:11
to 0, and that's going to reset our Translate back to where it was, and we can even give
5:15
it a simple animation. For example, we can animate that Translate property over 150,000
5:19
milliseconds, and now if I tab onto that link, you can see it slides in and shows me the link
5:24
and when I click enter, it's going to navigate me past all the other links. But if I just tab right past it, it's now bringing me straight to the navigation, and I can
5:32
tab through all the navigation. Now, this is a great way to implement a skip link, just like this, but there's other uses
5:38
for these skip links. You don't always want to just skip the main content. Sometimes you want to skip to a particular section on the page
5:45
In our case, what if we wanted to skip directly to the footer instead of skipping to the main
5:48
content We could add another skip link We going to call this one the footer link So we can say skip to footer and we just need to give an ID to our footer down here just like that
6:01
And now that should be all we need to do. So now when I click tab here, it goes to skip to main content, click tab again
6:07
We now have skipped a footer, and if I hit enter on that link and hit tab, you can now see
6:10
I have focused all the way down in the footer, so it's skipped me all the way to that section
6:15
You can also add skip links when you have large amounts of content the user may want to
6:19
skip. For example, I have 11 links right here that maybe the user doesn't want to tab through each
6:23
and every one. They want to just skip past them. So we can just add another skip link. We're going to put
6:28
it directly before our list, and we're just going to have this simply say skip link list
6:34
And this is just going to say after links. And we could just give that ID to our P tag, which is right
6:40
after our links. So now I've created a brand new link that as I'm tabbing through my page, as soon as I
6:45
get right above our links, so let's just start at the very top, we're tabbing through every We're going through all of our different navigation
6:50
We get to here. When we hit tab, it's going to be right before our links and you can say, hey, do you want to
6:55
skip this link list? If I just hit tab, it'll go through all the links like normal
7:00
But if I hit enter to go to this link, and now I hit tab again, you can see me it's brought
7:04
me all the way down to the footer, which is the very next link on the page to tab into
7:08
So I was able to skip all the links in that list instead of having to manually go through each
7:11
and every one. Now the real beauty behind this skip link is that it's super easy to implement
7:16
I mean, you add a single anchor tag to your page. You add a single ID to the element you want to go to, and what do we have here
7:21
Like 15 lines of CSS code, and that's all it takes to add in this huge accessibility feature
7:27
Because imagine having to navigate through the entire menu of Amazon before you can even look at the first search result
7:32
That is an excruciating experience, so adding this simple skip link in there makes this to your website is much more usable for anybody using a keyboard to navigate
7:41
And that's all it takes to add in this hidden link. If you want to improve the accessibility of your site through CSS, I have two other ways you can do that
7:47
they're going to be linked right over here. With that said, thank you very much for watching and have a good day
#Computer Education
#Programming