Hey there and welcome to Website Tip Friday!
So once again, as we’ve been talking about for a while, we’re going to discuss more accessibility tips. And specifically, today we’re going to talk about skip links.
Well, what are skip links and how do they affect accessibility?
Well, skip links are links that allow keyboard and screen reader users to bypass the items that are the same at the top of all webpages, like the header and navigation.
So essentially it allows people who use keyboards to move down the page quicker just like you would if you were using a mouse.
And the best part about it is creating skip links on your website is pretty simple. Let’s check it out.
Okay, so to create skip links for your website, it’s pretty simple. So I have a sample, very simple outline for a website here. And all I’ve done for the skip links is to add in this element. And I’ve used a class that we’ll talk about here in a moment to hide it initially. And then I’ve linked it down to this content section so that people, when they hit that link, can scroll down to the main content and bypass the header and the navigation.
So, the class I’m using to hide it comes from primarily from WordPress. It’s the screen reader text. And it keeps it on the page so that screen readers will see it, but it hides it from our normal view. And then when we tab on it, it will appear and we can click on it. So let’s see it in action.
So here we go. We’re on the page, and I’m just going to hit tab. And there we go. It appears, hit the link and now we’re down to the main content. We don’t have to worry about the navigation or heading. We can read just what we want to read.
So there you have it. That’s how you can create skip links.
If you’re using WordPress and you’re using a custom theme, chances are those skip links are already in there. But if not, check it out and maybe ask the theme developer or, if it’s a custom theme, your developer to add those skip links today.
Because once again, accessibility matters.
Leave a Reply