FOCUS - It's Where the Action Is!
Site: | IDWerkz Resources |
Course: | Keyboard Navigation |
Book: | FOCUS - It's Where the Action Is! |
Printed by: | Guest user |
Date: | Monday, 29 September 2025, 7:28 AM |
Description
Before we can use the Essential Keys for accessibility testing, we need to address the issue of focus.
1. A Concept for Awareness and Activation
What is Focus?
Focus refers to the part of the computer that is awaiting your interaction.
There are several layers of potential focus:
- Operating System
- Applications/Programs (such as web browsers)
- Content (such as web pages and digital files)
- User Preferences (Assistive Technology and Custom CSS)
Focus is indicated in a variety of ways, depending on the program and the team who designed the software and content.
For example, in the example of a word processor used to create a document, your focus is indicated by the cursor. In the menu of that word processor, your focus might be indicated by a solid or dashed outline.
In the Windows OS, you can determine which kind of focus indicators are used for different content when you mouse over them by accessing the Windows settings for your Mouse.
In the example of a web page, both the browser and the author-chosen styling can influence whether (and how) focus is indicated.
Using a mouse to determine focus is so intuitive that most people never give the issue much thought. Translating this functionality to a keyboard requires awareness of how focus is managed in our interactions with digital information.
Understanding how focus functions is the first step in being able to find your focus with a keyboard. The next page includes some examples to help demonstrate focus.
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.
3. Setting Your Focus
For most of the sighted population, your computer focus is typically tied to the mouse.
Whenever you move your mouse, the cursor is the mouse pointer you move across the screen.
However, as we've seen, when using the mouse, there is a difference between hovering and selecting.
With a keyboard, the focus is immediately moved to the element as you are reviewing it.
With a keyboard you can only review interactive content. You can not select and copy text that is not accessible using the Essential Keys for Accessibility.
Instead of pushing a cursor around with a mouse or trackpad to whatever position we desire, someone using the TAB key must cycle through the interactive content in a linear fashion.
This is why basic keyboard navigation is considered basic. To provide more effective and efficient navigation we need to include additional keyboard commands, and for the most powerful keyboard navigation we need a dedicated Screen Reader such as NVDA or JAWS.
Using a screen reader program allows a user to determine which part of a document they want to interact with or use. Even so, they will still use the Essential Keys for accessibility.
Default Focus Points
There are certain keys which can automatically set your focus to a fixed region of the digital environment. This allows a user to establish reference points from which a mental model of the information in their computer and how it is arranged. This is particularly helpful when dealing with inaccessible content, and when you need to reset the computer focus when you can't find it.
Support for keyboard navigation using keys beyond the Essential Keys for navigation varies wildly between different programs. Part of the ongoing evolution of computer science and technologies includes the growing awareness of accessibility. As more and more people learn about and care about accessibility, the number of programs supporting accessible keyboard interaction is also increasing.
In Windows, you can jump to the default parts of your interface by using the following keys:
- ESC - exit the current context, setting focus to external container. (Containers: Operating System, application, document, widget/form.)
- ESC+ ENTER - Sets focus at Windows Start.
- F6 - Moves focus to the address bar when using an Internet browser.
- CTRL + HOME - Moves to the top of a web page when using an Internet browser, moves to the top entry when inside a “Select” form field.
- CTRL + END - Moves to the bottom of a web page when using an Internet browser, moves to the last entry when inside a “Select” form field.
A Lack of Focus
Unfortunately, some people style their content deliberately to not show a focus indicator. In those cases, it is often impossible to know for certain where the keyboard focus is.
Digital content without a focus indicator can never be considered accessible.