Email testing tools
A few bookmarklets to help with manual testing.
Bookmarklets
- Add bookmarklet to the browsers bookmarks (dragging it usually works).
- Navigate to the HTML version of the email for testing.
- Click the bookmark.
For colour contrast testing, I suggest using Webaims
There is no specific order to run the checks, but please refresh the page before each check. Sometimes running two at the same time can help with clarity. For example, "Linearise tables" and "Image alt text".
-
Outline tables
Bookmarklet:
Tables check v2.0 Outlines all the tables in the email so you can see the presence of presentation tables.
- Solid green outline
- valid for layout purposes - Dotted red outline
- must be a comparision table. Please check this is the case.
Helps to check:
- Solid green outline
-
Linearise tables
Bookmarklet:
Layout check v1.4 Check the layout table structure doesn't change the reading order of the email.
Upon clicking, layout table cells are put into a single column, so they may be read in the same order that a screen-reader uses. The layout table is outlined:
- Solid faint green outlines - Linearised table, check the reading order is still okay.
Helps to check:
-
Image alt text
Bookmarklet:
Image alt check v5.2 All images show their alt text.
- Solid green outline
Good, but check the alt text is relevant to the content. - Dashed blue outline
Image is inside a link, check the alt text describes the destination. - Dotted red outline
No alt text present, remedial action required.
Version 5 introduces a test for the Outlook component
v:roundrect
and checks for an alt text, reporting when missing.Helps to check:
- Solid green outline
-
Outline headings
Bookmarklet:
Headings check v3.5 Check all the headings are marked and are at the correct level. Check for anything missed or inappropriate.
- One h1 per email, the emails main heading
- Sub-sections are h2
- Sub-sub-sections are h3
- Sub-sub-sub-sections are h4
Test it on this page to see what it does.
Upon clicking, check all headings are outlined:
- Solid green outlines - Headings h1 to h6.
- Dotted red outlines
- Empty headings, please remove.
- Or, a missing H1 heading and remediation is required.
- Or, more than a single H1 heading.
Helps to check:
-
Outline large text
Bookmarklet:
Large text check v3.65 Text which is larger than 14px (body copy) will be highlighted with a dotted red outline. This test ignores headings, links, and elements without textural copy. A left-hand purple border is applied to indicate the bookmarklet is running.
Please sense check anything highlighted, should it be a heading?
Helps to check:
-
Highlights links and keyboard tab stops
Bookmarklet:
Links & tab-stops v2.0 - Solid green outlines - A valid link. Check the link text makes sense and you're good to go.
- Dotted red outlines - An invalid link, a tabindexed element, or both. Requires remediation.
Becomes a dashed blue outline upon keyboard focus.
Helps to check:
-
Text spacing
Bookmarklet:
Text spacing check v2.0 Check increased text spacing is available without cropping.
Upon clicking, the text is spaced out to meet the maximum recommended. Ensure text doesn't appear cropped.
Helps to check:
Version and security
The bookmarklets presented here are self contained, and do not reference any external resources, which means they're safe to use where security restrictions are tight.
All versions may contain some obscure minor bugs. For any issues encountered please email Mike Foskett for support.
The documentation could probably of been written better (a bit rushed). So anything unclear please contact me to elaborate, and I'll update the descriptions too.