Accessibility and Testing

View as Markdown

What Envoke handles for accessibility and what is left to you, followed by the checks to run before a template or message is used for a real send.

Accessibility

Topic	What Envoke does	What you do
Language	The drag-and-drop editor writes `lang="en"` on the `<html>` tag on every save, and Envoke changes it to `lang="fr"` when a French message is sent.	Set the message’s language in Envoke (for example the Messages API’s `language` field), not in the HTML.
Layout tables	When a message is opened in the drag-and-drop editor, layout tables get `role="presentation"`, so screen readers do not announce them as data tables, and the wrapper `<div>` gets `role="article"` and `aria-roledescription="email"`.	In HTML that is sent without being opened in the editor, add these attributes yourself.
Images	Nothing. An image with no `alt` text that fails to load in the editor is given `BROKEN IMAGE (!)` as its alt text, which a screen reader would read out.	Give every image meaningful `alt` text, and `alt=""` to purely decorative images. Fix broken images before sending.
Headings	The editor keeps `<h1>` to `<h6>` when text is edited, but sets text sizes on `<span>` elements, so a heading’s size and level are independent.	Use headings in order, starting with one `<h1>`, and set their size with a `<span>` inside.
Colour contrast	Nothing is checked.	Choose text and background colours that meet WCAG AA: a contrast ratio of at least 4.5:1 for body text.
Links	Nothing is checked.	Use link text that makes sense on its own, such as “See the spring courses” rather than “Click here”.

Test Checklist

Before a template or message is used for a real send:

It opens in the drag-and-drop editor. If it opens in the HTML editor, the TEMPLATE_VERSION meta tag is missing or written differently (see Two Editors).
Every block can be edited. Click each block: its settings should open and offer the right options for its type (text, image, button, divider, or video). Content that cannot be clicked is outside an editable region; content whose edits do not appear shares a row with another region (see Rows and Regions).
Saving does not change the design. Save in the editor, then compare the result with your original, for example by reading the HTML back with include_html=1. The changes listed in What the Editor Adds and Changes are expected; check that no styling of yours was in a <style> block that has been removed.
It works on a phone. Preview it at desktop width and narrower than 540 pixels: columns stack, images scale, buttons fit, and nothing is wider than the screen.
Send a test. Check that the merge tags are filled in, every link goes where it should, every image loads, and the unsubscribe link opens the preferences page. Test sends do not track clicks or opens (see Test Sends).
The footer is right. Check that the email has exactly one unsubscribe link and your postal address: either your own, or Envoke’s default footer (see What Envoke Checks).
Check several mail clients, including Outlook for Windows, Gmail, Apple Mail, and a phone.
Check the size (see Size and Clipping).

Size and Clipping

Limit	Size
Templates, Messages, and Send API `html`	200 KB (204,800 bytes); larger HTML is refused
Gmail	Clips emails larger than roughly 102 KB

Gmail shows only the first part of a clipped email, with a link to view the rest. The clipped part includes the end of the email, where your footer, the unsubscribe link, and Envoke’s open-tracking image usually are, so opens of clipped emails may not be counted.

The size that matters is the HTML of the email as sent, which is larger than the HTML you wrote: Envoke adds tracking links, which are longer than most original links, the open-tracking image, and, if your HTML has no {@pref-0}, its default footer. Images are linked, not attached, so they do not count. Keep your HTML well under 100 KB, and check a received test in Gmail.

Full reference, OpenAPI description, and Postman collection: developers.envoke.com.