What is Focus?
Focus is the appearance an HTML element has to indicate to a user what the current active element is.
A perfect example we are all familiar with is when we click inside a text field in preparation to type and we can see the text field change (usually with a color border).
The text field is “in focus” or “has focus” until the visitor moves away from the field (by any means).
Tabbing between elements changes focus
If you press the Tab Key several times, you will see how the focus moves between various elements – “Skip to content” Link, the Logo, Main menu, and various Headings (H1, H2, etc)… using Shift+Tab will cycle you in reverse.
If you cycle all the way through, you will also notice the focus moves outside the web content area into the browser chrome… this is expected behavior to allow users to also interact with their browser controls.
When interactivity follows expected behavior it’s considered “accessibility pattern behavior” or “patterned behavior”… and when it doesn’t, it’s called “anti-pattern”.
Some commentary about Hi-Wire
Now try tabbing on the Hi-Wire site and see how confusing it is. One reason is not all “tabindexes” have been set… also there are no focus-visible styles.
If you know how to use the Web Inspector to set :focus {outline: 3px solid orange;}, you can see the tabbing activity.
However, you will also see that the focus disappears because it is “going down into the closed menu and the children menu items” and, at another point, “into one of the slides”.
Continuing to Tab eventually brings it back out and into the visible content below… but then you will notice it jumps between buttons and elements rather chaotically.
Eventually it jumps back up to the top of the page… to the 2 icons on the right side (delivery truck and email icons)… this is a perfect example of anti-pattern behavior.
The “outline” property of an element should not be overridden with CSS because that is the primary focus indicator.
A designer can use :focus-visible styles so that the styling only shows when a user is tabbing to navigate (a good clue that a user may be experiencing impairment).
ACTION ITEM: Add styles to indicate focus.