Accessibility / Analysis / Focus Graph Analyzer Bookmarklet

The Focus Graph Analyzer bookmarklet models keyboard tab order as a directed graph to identify potential focus issues. Builds the tab order sequence from focusable elements (considering tabindex values), draws badges showing each element's position and its forward target, calculates trap candidates (elements where forward and backward targets equal themselves), counts positive tabindex items that override natural order, identifies unreachable interactive elements, and displays an alert with statistics. Visualizes the focus flow to detect keyboard traps and ordering problems. Run again to remove.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-focus-graph%22%2Ct%3Ddocument.getElementById(e)%3Bt%26%26t.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%5B...document.querySelectorAll(%22a%5Bhref%5D%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Btabindex%5D%22)%5D.filter(e%3D%3E%21e.disabled%26%26-1%21%3D%3De.tabIndex%26%26e.offsetParent).map((e%2Ct)%3D%3E(%7Bel%3Ae%2Cdom%3At%2Cti%3Ae.tabIndex%7C%7C0%7D))%2Ca%3Do.filter(e%3D%3Ee.ti%3E0).sort((e%2Ct)%3D%3Ee.ti-t.ti%7C%7Ce.dom-t.dom)%2Cl%3Do.filter(e%3D%3E0%3D%3D%3De.ti).sort((e%2Ct)%3D%3Ee.dom-t.dom)%2Cr%3D%5B...a%2C...l%5D.map(e%3D%3Ee.el)%2Ci%3Dnew%20Map(r.map((e%2Ct)%3D%3E%5Be%2Ct%5D))%2Cs%3Dnew%20Map(r.map((e%2Ct)%3D%3E%5Be%2Cr%5B(t%2B1)%25r.length%5D%7C%7Cnull%5D))%2Cd%3Dnew%20Map(r.map((e%2Ct)%3D%3E%5Be%2Cr%5B(t-1%2Br.length)%25r.length%5D%7C%7Cnull%5D))%3Blet%20c%3D0%2Cp%3D0%2Cu%3Da.length%3Bif(%21r.length)return%20void%20alert(%22No%20focusable%20elements%22)%3Bnew%20Set(r)%2Cr%5B0%5D%3Bconst%20m%3D%5B%5D%3Bfor(const%20e%20of%20r)%7Bconst%20t%3De.getBoundingClientRect()%2Co%3Ddocument.createElement(%22div%22)%2Ca%3Ds.get(e)%3Bd.get(e)%3Bo.textContent%3Di.get(e)%2B1%2B%22%5Cu2192%22%2B(a%3Fi.get(a)%2B1%3A%22%5Cxd7%22)%2Co.style%3D%60position%3Aabsolute%3Bleft%3A%24%7Bt.left%2BscrollX%7Dpx%3Btop%3A%24%7Bt.top%2BscrollY%7Dpx%3Bbackground%3A%23ffe08a%3Bborder%3A1px%20solid%20%23333%3Bborder-radius%3A10px%3Bpadding%3A2px%206px%3Bfont%3A12px%20monospace%60%2Cn.appendChild(o)%2Cm.push(t)%7Dfor(const%20e%20of%20r)%7Bconst%20t%3Ds.get(e)%2Cn%3Dd.get(e)%3Bt%3D%3D%3De%26%26n%3D%3D%3De%26%26c%2B%2B%7Dp%3D%5B...document.querySelectorAll(%22a%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Btabindex%5D%22)%5D.filter(e%3D%3Ee.offsetParent).filter(e%3D%3E%21i.has(e)%26%26-1%21%3D%3De.tabIndex).length%2Cdocument.body.appendChild(n)%2Calert(%60Focus%20nodes%3A%20%24%7Br.length%7D%5CnPositive%20tabindex%3A%20%24%7Bu%7D%5CnTrap%20candidates%3A%20%24%7Bc%7D%5CnUnreachable%20candidates%3A%20%24%7Bp%7D%60)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Focus%20graph%20analyzer%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7D%7D()%3B