Table bookmarklet will help accessibility testers identify the tables on the page and the errors within them. Generally during an accessibility audit process often screen readers are used to check if the tables are being read appropriately. Table bookmarklet here will reduce the effort for the accessibility testers who are not regular users of screen readers and mark all the necessary pass and failed instances.

Tables Bookmarklet for Accessibility Testing

Tables Bookmarklet for Accessibility Testing inserts data table tags and attributes into the DOM with a yellow highlighted background so you can quickly identify the accessibility errors. cells show a ♿wheelchair symbol emoji. tags show a🎓graduation cap emoji. Scope attributes show a 👇 white down pointing backhand index emoji for scope=”col” and 🚣 rowboat emoji for scope=”row”. Headers and summary attributes show a ♿wheelchair symbol emoji. If an ID Reference to a non-existent ID exist then a red x emoji error shows ❌NO ID MATCH. <table> tags are outlined in Olive, are outlined in green, <th> tags have a orange dashed outline. Missing ID reference error cells have a red dotted outline.

Tables Bookmarklet Code

See the Pen Tables Bookmarklet by HolisticA11Y by HolisticA11Y (@HolisticA11YHub) on CodePen.

We hope these accessibility bookmarklets come in handy during your next accessibility audit.

References: Accessibility Bookmarklets