Skip to content

Accessibility Guidelines

Introduction

Designing accessible emails and forms helps everyone by making content easier to read, navigate, and understand. This includes using clear layouts, alternative text for images, and strong color contrast. Lime Marketing has built-in accessibility-friendly defaults, but customers are responsible for making sure content complies with the European Accessibility Act and other guidelines. This guide will help you create accessible, inclusive emails and forms in Lime Marketing.

General Best Practices

Add ARIA Labels

ARIA (Accessible Rich Internet Applications) labels provide invisible, descriptive text for screen readers. It helps users who rely on assistive technology understand the purpose of elements on a page or in an email, like buttons, icons, or links.

For example, adding an aria-label to a button can clarify its function, such as "Close menu" or "Submit form". If you're adding a link in Lime Marketing, you can define the aria-label directly in the modal where you paste the link. To support accessibility by default, Lime Marketing automatically adds an aria-label to links where one hasn’t been defined.

Example:

<a href="https://www.lime-technologies.com/" aria-label="Link to the Lime Technologies Homepage">Homepage</a>

Add Alternative Text to Images

Include alternative text (alt attribute) for images to describe their purpose or content. This ensures that screen readers and other assistive technology can accurately read the content.

In Lime Marketing, you can set alternative text directly in the content block editor or in the HTML editor view. To support accessibility by default, Lime Marketing will automatically generate alt text using the image file name if none is provided. For example, an image URL like http://lime.tech/lime_new_logo.gif would result in: alt="lime new logo".Use meaningful filenames (e.g., company_logo.png) to help generate useful default alt text Decorative images should have an empty alt attribute (alt="") so they’re skipped by screen readers. Never rely solely on an image to convey critical information. Always provide a text alternative.

Example: 

<img src="https://www.lime-technologies.se/wp-content/uploads/2020/05/Logo-top.png"alt="Limes logo image" />

Use Descriptive Link Text

Clear, descriptive links help all users, especially those using screen readers, understand where each link goes.

Avoid vague link text like “Click here”. Instead, use descriptive text like “Read more about event details”.
Don’t reuse identical link text for different links.

Include the Doctype

Including a <!DOCTYPE> declaration at the beginning of your HTML ensures that the document is rendered consistently across different browsers. It also helps screen readers and other assistive technologies interpret the structure of your content correctly. In Lime Marketing, all default HTML content includes <!DOCTYPE html> to support accessibility. Example: HTML5 doctype declaration <!DOCTYPE html>

Group Form Inputs with Fieldsets and Legends

When forms are easy to understand, people are more likely to complete them, especially those using screen readers or other assistive tools. HTML <fieldset> and <legend> elements help group related inputs in a way that clearly communicates structure and intent.

A <fieldset> acts as a container for a related group of form fields. A <legend> serves as the heading or label for that group, helping users understand what the section is about. Lime Marketing’s default checkbox and radio button elements include fieldsets and legends automatically to support accessibility. When manually adding grouped inputs in HTML, it’s strongly recommended to include a <fieldset> and <legend> to maintain accessibility and usability. Example: 

<fieldset>
<legend>RSVP</legend>
(Grouped form inputs go here)
</fieldset>

Use Clear Headings and Structure

Use headings (<h1> to <h6>) in logical order to make your content easy to navigate—especially for users using assistive technologies.

Start with a single <h1> for the main title of the page or email.
Use <h2>, <h3>, etc. for sub-sections—don’t skip heading levels.

Ensure Sufficient Color Contrast

Color contrast is a simple, yet powerful way to make your email content more accessible and easier to read for everyone.

Make sure there is enough contrast between text, buttons, images, and background color to ensure readability.

Avoid relying on color to convey meaning - remember that some users may not perceive certain color differences. A good rule of thumb: use dark text on a light background or light text on a dark background.

Label Form Inputs Clearly

Labels make it easier for users to understand what each form field is for - for example, indicating where to enter a name of email address. Clear labeling improves accessibility, especially for users with screen readers.

In Lime Marketing, input fields can be labeled by setting a header, which acts as the label for the field. For checkboxes and radio buttons, the label is defined by the text added in the "Text" field of the settings panel. If you're marking required fields with an asterisk (*), be sure to explain it clearly in text as well.

Use Landmarks

A landmark in HTML helps mark important sections of a page, such the header, main content, navigation, or footer. Landmarks create a clear page hierarchy that improves navigation. Using landmarks correctly makes it easier for all users to understand and move through your content. For a full list of landmark elements, refer to the W3C guidelines. Example: 

<header></header>
<main></main>

Set the Language

The lang attribute tells screen readers which language to use. In Lime Marketing, default content includes a language declaration: <html lang="en">. Example: You can adjust this to match your needs: 

<html lang="sv"> <!-- Swedish -->
<html lang="fi"> <!-- Finnish -->
<html lang="no"> <!-- Norwegian -->
<html lang="dk"> <!-- Danish -->

Add a Clear Page Title

Page titles help users understand what a page is about and make navigation easier. In Lime Marketing, if you don’t set a title, we’ll automatically use the name of the event, survey, or webpage. Example:

<title>The event signup page</title>

Make Emails Zoom-Friendly

Users with low vision often need to zoom in without losing any content. WCAG recommends supporting at least 2× zoom—ideally up to 5×. Example: Lime Marketing includes a default viewport setting that allows this: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

Check Your Content for Accessibility

The Web Content Accessibility Guidelines (WCAG) are a collection of guidelines developed by the World Wide Web Consortium (W3C). Use the following tool to check if your email complies with WCAG: https://wave.webaim.org/

Unsure if your color contrast is sufficient? Use a tool like WebAIM Contrast Checker.

Summary

Designing for accessibility is important for everyone. These small changes can significantly improve the usability of your digital communications. Lime Marketing takes care of many technical settings so you can focus on creating clear, inclusive content. By following the tips in this guide, you’ll make your communications more effective and more welcoming to everyone.