Accessibility / Analysis / First Accessible Paint Bookmarklet

The First Accessible Paint bookmarklet estimates when the page becomes keyboard-usable for assistive technology users. Measures time from start until both landmark regions (main, nav, region, header, footer) and focusable elements exist, uses MutationObserver to detect when these elements appear in the DOM, attempts to focus the first focusable element to confirm, and displays an alert with the elapsed time in milliseconds. If page is already usable, reports current elapsed time. Useful for measuring performance impacts on keyboard/screen reader users.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3Dperformance.now()%3Bfunction%20t()%7Breturn%20document.querySelector(%27main%2C%5Brole%3D%22main%22%5D%2Cnav%2C%5Brole%3D%22navigation%22%5D%2C%5Brole%3D%22region%22%5D%2Cheader%2Cfooter%27)%7Dfunction%20n()%7Breturn%20document.querySelector(%27a%5Bhref%5D%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%27)%7Dif(t()%26%26n())return%20void%20alert(%22Already%20usable.%20Elapsed%20%22%2B(performance.now()-e%7C0)%2B%22ms%22)%3Bconst%20o%3Dnew%20MutationObserver(()%3D%3E%7Bif(t()%26%26n())%7Bo.disconnect()%3Bconst%20t%3Ddocument.querySelector(%27a%5Bhref%5D%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%27)%3Btry%7Bt.focus()%7Dcatch%7B%7Dalert(%22Usable%20after%20%22%2B(performance.now()-e%7C0)%2B%22ms%22)%7D%7D)%3Bo.observe(document.body%2C%7Bsubtree%3A%210%2CchildList%3A%210%7D)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20First%20accessible%20paint%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(r)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Br.message)%7D%7D()%3B