FocusLens: Accessibility Focus Inspection Tool

What is FocusLens?

FocusLens is a lightweight accessibility bookmarklet that helps web developers, designers and testers visualise and understand keyboard focus as it moves through a webpage. When activated, it displays detailed information about the currently focused element, including:

• The element type and ARIA role
• ID and class attributes
• Label information
• ARIA states and properties
• Required and validity states
• Parent element hierarchy

The tool creates a visual highlight around the focused element and displays detailed information in a panel at the bottom of the screen.

How to use

1. Select and drag the below bookmarklet link to your bookmarks bar.
2. (In Firefox you can also right click on the link below and select Bookmark link).
3. Open a website you wish to test and then select the FocusLens bookmarklet from your bookmarks bar.

FocusLens

Why FocusLens is Useful

Testing keyboard navigation is a critical part of ensuring web accessibility (WCAG 2.2 AA compliance), but it can be challenging to:

• Understand where keyboard focus is currently positioned
• Determine whether elements have appropriate accessible names
• Verify correct ARIA roles and states are being used
• Identify focus order problems
• Detect missing focus indicators

FocusLens addresses these challenges by providing clear visual feedback and detailed information about each focused element, making it easier to identify and fix accessibility issues related to keyboard navigation and focus management.

Top Tips for Usage

1. Keyboard Testing: Use Tab, Shift+Tab, arrow keys, and Enter to navigate through the page and observe focus behaviour.
2. Form Validation: Pay attention to the 'Required' and 'Invalid' indicators when testing form fields.
3. Check Labels: Verify that all interactive elements have appropriate labels, either through explicit label elements, aria-label, or other accessible naming methods.
4. Watch for Focus Order: Tab through your entire page to ensure the focus order is logical and follows the visual layout.
5. Verify ARIA States: Check that interactive components like accordions and tabs correctly update their ARIA states (expanded, selected, etc.) when activated.
6. Test Skip Links: Ensure any skip navigation links correctly move focus to the main content.
7. Check Custom Components: Pay special attention to custom widgets and components to verify they have appropriate roles and keyboard interaction patterns.
8. Compare Browsers: Test focus behaviour across different browsers, as focus handling can sometimes vary.

What FocusLens Won't Do

1. Automated Testing: FocusLens is a manual testing tool and doesn't automatically scan pages for issues or generate reports.
2. Fix Issues: The tool identifies focus-related problems but doesn't implement fixes—you'll need to modify your code to address any issues found.
3. Test All WCAG Criteria: While useful for focus-related accessibility testing, FocusLens doesn't check for other WCAG requirements such as colour contrast, content structure, or alternative text.
4. Work on Shadow DOM Elements: The tool may have limited functionality with elements inside Shadow DOM.
5. Test Mobile Touch Interactions: FocusLens focuses on keyboard navigation and doesn't help test touch-specific interactions on mobile devices.
6. Performance Testing: The tool doesn't measure or report on performance impacts of accessibility implementations.
7. Analyse Off-Screen Content: FocusLens only shows information about elements that are currently in the DOM and focused, not content that may be loaded dynamically.
8. Evaluate Screen Reader Compatibility: While it shows ARIA attributes, it doesn't verify how screen readers actually announce content.

This bookmarklet was inspired by Hidde de Vries' blog post, "Console logging the focused element as it changes".