Universal Image Alt Text Viewer

WHAT IT DOES

Universal Image Alt Text Viewer automatically detects images on any webpage and displays a compact tooltip showing the alt text when you hover over an image. For images without alt text, a warning icon appears indicating a potential accessibility issue. Clicking on an image while holding Shift opens a detailed dialog showing all image attributes including alt, title, src, width, height, ID, and class. This tool helps web developers test accessibility, content creators verify image descriptions, and all users understand the alternative text associated with images.

WHERE IT RUNS

This extension works on any website across the entire web. It functions on news articles, blog posts, e-commerce sites, social media, and any page with images. The tool works across all domains and adapts to dynamically loaded content and single-page applications.

HOW TO USE

Install the extension and navigate to any webpage with images. Hover over any image to see a tooltip with its alt text, title, and a shortened URL. Images without alt text display a ⚠️ warning icon in the corner. Hold Shift and click on any image to open a detailed attributes dialog showing alt, title, src, width, height, ID, and class. Use the overlay panel to customize the experience: toggle alt text display on hover on or off, toggle missing alt warnings on or off, toggle image attributes display on or off, choose the tooltip position (Top, Bottom, Left, or Right), and click "Refresh Images" to re-scan the page for images.

TECHNICAL SECTION — IMAGE DETECTION AND ALT TEXT EXTRACTION

The extension scans the page for all img elements and attaches mouseenter and mouseleave event listeners. When an image is hovered, the tool extracts the alt, title, and src attributes using getAttribute(). A debounced timer delays the tooltip appearance by 300ms to prevent accidental triggers. The tooltip is positioned using getBoundingClientRect() with edge detection to prevent overflow, and is styled with a backdrop blur effect. Missing alt warnings are added by wrapping the image in a relative-positioned container and inserting a warning badge. The Shift+click dialog is implemented as a modal with a grid layout showing all attributes. A MutationObserver monitors the DOM for new images and processes them automatically.

THE PANEL — DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The overlay panel is fully interactive and designed for seamless multitasking. Drag it anywhere on the screen using the handle at the top of the panel; the position is saved per site so it stays where you left it across sessions. The panel includes a snap-to-edge feature that gently anchors the overlay to the nearest screen edge when released. Click the collapse button to minimize the panel to a compact pill showing the current image count; expand it again with a single click. Resize the panel vertically by dragging the bottom-right corner to view more controls. Press the Escape key at any time to instantly close the overlay; it reappears on the next page navigation or refresh.

PLEASE NOTE

This extension requires the free BotGentz companion extension to function, as it provides the underlying content script injection and cross-origin communication framework. No personal data, browsing history, or image data is stored, transmitted, or shared. Settings are stored locally in your browser using GM_setValue and are never sent to any external server. The extension does not access or store login credentials, financial data, or personally identifiable information. The tool reads image attributes visible on the page and does not access any image data beyond what is already loaded in the DOM. The missing alt warning indicates the absence of an alt attribute, which is a common accessibility issue. The tool is for educational and testing purposes and should be used to improve accessibility, not as a replacement for proper accessibility testing.