Media
1 item
Description
Hover over any element to inspect accessibility attributes — ARIA, roles, alt text, tab order, and more. By Steven Trotter. WHAT IT SHOWS ARIA label, role, and computed accessible name (resolved from aria-labelledby, text content, alt text, and title — in priority order) Alt text on images, with clear error/warning/pass status aria-hidden detection — flags elements hidden from assistive technology, with an error if the element is also keyboard-focusable aria-describedby — resolves referenced element IDs and shows the associated description text Explicit and implicit ARIA roles, with heading level for h1–h6 and a warning if heading levels are skipped ARIA state attributes — aria-expanded, aria-pressed, aria-checked, aria-selected Link destination — shows the href value on any anchor element Form field details — required, disabled, read-only, and autocomplete (flags missing autocomplete on email, tel, and password fields per WCAG 1.3.5) Tab order and keyboard reachability — including ancestor context (e.g. an image inside a link) Font information for text elements (size, weight, family, and large-text classification) Image file size — reads from the browser performance timeline; flags images over 1 MB Phone number links (tel:) without descriptive labels Email links (mailto:) without descriptive labels STATUS AT A GLANCE The tooltip header changes color based on what it finds: Green — element looks clean Amber — potential issue worth reviewing Red — confirmed accessibility problem TOGGLE Click the toolbar icon to enable or disable the inspector. The icon badge shows ON when active. You can also use the keyboard shortcut Option+Shift+I on Mac (reassignable from chrome://extensions/shortcuts). Developed by Steven Trotter. Part of the Vesper accessibility suite.