Skip Link Solution

[00:00:00]
>> All right, let's work through the fourth exercise together. So again, there's a lot of different ways to do this, but I always wanna just focus on the accessibility part so not to worry too much about any JavaScript or CSS. But so if we go over into our code editor, I'm gonna close these tabs and open 4.html.

[00:00:23]
So the idea is we've got this navigation list here. So we know for sure, let's say at the beginning here somewhere we want something like a link, and we want it to say skip to main content. I think if I save that and then I come back over to this page, okay, cool.

[00:00:41]
So we've got this link. Sorry, I didn't realize I was still in this answers branch. Let me check out. Cool, so we'll go ahead and just like we did before, but on a different branch, so I will do a, we're not sure where it goes yet. We wanna do skip to main content.

[00:01:04]
Cool, so we save that, great. So we've got this thing, and I mean, that's good for screen reader users now, we're they'll hit Tab and they'll have this option. But it's not great visually for the rest of these links. So basically, what we'll want to do here is we'll wanna find a way to hide, so I'm just gonna do an inline style tag.

[00:01:23]
So we'll wanna take this anchor and we'll give it an id of a skiplink or something like that. And then, in CSS, so we'll take skiplink, and then there's a lot of different ways to move things off the screen. But I think we can just position absolute it, and then transform it off the screen.

[00:01:43]
So we can do any of these translates, something like this. And so now, if we refresh, it should be gone, right? So it's somewhere, where did I put it? -100% y, somewhere off the screen, and so that's great, too. So we can even see, it's kind of interesting.

[00:02:01]
I know it's very subtle, but if you're following along, when we hit Tab for the first time, now we can see a little focus ring up here. So, it's like the browser's indicating something's focused that's not in view, right? Cuz it's our link that's just not in view right now.

[00:02:15]
And so the second to last piece of the puzzle is that we'll also then need to do, okay well, when skiplink gets focused, right? This is, again, like CSS and HTML communicating with each other, so when you call .focus or when you tab to something it gets focused.

[00:02:30]
And so then, we can do another transform back, basically. So whatever we did, and we'll just set it to 0%. And so now, if we go back to the website and we refresh again, this still needs some cosmetic tweaks, but when you hit it this thing appears. And so I think we'd give it a background color and some stuff like that to make sure that it really pops.

[00:02:51]
I think the New York Times does it cool where they already have whitespace in a certain area and they fill that in with a skiplink. But I think it's always fine to just give this, let's see if we just do background orange or something like that. There we go, and then this thing.

[00:03:05]
Again, we could add some padding, we could make it nice looking, but the idea is still there. And if you hit Tab again, it takes you to the Home thing. So the very last thing we need to do is we need to activate it. So what happens when you click the skiplink?

[00:03:16]
And again, that trick that I had mentioned earlier where you can add ids to anything. So you could add an id of foo to this button, and then in the a anchor up here, we could send the href to foo. And so now, if we refresh again, we get the thing, we hit Enter on it, and we can see that it focuses us down there.

[00:03:35]
So the parts again were making an anchor at the top, which is great except it ruins the visual aesthetic. Hide the anchor, have a focus selector that undoes whatever you did to hide the anchor, absolute position, moving it off the screen, whatever. And the last thing is give an id to where you want people to be able to focus, and then in the anchor href to that id.

[00:03:55]
Any questions on that? How are people feeling about that in general? Happy to talk it out or go over the code again, whatever. So yeah, if this is for visually impaired users, why even have the orange button? So for example, we could even not have a focus state, right?

[00:04:09]
We could just have a thing that's hidden and it'll still show up. That's a really good call. I think my thing that I would say is that it is always incredibly difficult to try to predict users because they're so diverse and they're so varied. And so, for an example, there was this movement years ago where websites would have their very feature rich, robust, beautiful version.

[00:04:36]
And then, you would click a button that said I need the accessibility version, and it would be this nothing fun, no colors, not at all pretty, black and white content. And folks were really upset where they're like I'm an artist, I love beautiful colors and beautiful design, I just need these little bits of help.

[00:04:52]
So I think about it like that, that's one answer, is whenever I'm building these things, I try to just not, I don't know, I guess not assume that it's going to be fully non-sighted users. And another example would be that what about just power users who just like using the keyboard around.

[00:05:11]
Just the idea of people that do need to see it cuz they don't have a screen reader turned on. And so, I think those would be my two answers. You're not sure, some people are keyboard only and don't use screen readers, so they need a way. But then also that it's very difficult to predict what's gonna happen.

[00:05:28]
And I gave a conference talk once on accessibility, and there was this guy Jennison, he leads accessibility at LinkedIn. And he has all these great stories about these kind of accessibility misses where people thought they were kind of doing a good thing or whatever. And he talks about working for this car company, he wasn't working for it but somebody was working for this car company that did car rentals.

[00:05:51]
And they had decided kind of in their head, not trying to be mean, that well, since blind people don't drive, then there would be no need to make the car rental portal accessible. Because they could just say, hey, this is just for renting cars. And they started getting all these complaints from blind parents who are like, hey, I'm on your site, I'm trying to rent a car for my daughter for the weekend and you just won't let me.

[00:06:11]
And so I always remember that story cuz it really hit me as okay, just trying to make it as flexible as possible, basically, cuz you just never know. But it is a really good question, for sure. If you're doing something for screen reader only, you don't need to make it visual.

[00:06:26]
But I would say for skiplinks, since they're used by so many people, to make it visual in some way. And even to go as far as to make it fit in with your design brand, the right font and the right placement, things like that.