Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You can add what's called pseudo-classes to active elements on your site to make them more interactive. The most common pseudo-classes are found when interacting with links. The hover class is probably the most common among them, and it's one that's activated every time you hover your mouse over a link. One pseudo-class that doesn't get the attention it deserves is the focus class. Focus can be given to an item with a keyboard or another interaction device and should be treated with the same level of importance as the other pseudo-classes. This is especially true if you're creating menus.
Always assume people will try to navigate your menu using the tab button. If you don't have a focus pseudo-class defined in your style sheet, they won't know what menu item they are actually on. This brings me to an important point. When we're talking about accessibility, we are not just talking about people who can't see what's on your site, like people with severe vision problems who are blind, or search engines. We are also talking about people who can't access your site through other means, for instance, a person who can't use a mouse, or someone who isn't blind but is really hard of seeing.
For them, we need to add visual cues when they use things like a keyboard to interact with your site, and this is where the focus class kicks in. You'll remember that if we navigate around the site, you will see every time you hover over link, first of all you see the hand pointing icon, and secondly, under for instance, the main menus, you will see that the Main Menu items change appearance when you hover over them. This is the hover pseudo-class. The problem is, when I navigate this site using the Tab button on my keyboard, I navigate through links.
But I don't know where my tab button is, I don't know want item has focus, and I can't see what's going to happen. If you look down at the bottom left corner of my browser window, you'll see that those links appear, but this isn't good enough. I want to visually display where the focus is currently at. For that I am going to add one simple style in my style sheet. So I will go to my Accessible site and open styles in the Notepad. From here, I will scroll down to my Global styles and find where I have all my, a pseudo-classes.
So here I have the anchor class, which is just a link, and then I have the active and hover pseudo-classes. Here I want to add another new pseudo-class. I'll call it a: focus. This is how you mark up pseudo-classes, and whatever style I put in here will be applied every time an anchor gets focused through a keyboard or other device. Now I can apply a style that will be triggered every time someone interacts with the link using a keyboard or another input device.
What I want to happen is there should be a blue box around the link itself. But I don't want that blue box to hamper with the rest of the content. For that I am going to use the attribute outline. Unlike border, which interacts with the rest of the content, outline will literally outline whatever is inside the CSS box you're dealing with. So I will set that color of the outline to 3389a9, which is a blue, and I will set it to a solid, so that is a solid outline, and I'll give it a width of 2 pixels.
When I save this small change and reload my page, scroll to the top, and use the tab button, you'll see where focus is. Now focus is on the header, now focus is on the Home button, now it's on the Flower button, and so on. And as I tab through the page, my new focus pseudo-class highlights the content I'm going to click if I hit Return. So by adding that simple class, I've now added a focus element to all the links on my entire page.
Of course, you can get more specific, and add different styles to different elements so that they appear differently when you use the focus class. But in general, if you just create a: focus and make that a class, then you can style all the elements on the page that are interacted with the keyboard. Accommodating non standard modes of accessing elements on your site is becoming more and more important because many of these non standard methods are becoming standard. Earlier in the course, I spoke of a time in the very close future, where people will surf the web using text-to -speech browsers on their phone while jogging or driving their car.
Likewise, I can see a time in the future, where people use gestures or hand emotions to select elements on a page. This may very well be focus states, so you need to add them to kind of work for what's going to happen possibly in the future.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 91401 Viewers
80 Video lessons · 138268 Viewers
59 Video lessons · 57101 Viewers
52 Video lessons · 70758 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.