What the guidelines ask of an animated signature
The Web Content Accessibility Guidelines (WCAG) are written for web pages, and an HTML email is a small web page. Two of their criteria are about motion, and both are at Level A, the first of WCAG's three levels.
2.2.2 Pause, Stop, Hide. Anything that moves, blinks or scrolls, starts by itself, lasts more than five seconds and sits beside other content needs a way to pause, stop or hide it. The W3C chose five seconds as long enough to catch someone's attention and short enough for them to wait it out.
2.3.1 Three Flashes or Below Threshold. Nothing may flash more than three times in any one second, unless the flashing is small or faint enough to fall below thresholds the W3C defines. A flash is a pair of opposite changes in brightness: lighter then darker, or darker then lighter. This is the more serious of the two, because flashing can cause seizures.
The rest of what makes a signature accessible is not about motion at all: images with alt text, details written as text, and tables that a screen reader reads as layout.
Motion that does not stop
An animated GIF carries its own loop count, and a count of zero means for ever. On a web page, motion like that is made acceptable with a pause button. An email cannot have one: mail clients remove scripts, and nothing in a message can stop a GIF once it is playing.
What an email can do is stop by itself. The W3C's own technique for GIFs, G152, is to set the loop count so the animation ends within five seconds. If you do that, make the last frame the finished picture as well as the first, because a GIF that stops, stops on its last frame.
Animated Signature's GIFs loop for ever. The photo holds still for 1.5 seconds, moves for 0.64, and starts again for as long as the email is open; the social icons loop every 3.2 seconds or so. A signature made with it today does not meet 2.2.2 in a mail client that plays GIFs. Some readers never see the motion: Outlook on Windows shows only the first frame when animation effects are switched off in Windows, and the first frame of everything the product renders is the finished picture, so what they see is complete.
Flashing
WCAG counts a flash when brightness changes by a tenth of its full range and back, with the darker state below 0.8 on a scale where white is 1. A flash is let through if it covers less than a quarter of a 341 by 256 pixel area on a 1024 by 768 screen, which stands for ten degrees of a reader's view.
A signature's photo is small, but it can be larger than that quarter, so we measured the motions rather than lean on their size. Each one was run over a real photograph and every pixel followed frame by frame: no pixel brightens and darkens, or darkens and brightens, more than once in a loop, and all of a loop's change happens inside its 0.64-second sweep. That is at most one flash a second.
The optional banner under a signature has motions of its own, and one of them, Attention, shakes the banner six times in about a third of a second. If you would rather nothing in your signature moved quickly, give the banner another motion or None.
Alt text
Alt text is what a screen reader reads in place of an image, and what a mail client that blocks images draws in its place. WCAG asks for it under 1.1.1, Non-text Content. For a signature, it comes down to four kinds of image:
| Image | Alt text |
|---|---|
| Your photo | Your name. A listener hears whose face it is, and with images blocked your name stands where the photo was. |
| Your logo | Your company's name. If the logo is a link, that is the link's name too. |
| A social icon that is a link | The network's name. An image that is all a link holds names the link, and the W3C's advice is to describe where it goes. Left empty, a screen reader reads out the address behind it. |
| Decoration | Empty (alt=""), so it is skipped: a divider, a glow, a small glyph beside text that says the same thing. |
Social icons have a catch. With images blocked, a network's name drawn in place of a 15-pixel icon is wider than the icon, and in a card built to an exact size it pushes the layout apart: named that way, seven of our designs grew when we hid their images. So our icons keep an empty alt, and the link around each carries the network's name in anaria-label, which a screen reader reads as "LinkedIn, link". Gmail, Apple Mail and Outlook keep that attribute, apart from the retired Windows Mail app. Yahoo, AOL and some smaller mail services remove it, according to Can I email, and there the icon links have no name.
Real text, read in order
A signature drawn as one picture is a single image to a screen reader, and nothing at all when images are blocked. Written as text, your name, title, company, phone number and email address are read aloud, can be copied, and are there whether images load or not.
Email signatures are laid out with tables, nested several deep, because mail clients do not draw modern page layout reliably. A screen reader can announce a table's rows and columns before it reads a word, so each table should say it is only layout, with role="presentation". That role covers a table's own rows and cells but not a table nested inside one, so every table needs it. Gmail, Apple Mail, Outlook (the Windows Mail app apart), Yahoo and AOL keep it on a table.
A screen reader still reads a layout table cell by cell, left to right and top to bottom, so the order of the cells is the order a listener hears.
How to check your own signature
- Block images and look. Most mail apps can stop loading images. Turn it on and open an email you sent yourself: your name and company should stand where the photo and logo were.
- Listen to it. Turn on VoiceOver on a Mac (Command-F5) or Narrator on Windows (Windows-Ctrl-Enter) and have it read the email. You should hear your details, not table rows or web addresses.
- Time it. Watch your signature for five seconds. If it is still moving, it does not meet 2.2.2.
What Animated Signature does
- In all twelve designs, the photo's alt text is your name and the logo's is your company's name.
- Each social icon's link carries its network's name, the same name the builder shows.
- Every table in a signature, the banner's included, is marked
role="presentation". - Your name, title, company and contact details are text in every design.
- An uploaded banner's alt text is its headline, and an animated banner's is its button label. With campaigns switched on, the banner's place is filled when the email is opened, so that image carries no alt text.
- The first frame of every animation is the finished picture.
- The photo and icons loop for as long as the email is open, and the builder has no switch to stop them.
A test in the product fails any design whose photo or logo has no alt text, whose links have no name, or whose tables are not marked as layout.