To highlight a focused control, move keyboard focus to it with Tab or Shift+Tab, verify that the page’s focus indicator is visible, and capture the screenshot without moving focus. If the site’s ring is too subtle, add a temporary :focus-visible style, then repeat the keyboard action. A DevTools or Playwright outline can annotate a control, but it is not the same as the website’s own accessible focus indicator.
What the screenshot should prove
A useful image shows the control in its real keyboard-focused state: a link, button, input, menu item or other keyboard-operable element has focus, and a visible ring or other treatment identifies it. The surrounding page should remain visible so a reader can tell which region and control are involved.
WCAG 2.2 Success Criterion 2.4.7 says, “Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.” The requirement concerns the live interface, not merely an annotation added after capture. W3C’s guidance is informative rather than an exclusive implementation recipe, so a red box alone does not prove conformance.
Capture the browser’s native focus indicator
- Open the target page in the browser and scroll to the control you want to document.
- Do not click the control if your goal is specifically to show keyboard focus. Clicking can produce different focus-indicator behavior because browsers account for input modality.
- Press Tab to move forward through focusable elements, or Shift+Tab to move backward. Stop when the intended control receives focus.
- Confirm that an outline, border, glow or other indication remains visible. It should not disappear after a timer.
- Capture the screen while focus remains on that element. Keep enough surrounding content to establish context, and avoid pressing a key that activates or changes the control.
Modern browsers normally display a default indication when a button receives focus through keyboard navigation. The exact shape and color depend on the browser, operating system and page styles, so check the actual browser used for the documentation.
#1 Best Overall
- Compatible with Nintendo Switch 2’s new GameChat mode
- Auto-Light Balance: RightLight boosts brightness by up to 50%, reducing shadows so you look your best—compared to previous-generation Logitech webcams (1)
- Privacy with a Slide: The integrated webcam cover makes it easy to get total, reliable privacy when you're not on a video call
- Built-In Mic: The built-in microphone lets others hear you clearly during video calls
- Easy Plug-And-Play: The Brio 101 works with most video calling platforms, including Microsoft Teams, Zoom and Google Meet—no hassle; it just works
Make focus easier to see with :focus-visible
When the native ring is low-contrast or hard to locate, add a temporary author style. The W3C working example uses:
:focus-visible { outline: 5px solid red; }Use a color that contrasts with both the component and nearby page colors. A thick outline is easy to spot in a teaching image, but it is only an example; choose a treatment appropriate to the design and validate it on the real page. The :focus-visible pseudo-class lets the browser show the authored style when it determines a visible focus indicator is appropriate, especially during keyboard navigation. That behavior is heuristic, so test the interaction in the target browser.
Apply a temporary style in DevTools
- Open DevTools (for example, F12 or the browser’s Inspect command).
- In the Elements panel, open the page’s Styles area or add a new rule to the relevant stylesheet.
- Insert the
:focus-visiblerule, or scope it to the component you are documenting, such asbutton:focus-visible. - Return to the page, press Tab until the target is focused, and capture the screenshot.
If you are changing production CSS rather than making a documentation-only override, do not remove an existing outline unless you replace it with an equally visible treatment. W3C lists invisible or removed focus indication as a failure technique.
Find the active element when it is difficult to locate
Chrome DevTools Live Expression
Chrome for Developers documents a Live Expression that tracks the focused element. In DevTools, open the Console, create a Live Expression for document.activeElement, and hover over the resulting element reference. Chrome highlights that element in the viewport. This is an inspection aid: the highlight helps you find the control, but it is not automatically part of the page screenshot or proof that the page supplies a focus ring.
Check focus from the console
For a quick confirmation, evaluate:
document.activeElementThe returned node is the element currently holding focus. If it is body or an unexpected container, press Tab again, inspect dialog focus management, or check whether a script moved focus.
Rank #2
- Compatible with Nintendo Switch 2’s new GameChat mode
- Crisp HD 720p/30 fps video calls with diagonal 55° field of view and auto light correction. Compatible with popular platforms including Skype and Zoom.
- The built-in noise-reducing mic makes sure your voice comes across clearly up to 1.5 meters away, even if you’re in busy surroundings.
- C270’s RightLight 2 feature adjusts to lighting conditions, producing brighter, contrasted images to help you look good in all your conference calls.
- The adjustable universal clip lets you attach the camera securely to your screen or laptop, or fold the clip and set the webcam on a shelf. You’re always ready for your next video call.
Add an explanatory overlay with Playwright
For repeatable documentation, Playwright’s debugging tools can add a persistent highlight around a target and support annotated screenshot output. An overlay style such as outline: 2px dashed red clearly labels the element for readers.
Keep two facts separate in the caption and workflow:
- The page’s focus indicator documents an actual keyboard-focus state and is relevant to accessibility.
- A Playwright or DevTools overlay is an explanatory annotation. It can identify a target even when the site’s own focus styling is subtle, but it does not create accessible focus behavior.
If you use both, capture the native or authored focus ring first, then add the annotation only when the reader needs extra guidance. Disclose the overlay in the image caption.
Accessibility checks before publishing
- Visibility: the indicator is present for the entire time keyboard focus is shown, not only during a brief animation.
- Contrast: the ring is distinguishable from the control and adjacent background in the final image.
- Geometry: the indicator follows the control closely enough that its target is unambiguous and does not disappear behind clipping or overflow.
- Input modality: you reached the target with Tab or Shift+Tab, rather than assuming a mouse click represents keyboard behavior.
- Browser validation: you checked the page in the browser and viewport represented by the screenshot.
WCAG 2.2 also defines SC 2.4.13 Focus Appearance at Level AAA, with additional guidance about indicator area and contrast. A screenshot can illustrate a problem or a good pattern, but only an evaluation of the live interface can establish whether a success criterion is met.
Choose the right highlighting method
| Method | Best use | What it demonstrates | Limitation |
|---|---|---|---|
| Browser-native indicator | Fast, faithful documentation | The browser’s real keyboard-focus state | May be subtle or vary by browser and operating system |
Site-authored :focus-visible style |
Design reviews and clearer teaching images | How the page intentionally presents keyboard focus | Must be checked for visibility and contrast; browser heuristics still apply |
| DevTools or Playwright overlay | Inspection and explanatory annotation | Which element the author wants the reader to notice | Does not itself establish an accessible focus indicator |
Automate the focused screenshot
Automation is useful when the same state must be captured across routes or browsers. The essential sequence is: load the page, focus the target by keyboard or script, wait for the indicator to render, and take the screenshot without blurring the element. If a script calls element.focus(), verify that the resulting visual state matches keyboard navigation in the browser you document; some sites style mouse and keyboard focus differently.
Rank #3
- 【Full HD 1080P Webcam】Powered by a 1080p FHD two-MP CMOS, the NexiGo N60 Webcam produces exceptionally sharp and clear videos at resolutions up to 1920 x 1080 with 30fps. The 3.6mm glass lens provides a crisp image at fixed distances and is optimized between 19.6 inches to 13 feet, making it ideal for almost any indoor use.
- 【Wide Compatibility】Works with USB 2.0/3.0, no additional drivers required. Ready to use in approximately one minute or less on any compatible device. Compatible with Mac OS X 10.7 and higher / Windows 7, 8, 10 & 11 / Android 4.0 or higher / Linux 2.6.24 / Chrome OS 29.0.1547 / Ubuntu Version 10.04 or above. Not compatible with XBOX/PS4/PS5.
- 【Built-in Noise-Cancelling Microphone】The built-in noise-canceling microphone reduces ambient noise to enhance the sound quality of your video. Great for Zoom / Facetime / Video Calling / OBS / Twitch / Facebook / YouTube / Conferencing / Gaming / Streaming / Recording / Online School.
- 【USB Webcam with Privacy Protection Cover】The privacy cover blocks the lens when the webcam is not in use. It's perfect to help provide security and peace of mind to anyone, from individuals to large companies. 【Note:】Please contact our support for firmware update if you have noticed any audio delays.
- 【Wide Compatibility】Works with USB 2.0/3.0, no additional drivers required. Ready to use in approximately one minute or less on any compatible device. Compatible with Mac OS X 10.7 and higher / Windows 7, 10 & 11, Pro / Android 4.0 or higher / Linux 2.6.24 / Chrome OS 29.0.1547 / Ubuntu Version 10.04 or above. Not compatible with XBOX/PS4/PS5.
When a page uses a modal, menu or single-page transition, wait until the relevant component is attached and visible before focusing it. Capture enough viewport context to show the control’s relationship to its label and surrounding content. Avoid overlays that cover the ring, and record the browser, viewport and any temporary CSS in the documentation notes.
Troubleshooting
No ring appears after pressing Tab
Check that the element is actually focusable, that a script has not moved focus elsewhere, and that CSS has not set outline: none or an equivalent invisible treatment. Inspect document.activeElement. If the page intentionally hides the ring, add a visible :focus-visible rule for the capture and report that the styling was added.
The ring appears only after clicking
Clicking uses a different input modality. Reload the page, move focus with Tab, and test the :focus-visible rule. Do not claim that a mouse-only outline demonstrates keyboard focus.
The focused element is off-screen
Press Tab again or scroll the element into view before capture. In automation, wait for scrolling and layout to settle. If a sticky header covers the control, adjust the viewport or scroll position rather than drawing a misleading box over the header.
The overlay hides the native ring
Capture the page’s focus state separately, then add the annotation as a second documented layer. Use a dashed outline outside the native ring and identify it in the caption.
The screenshot is inconsistent between runs
Disable animations for the documentation run, use a fixed viewport and device scale, wait for fonts and layout to finish, and ensure that focus starts from a known element. A page that restores focus from local state or a previous route may require an explicit reset.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Rank #4
- 1080P Webcam with Cover for Video Calls - EMEET computer webcam provides design and Optimization for professional video streaming. Realistic 1920 x 1080p video, 5-layer anti-glare lens, providing smooth video. C960 computer camera delivers 1920x1080 video with fixed focus (11.8–118.1 inches), so as to provide a clearer image. C960 USB webcam has a cover and can be removed automatically to meet your needs for privacy. For optimal image performance, use the webcam in a well-lit environment.
- Built-in 2 Omnidirectional Mics - EMEET webcam with microphone for desktop features 2 built-in omnidirectional microphones, picking up your voice to create clear audio for communication. When installing the webcam, select EMEET C960 as the default microphone input device in your computer and video applications and select C960 as the default device in Zoom/Teams and ensure microphone permissions are enabled for proper use. Please note that C960 does not include built-in speakers.
- Automatic Light Adjustment - Automatic exposure adjustment is applied in EMEET HD webcam 1080p so that the streaming webcam can deliver stable image performance. EMEET C960 camera for computer also features color adjustment and exposure optimization to help you look your best. For optimal video quality, it is recommended to use the webcam in normal or well-lit environments and select suitable video settings in your application. Proper lighting helps achieve a clearer and more balanced image.
- Plug-and-Play & Upgraded USB Connectivity - New C960 webcam features both USB Type-A & A-to-C adapter connections for wider compatibility. For stable performance, connect the webcam directly to the computer's main USB port and ensure the device is recognized correctly. If a hub or docking station is used, please ensure it provides sufficient power and stable data transmission, as limited ports may affect performance. 90° wide-angle lens captures more participants without frequent adjustments.
- High Compatibility & Multi Application - C960 webcam for laptop is compatible with Windows 10/11, macOS 10.14+, and Android TV 7.0+. Not supported: Windows Hello, TVs, tablets, or game consoles. It works with Zoom, Teams, Facetime, Google Meet, YouTube and more. Please select C960 webcam as the default camera and microphone device in your application and ensure camera/microphone permissions are enabled, especially on macOS. (Tips: Incompatible with Windows Hello)
Or skip the browser setup
ScreenshotNeo can capture the page through one request when you need repeatable screenshots rather than a manually configured browser. It supports CSS selectors, custom JavaScript, waiting conditions, device presets, viewport and retina settings, full-page capture and more. For a focus screenshot, supply JavaScript that focuses the intended control and a CSS rule that makes the state visible, then capture while that state is active.
Cookie and consent banners, newsletter popups and chat widgets are removed before the shot. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed; the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
cURL
See the ScreenshotNeo documentation for parameter details. This example captures Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to start.
Free tools Windows power users keep installed
One-click scans. No signup required.
FAQ
Can I highlight focus after taking the screenshot?
You can draw an annotation afterward, but it will not prove that the page had keyboard focus. Capture the live state first, then label it if needed.
Is a red outline required?
No. Red is only the color in W3C’s working example. Any treatment can work if it remains visible and sufficiently contrasts with the component and background.
Best Value
- Compatible with Nintendo Switch 2’s new GameChat mode
- HD lighting adjustment and autofocus: The Logitech webcam automatically fine-tunes the lighting, producing bright, razor-sharp images even in low-light settings. This makes it a great webcam for streaming and an ideal web camera for laptop use
- Advanced capture software: Easily create and share video content with this Logitech camera that is suitable for use as a desktop computer camera or a monitor webcam
- Stereo audio with dual mics: Capture natural sound during calls and recorded videos with this 1080p webcam, great as a video conference camera or a computer webcam
- Full HD 1080p video calling and recording at 30 fps. You'll make a strong impression with this PC webcam that features crisp, clearly detailed, and vibrantly colored video
Does :focus-visible always appear?
No. Browsers use heuristics to decide when the pseudo-class matches. Test the actual keyboard interaction in the target browser.
Frequently Asked Questions
Can I highlight focus after taking the screenshot?
You can draw an annotation afterward, but it will not prove that the page had keyboard focus. Capture the live state first, then label it if needed.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsIs a red outline required?
No. Red is only the color in W3C’s working example. Any treatment can work if it remains visible and sufficiently contrasts with the component and background.
Does :focus-visible always appear?
No. Browsers use heuristics to decide when the pseudo-class matches. Test the actual keyboard interaction in the target browser.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
