Dostępny projekt e-maila: co sprawdzić przed wysyłką

Accessible email design means your message still makes sense when a screen reader reads it out loud, when images are switched off and when the reader can’t tell certain colours apart. Simple idea. Have you ever actually listened to your own newsletter through a screen reader, or opened it with images blocked? If not, you’ve probably missed something (most of us have). Below are five checks: structure, alt text, contrast, link text and the plain text part.

What does accessible email design mean for an image-heavy newsletter?

For an image-heavy newsletter, it means the important stuff isn’t locked inside pictures. Put the offer, the headline or the button in an image and some readers get an empty message. A screen reader has nothing to announce. A client that blocks images shows grey boxes, and that’s it. Then there’s the legal side. The European Accessibility Act may apply to some businesses and services, so ask your own legal adviser whether it covers yours.

Structure: build an order a screen reader can follow

A screen reader follows the order of the code, so your HTML has to run in the same order people are meant to read. Use real text headings, nested logically, not headings made from images or big bold text. Layout tables get role=”presentation”, otherwise assistive software reads out every row and cell (painful to sit through). And set the lang attribute so the right pronunciation is used.

Keep copy as live, left-aligned text. Short paragraphs, single-column blocks. The same layout helps you build emails that work on mobile, where narrow screens break complex grids anyway. Two birds, one stone.

Alt text in emails: what to write for each image

Alt text stands in for an image for screen reader users and for anyone with images off, so it should say what the image does in the message, not just what it shows. What you write depends on the type of image:. Podobnie działa preheader wyświetlany po temacie, który w skrzynce odbiorczej też musi mówić, po co jest wiadomość, a nie tylko ją ozdabiać.

• Informative images: describe the content briefly and in context. Never the file name, never a pile of keywords.
• Decorative images such as spacers, dividers and ornaments: use an empty alt=”” so screen readers skip them.
• Images with text: move the headline, the offer and key dates into live HTML. If some text really has to stay in the image, repeat it in the alt text.
• Linked images and banners: say where the link goes, not what the picture looks like.

Then test with images off. Block them, open the email and ask yourself: does the message still land, and is the main action still obvious?

Color contrast in email: readable in light and dark mode

Text has to stand out clearly from its background, and colour should never be the only thing carrying meaning. Run every text and background pair through a contrast checker. Yes, every one, including text on background images and on buttons. Some email clients invert colours in dark mode, so check logos, transparent PNGs and that pale grey text there as well.

Underline links. Label sale prices and error states with words, not just red or green. Pick a body font size people can read without squinting, and skip thin typefaces and long stretches in capitals.

Link text and buttons that make sense out of context

Screen reader users often jump from link to link, so each link and button has to say where it leads without any help from the text around it. „Click here” and „more” tell them nothing. Swap them for a specific action, like „Download the spring catalogue”. Build buttons from HTML and CSS (people call these bulletproof buttons) so they still show up with images off. Make them big enough to tap, leave some breathing room between neighbouring links, and don’t give several links the same text if they go to different places.

Do you still need a plain text version of your email?

Yes. The plain text part, the text/plain part of a multipart message, is the fallback for clients and readers that can’t handle HTML, and it helps show the message is legitimate. Write it on purpose. An automatic copy usually comes with leftover code, long tracking URLs and no clear order. Include the main message, the key links written out in full and your sender details.

The text-to-image balance matters for delivery too. A message that’s mostly pictures is as hard for spam filters to read as it is for people, so read up on image-heavy emails and spam before your next campaign.

Email accessibility checklist before you hit send

A short routine before sending catches most problems in a few minutes. Run through it for every campaign:

1. The subject line and preheader make sense on their own.
2. Headings are in a logical order and the reading order matches the layout.
3. Every image has alt text, and decorative images have an empty alt.
4. Contrast holds up in both light and dark mode.
5. Link and button text describes the destination.
6. The images-off preview still delivers the message.
7. The plain text part is clean and complete.
8. You have listened to the email with a screen reader, such as VoiceOver on Mac or iPhone or NVDA on Windows.

Want to see how the layout holds up on different screens? MailCraft’s responsive templates and live preview let you check before sending. Once a layout passes, save it as a reusable template so the fixes stick. There are more ideas in our articles on email templates and design.

My advice: run this checklist on your very next newsletter and save every fix in your template. Do that and accessible email design becomes the default for every send, not a last-minute patch.

FAQ