Bookmarklets for accessibility audits
HTML/DOM validation
For accessibility audits not only the HTML source needs to be validated, but the DOM after JavaScript may have changed it. The check serialized DOM of the current page bookmarklet automates the manual copy-and-paste task.
WCAG parsing compliance filter
The WCAG parsing compliance filter bookmarklet changes the W3C HTML validator output for errors relevant to accessibility audits.
CSS adaptability
Foreground and background color defined
The foreground and background color defined (Vorder-und Hintergrundfarbe definiert) bookmarklet changes the background and text color on the <html> element. Every element that has a background color defined, should also have a foreground color and vice versa.
Text spacing
People may force additional spacing for text. The text spacing (Textabstände) bookmarklet increases the line-height, letter-spacing, and word-spacing for all elements and sets margin-bottom on <p> elements.
Force show focus
Some websites don’t have a visible focus state. The force show focus bookmarklet forcible adds a focus outline, so keyboard accessibility audits can be performed.
a11y-outline
a11y-outline shows a rotor-like menu for landmarks, headings, and links. Landmarks and headings are visualized as a tree, so correct nesting and heading structure can be checked.
The bookmarklet is also available as an extension for Firefox and Chrome.
Highlighters
Structured content
The structured content (Inhalte gegliedert) bookmarklet highlights headings (<h1> … <h6>), paragraphs (<p>), text formatting (<b>, <i>, <strong>, <em>), tables (<table>), and fieldsets (<fieldset>, <legend>).
ARIA
The ARIA bookmarklet displays aria-* and role attributes and if necessary corresponding id attributes.
Forms
The forms bookmarklet highlights form elements including relevant attributes and their corresponding <label> or <legend> or alternative methods of labelling.
Headings
The headings bookmarklet highlights <h1> to <h6> elements and elements manually marked as role="heading".
Iframes
The iframes bookmarklet highlights <iframe> elements and informs about the title and src attributes.
Images
The images bookmarklet highlights images and their alt, role, title, and applicable aria-* attributes.
Landmarks
The landmarks bookmarklet highlights elements with implicit roles and elements manually marked up as a specific role.
Lang
The lang bookmarklet shows the document language (<html lang="…">) and highlights elements with a lang attribute.
Links
The links bookmarklet highlights all <a> elements (regardless if they have an href attribute or not).
Lists
The lists bookmarklet highlights <ul>, <ol>, <li>, <dl>, <dt>, and <dd> elements.
Tabindex
The tabindex bookmarklet highlights elements with a tabindex attribute and warns about values that are not -1 or 0.
Tables
The tables bookmarklet highlights <table> elements, all of their children (<caption>, <tr>, <th>, <td>), and relevant attributes.
Target size
The target size bookmarklet highlights overlapping elements.
Title
The title bookmarklet highlights elements with a title attribute.
Utilities
Disable CSS
For some audit steps it may be useful to view the page without any CSS. The disable CSS bookmarklet removes all external stylesheets, <style> elements, and style attributes.
Open <details>
Sites like FAQs may have a lot of <details> elements. Instead of opening them manually, the open details bookmarklet automatically opens all <details> elements on the page.
Show document title
The show document title bookmarklet adds the document title as the first element to the <body>. This allows comparing the document title and its structure across pages without having to wait for the browser tab tooltip to appear and show the whole title.
Trigger debugger
Some dynamic elements like custom comboboxes may be hard to inspect with the browser dev tools because they close on loosing focus. The trigger debugger bookmarklet calls debugger after a specified amount of time.
debugger is only available with opened dev tools.