Accessibility / Structure & Headings / Aria Roles Viewer Bookmarklet

The ARIA Roles Viewer bookmarklet displays badges showing the ARIA role attribute of all elements with roles defined. Finds all elements with a `role` attribute, extracts the role value and any associated aria-label or aria-labelledby references, and positions a badge at each element's location showing "role (label)". Useful for verifying that custom components have appropriate ARIA roles and labels. Run again to remove.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-roles-view%22%2Ct%3Ddocument.getElementById(e)%3Bif(t)return%20void%20t.remove()%3Bconst%20o%3Ddocument.createElement(%22div%22)%3Bo.id%3De%2Co.style%3D%22position%3Afixed%3Binset%3A0%3Bpointer-events%3Anone%3Bz-index%3A999999%22%3B%5B...document.querySelectorAll(%22%5Brole%5D%22)%5D.forEach(e%3D%3E%7Bconst%20t%3De.getAttribute(%22role%22)%2Cn%3De.getAttribute(%22aria-label%22)%7C%7Ce.getAttribute(%22aria-labelledby%22)%7C%7C%22%22%2Cr%3Ddocument.createElement(%22div%22)%2Cl%3De.getBoundingClientRect()%3Br.textContent%3Dt%2B(n%3F%60%20(%24%7Bn%7D)%60%3A%22%22)%2Cr.style%3D%60position%3Aabsolute%3Bleft%3A%24%7Bl.left%2BscrollX%7Dpx%3Btop%3A%24%7Bl.top%2BscrollY%7Dpx%3Bbackground%3A%23eef%3Bborder%3A1px%20solid%20%2399f%3Bborder-radius%3A4px%3Bpadding%3A2px%204px%3Bfont%3A11px%20monospace%3Bpointer-events%3Anone%60%2Co.appendChild(r)%7D)%2Cdocument.body.appendChild(o)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20ARIA%20roles%20viewer%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7D%7D()%3B