Accessibility / URLs Links / Accessible Name Badges Bookmarklet

The Accessible Name Badges bookmarklet displays badges showing the computed accessible name of all interactive elements on the page. Finds links, buttons, inputs, selects, textareas, elements with roles, and elements with tabindex, calculates each element's accessible name using the accessibility tree computation order (aria-label, aria-labelledby, alt, placeholder, then innerText), and positions a badge at each element's location showing "tagname: accessible name". Elements without names are marked "(no name)". Useful for verifying that interactive elements have proper accessible names for assistive technologies. Run again to remove.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-name-badges%22%2Ct%3Ddocument.getElementById(e)%3Bif(t)return%20void%20t.remove()%3Bconst%20n%3Ddocument.createElement(%22div%22)%3Bn.id%3De%2Cn.style%3D%22position%3Afixed%3Binset%3A0%3Bpointer-events%3Anone%3Bz-index%3A2147483647%22%3Bconst%20o%3D%27a%5Bhref%5D%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Brole%5D%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%27%3Bfunction%20r(e)%7Bconst%20t%3De%3D%3Ee%26%26document.getElementById(e)%3F.innerText.trim()%3Bif(e.hasAttribute(%22aria-label%22))return%20e.getAttribute(%22aria-label%22).trim()%3Bconst%20n%3De.getAttribute(%22aria-labelledby%22)%3Bif(n)return%20n.split(%2F%5Cs%2B%2F).map(t).filter(Boolean).join(%22%20%22).trim()%3Bif(e.alt)return%20e.alt.trim()%3Bif(e.placeholder)return%20e.placeholder.trim()%3Breturn(e.innerText%7C%7C%22%22).trim().slice(0%2C80)%7Dfor(const%20i%20of%20document.querySelectorAll(o))%7Bif(%21i.offsetParent)continue%3Bconst%20a%3Di.getBoundingClientRect()%2Cl%3Dr(i)%7C%7C%22(no%20name)%22%2Cs%3Di.tagName.toLowerCase()%2Cc%3Ddocument.createElement(%22div%22)%3Bc.textContent%3D%60%24%7Bs%7D%3A%20%24%7Bl%7D%60%2Cc.style%3D%60position%3Aabsolute%3Bleft%3A%24%7Ba.left%2BscrollX%7Dpx%3Btop%3A%24%7Ba.top%2BscrollY%7Dpx%3Bbackground%3A%23eef%3Bborder%3A1px%20solid%20%2399f%3Bborder-radius%3A4px%3Bpadding%3A2px%204px%3Bfont%3A11px%20monospace%3Bpointer-events%3Anone%60%2Cn.appendChild(c)%7Ddocument.body.appendChild(n)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Accessible%20name%20badges%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(d)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bd.message)%7D%7D()%3B