2. Finding Your Keyboard Focus
Keyboard Focus is revealed through a "focus indicator", which is a visual indication of the focus.
Focus indicators exist both within the controls for a device and within the content you interact with inside that device. For example, your mouse pointer is an indicator of your focus. In addition to the actual mouse pointer, the content you "mouse over" can also change to reflect your focus, whether you are hovering, or actually clicking.
Different webpages and applications can style the focus indicator of interactive content in different ways, but it typically involves an outline and color change, and sometimes it is indicated with more noticeable attributes.
EXAMPLE 1: I am a contrived example of content driving a change of focus indicator, but only for the mouse...
The above example will reflect a focus change from your mouse, but it can not receive focus from the keyboard.
Example 2: I am a contrived example of content that also drives a change of focus from keyboard interaction...
If you press the TAB key repeatedly, you should be able to find the focus indicator as the focus moves from interactive element to interactive element. Keep pressing TAB until your focus is moved to Example 2 above.
With the keyboard focus on Example 2, mouse over Example 1 and notice how the focus indicator for the keyboard interaction is different from the focus indicator of the mouse interaction.
Remember, the browser is keyboard accessible as well as the Moodle course, so you might find the focus indicator in the top toolbar of the browser.
Go ahead and try it now – look at the links on this web page and the menus of the browser. If you’ve been banging away at the TAB key for a while in search of your focus, you might have reached the end of the document, in which case, try holding down SHIFT and TAB and see if you can find the focus indicator that way.
Where to Look for Keyboard Focus
Because we know that only interactive content can receive focus, we can always start our search for focus with any menus or links in the page.
- Links
- Menus
- Text Input Fields
- Buttons
- Checkboxes
- Radio Buttons
- Dialogs/Modals
- Expandable Definition Lists
- Date Pickers
- Color Pickers
- Volume/Range Slider
- Image Hotspots
Examples of Focus Indicators
The following content includes different examples of focus indicators. Use the TAB key to move your focus and see the different examples of styled focus indicators.
Div 1 - Focus effect: rose background with solid border.
Div 2 - Focus effect: pale blue background with dashed border.
Div 3 - Focus effect: bright yellow background with double border.
Div 4 - Focus effect: aquamarine background with inset border.
I do not accept your keyboard interaction, I am an example of inaccessible mouse-only content. (That's BAD - 'nkay?)
This is the first aspect of keyboard accessibility, being able to identify what you are using.
The user needs to be able to identify where the computer focus is, and when that focus changes. Accessible programs and content make the current focus abundantly clear with visual indicators that are clearly contrasted from surrounding content, and easy to detect.
While there is a minimum level of focus indication provided by the browser, it is good practice to ensure good focus indication through CSS.