A simple accessible name finder
A simple function to a JavaScript bookmarklet that displays accessible name information about HTML elements when hovering the mouse. It shows the element's name (tagName, ID, class) and accessible attributes (such as aria-label, alt, etc.), truncated to 120 characters if necessary. The script excludes elements like div, html, and body tags.
javascript:void%20function(){(function(){function%20a(b){const%20c={};if(!b||%22hidden%22===getComputedStyle(b).visibility||%22none%22===getComputedStyle(b).display||b.closest(%22[aria-hidden=\%22true\%22]%22))return%20c;if(b.getAttribute(%22aria-labelledby%22)){const%20d=b.getAttribute(%22aria-labelledby%22).split(%22%20%22),e=d.reduce((c,d)=%3E{const%20e=b.ownerDocument.getElementById(d);if(e){const%20b=e.id%3F`${e.tagName.toLowerCase()}%23${e.id}`:`${e.tagName.toLowerCase()}`,d=a(e);0%3CObject.keys(d).length%26%26(c[b]=d)}return%20c},{});0%3CObject.keys(e).length%26%26(c[%22aria-labelledby%22]=e)}const%20d=b.getAttribute(%22aria-label%22)%3F.trim();if(d%26%26(c[%22aria-label%22]=d),b.id){const%20d=b.ownerDocument.querySelector(`label[for=%22${b.id}%22]`);if(d){const%20b=a(d);0%3CObject.keys(b).length%26%26(c[%22label[for]%22]=b)}}const%20e=b.closest(%22label%22)%3F.textContent.trim();e%26%26(c[%22closest-label%22]=e);const%20f=b.getAttribute(%22alt%22)%3F.trim();f%26%26(c.alt=f);const%20g=b.closest(%22figure%22)%3F.querySelector(%22figcaption%22)%3F.textContent.trim();g%26%26(c.figcaption=g);const%20h=b.closest(%22table%22)%3F.querySelector(%22caption%22)%3F.textContent.trim();h%26%26(c.caption=h);const%20i=b.closest(%22fieldset%22)%3F.querySelector(%22legend%22)%3F.textContent.trim();i%26%26(c.legend=i);const%20j=b.getAttribute(%22title%22)%3F.trim();j%26%26(c.title=j);const%20k=b.getAttribute(%22placeholder%22)%3F.trim();k%26%26(c.placeholder=k);const%20l=Array.from(b.childNodes).reduce((b,c,d)=%3E{if(c.nodeType===Node.TEXT_NODE){const%20a=c.textContent.trim();a%26%26(b.text=a)}else{const%20e=a(c);if(0%3CObject.keys(e).length){const%20a=c.id%3F`${c.tagName.toLowerCase()}%23${c.id}`:`${c.tagName.toLowerCase()}_${d}`;b[a]=e}}return%20b},{});return%200%3CObject.keys(l).length%26%26(c.children=l),0%3CObject.keys(c).length%3Fc:{}}function%20b(a,b=120){return%20a.length%3Eb%3Fa.slice(0,b)+%22...%22:a}function%20c(a){let%20d=%22%3Cul%3E%22;for(const[e,f]of%20Object.entries(a))d+=%22object%22==typeof%20f%26%26null!==f%3F`%3Cli%3E%3Cstrong%3E${e}:%3C/strong%3E%20${c(f)}%3C/li%3E`:`%3Cli%3E%3Cstrong%3E${e}:%3C/strong%3E%20${b(f)}%3C/li%3E`;return%20d+=%22%3C/ul%3E%22,d}const%20d=document.createElement(%22div%22);document.body.appendChild(d);const%20e=d.attachShadow({mode:%22open%22}),f=document.createElement(%22div%22);f.style.position=%22fixed%22,f.style.top=%2210px%22,f.style.left=%2210px%22,f.style.width=%22400px%22,f.style.backgroundColor=%22yellow%22,f.style.border=%221px%20solid%20black%22,f.style.padding=%2210px%22,f.style.zIndex=%2210000%22,f.style.cursor=%22move%22,f.style.userSelect=%22none%22,f.style.boxShadow=%222px%202px%2010px%20rgba(0,0,0,0.5)%22,e.appendChild(f);const%20g=document.createElement(%22span%22);g.innerHTML=%22%26times;%22,g.style.position=%22absolute%22,g.style.top=%225px%22,g.style.right=%2210px%22,g.style.cursor=%22pointer%22,g.style.fontSize=%2216px%22,g.style.fontWeight=%22bold%22,g.style.color=%22%23333%22,f.appendChild(g),g.addEventListener(%22click%22,function(){f.style.display=%22none%22});let%20h,i,j=!1;f.addEventListener(%22mousedown%22,function(a){j=!0,h=a.clientX-f.offsetLeft,i=a.clientY-f.offsetTop}),document.addEventListener(%22mousemove%22,function(a){j%26%26(f.style.left=a.clientX-h+%22px%22,f.style.top=a.clientY-i+%22px%22)}),document.addEventListener(%22mouseup%22,function(){j=!1}),document.addEventListener(%22mouseover%22,function(b){const%20d=b.target;if(f.contains(d))return;if([%22div%22,%22html%22,%22body%22].includes(d.tagName.toLowerCase()))return;const%20e=a(d),h=d.tagName.toLowerCase(),i=d.id%3F`%23${d.id}`:%22%22,j=d.className%3F`.${[...d.classList].join(%22.%22)}`:%22%22;f.innerHTML=`
%20%20%20%20%20%20%3Cstrong%3E${h}${i}${j}:%3C/strong%3E%3Cbr/%3E
%20%20%20%20%20%20${c(e)}%20%20%3C!--%20Call%20the%20function%20to%20create%20HTML%20--%3E
%20%20%20%20`,f.appendChild(g)}),document.addEventListener(%22mouseout%22,function(){f.innerHTML=%22%3Cstrong%3EHover%20over%20an%20element%20to%20see%20its%20accessible%20name%3C/strong%3E%22,f.appendChild(g)}),f.innerHTML=%22%3Cstrong%3EHover%20over%20an%20element%20to%20see%20its%20accessible%20name%3C/strong%3E%22,f.appendChild(g);const%20k=document.createElement(%22style%22);k.textContent=`
%20%20%20%20div%20{
%20%20%20%20%20%20font-family:%20Arial,%20sans-serif;%20/*%20Set%20font%20family%20*/
%20%20%20%20%20%20color:%20black;%20/*%20Set%20text%20color%20*/
%20%20%20%20%20%20font-size:%2014px;%20/*%20Set%20font%20size%20*/
%20%20%20%20%20%20line-height:%201.5;%20/*%20Set%20line%20height%20*/
%20%20%20%20%20%20overflow:%20auto;%20/*%20Allow%20scrolling%20if%20content%20overflows%20*/
%20%20%20%20}
%20%20%20%20strong%20{
%20%20%20%20%20%20font-weight:%20bold;%20/*%20Set%20strong%20text%20to%20bold%20*/
%20%20%20%20}
%20%20`,e.appendChild(k)})()}();