2.4.3 Focus order & 2.4.7 Focus visible

These two guidelines seem pretty similar. They actually follow on from each other but the former is an A level requirement and the latter, AA.

What is focus order?

Focus order means that as you tab through a website, the interactive items (links and buttons) that you go through, are in a logical order. Usually, this just happens automatically, especially if the website is quite simple but there are situations where it goes wrong.

We recently got new HR and benfits systems at work and I was involved in user testing. One of the main things I test for is keyboard navigation. This was really odd! There were tiles across the screen, and each one was a link to a particular benefit... but when you tabbed through, the order was completely random! They went back to the supplier of course, and it got fixed. 

Reading order

Reading order is important in PowerPoint. I was sent a PowerPoint presentation to check this week. The author had actually done a really good job of things like alt text - amongst the best I've seen - and there were none of the usual contrast issues or dodgy shapes with text boxes over the top. I was really impressed!

Then I did a quick check of the reading order for each slide. That's where it all fell apart. To check this, you can go to the HOME menu, click on ARRANGE and go to the very bottom to click on SELECTION PANE. This opens a pane on the right where you put everything in order. You basically need to order it backwards... so the title is at the bottom and then each item, finishing at the top. 

What is focus visible?

As you tab through a webpage, you may notice, in the bottom left corner, a little pop-up with the target URL in it. This is evidence that no matter what you see on screen, you are interacting with a particular link. However, it's not always easy to see and not always there. What we really need is a box around it, so that you can see which item is in focus. Then it is easy to know when to click ENTER.

Screen shot of a navigation menu with one item highlighted in brown

In the screenshot above, I have tabbed through the menu to Skills. Skills is in focus and I have made focus visible by creating a brown box around the item. This matches my hover state, so you get the same effect by hovering the mouse over an item. 

I did this in my css:

.navbar a:hover, a:focus, .dropdown:hover, .dropbtn:focus {
  background-color: #CC8000;
  text-decoration: underline;
  font-weight: bold;

This means that when you hover or tab (including the dropdown menus) the item gets a brown (#CC8000) background, underlined and bold text. And this makes it easy to see where we are on the page. 


Popular posts from this blog

1.3.1 Info and relationships

1.1 Text alternatives

Alt text on social media 1 - Facebook