Accessibility / Analysis / Tota11y

tota11y is an "accessibility visualization toolkit" that helps visualize how your site performs with assistive technology. It adds visual indicators to potential accessibility issues, highlighting elements lacking accessible names, showing tabindex order, indicating low contrast text, and revealing hidden ARIA labels. A great educational tool for understanding accessibility. Note: This project is deprecated but still functional. 1.3.1: Info and Relationships, 1.4.1: Use of Color, 1.4.3: Contrast (Minimum), 2.1.1: Keyboard, 2.4.1: Bypass Blocks, 2.4.6: Headings and Labels, 3.3.2: Labels or Instructions, 4.1.1: Parsing, 4.1.2: Name, Role, Value.

WCAG SC 1.1.1: Non-text Content
Run Tota11y

Test run or drag to
bookmarklets bar to install

javascript:%21function()%7B%22use%20strict%22%3Btry%7B(e%3Ddocument.createElement(%22SCRIPT%22)).type%3D%22text%2Fjavascript%22%2Ce.src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2F%40khanacademy%2Ftota11y%400.2.0%2Fdist%2Ftota11y.js%22%2Cdocument.getElementsByTagName(%22head%22)%5B0%5D.appendChild(e)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7Dvar%20e%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Fjdan%2Ftota11y%5CnBookmarklet%20name%3A%20tota11y%5CnLicense%3A%20MIT%20License%5CnCopyright%3A%20Jordan%20Scales%5CnNote%3A%20Project%20deprecated%20-%20use%20axe%20DevTools%20or%20browser%20accessibility%20tools%20instead%5Cn%22)%3B
← Back to all bookmarklets