Usability and comfort
Scalability and expansion
Text must be able to be enlarged up to 200% without losing content or functionality. The goal is to enable users with low visual acuity to display text at a readable size without compromising the usability of the page.
Furthermore, web content must be designed to adapt to different screen sizes and zoom up to 400% without requiring horizontal scrolling to view the entire content. This ensures that users who, for example, enlarge their screen or use mobile devices with smaller screens can still consume the content without problems.
If you are working with custom HTML, ensure that the scaling function is not blocked in the viewport HTML element.
Example of correct application:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Example of incorrect application:
<meta name="viewport" content="width=device-width, user-scalable=0">
<meta name="viewport" content="width=device-width, user-scalable=no">Keyboard usability
Interactive elements in HTML documents, such as links, input fields, and buttons, must be keyboard-friendly and mouse-free, as this is essential for users with motor disabilities, visual impairments, or when using screen readers. The Design Editor in Optimizely Campaign ensures these elements are keyboard-friendly by default by generating clean HTML and providing interactive elements such as buttons and links with a clear tab order and visible focus indicators. Keyboard navigation is possible using the Tab key to scroll through and the Enter or Spacebar to activate.
When working with custom HTML, ensure you do not use any of the following elements in your HTML code:
- No "onmouse” events such as onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onmouseenter, onmouseleave
- No onclick events such as onclick, onblclick
- No oncontextmenu event
No keyboard trap
Every interactive element (link, input field, button, etc.) must be selectable using the keyboard. If the keyboard focus can be moved to an element using a keyboard interface, it must also be possible to move the focus away from that element using a keyboard interface alone. People with motor impairments or blindness rely on keyboard operability and would otherwise not be able to use the service.
Note
Open your HTML document in the browser and use the tab key to check whether all links and form elements can be reached and exited again.
Accessible mobile version
Touch-optimized controls are essential for mobile accessibility: They must be appropriately sized and spaced to enable precise input and reduce typing errors. Scalable images and sufficiently sized, well-spaced buttons and links help simplify interaction and ensure a more accessible mobile experience overall. Clear and consistent navigation through content is essential, as are clear visual cues (focus indicators) for users using alternative input methods.
A responsive design is essential; it adapts to different screen sizes and orientations and avoids horizontal scrolling, while text must be scalable. Screen orientation should also not be forced. The Design Editor in Optimizely Campaign ensures that all email designs are fully responsive and automatically adapt to different devices (desktop, tablet, smartphone) to provide a seamless and accessible user experience.
Note
To ensure optimal accessibility, extensive testing with various devices and email clients is necessary. Images, graphics, buttons, or links may need to be adjusted to ensure correct display on all devices.
Important
Responsive design: Responsive design is a web design approach in which the design and layout of a website dynamically adapt to the screen size and capabilities of the device in use (desktop, tablet, smartphone, etc.). This is typically achieved through flexible layouts, proportional images, and the use of media queries in CSS.
Accessible dark mode
When using dark mode, it's important to ensure sufficient contrast between text and background, avoiding pure black (#000000) and pure white (#FFFFFF). Instead, we recommend using desaturated, toned-down colors and a combination of dark and light gray tones. For good legibility, text must be designed with an appropriate font weight and size. Focus indicators must be clearly visible, just as in standard mode. Users should also be able to choose between standard and dark mode.
Note
To ensure optimal accessibility, extensive testing with different devices and email clients is necessary. Text and background colors may need to be adjusted to achieve appropriate contrast in standard and dark modes.