You can make a Spotler Activate personalization more accessible by starting with a supported default template, using clear content, checking colors and contrast, and reviewing keyboard navigation, focus visibility, forms, images, custom code, and zoom behavior before publishing.
You can make a Spotler Activate personalization more accessible by using a supported default template and by checking your own changes before publishing. Spotler Activate provides an accessibility-focused foundation for new personalizations that use the latest supported Venice or Sydney template variants, while your own content, styling, code, and page context can still affect the final accessibility result.
On this page, the following topics are covered:
Quick accessibility checklist
Use this checklist when you create, update, or review a Spotler Activate personalization. Start with the personalization setup and content choices first. Then use testing tools and manual checks to confirm whether the personalization remains accessible.
- Use a supported default Spotler Activate template variant where possible.
- Use the latest version of a supported default template when you create a new personalization.
- Check your content, buttons, labels, and error messages.
- Check colors and contrast after changing text, button, background, border, or focus colors.
- Test keyboard navigation and visible focus.
- Verify form fields, labels, validation, and error messages if forms are used.
- Add alternative text for images that communicate meaning.
- Review custom HTML, CSS, and JavaScript separately.
- Test high zoom and narrow viewport behavior.
- Use WAVE or a similar accessibility testing tool as an extra check.
Use testing tools after you set up the personalization
First create or update the personalization with a supported default template, clear content, and accessible styling choices. Then use tools such as WAVE and a color contrast checker to find common issues, and use manual checks for keyboard navigation, focus behavior, form behavior, dialog behavior, and zoom behavior.
More information about each check
Use a supported default template where possible
Use a supported default Spotler Activate template variant when you create a new personalization. Supported default templates give your personalization the strongest accessibility foundation available in Spotler Activate.
The accessibility support applies to these supported template types in the Venice and Sydney variants:
- Feedback forms.
- Toasters.
- Notification bars.
- Overlays.
- Product recommendation blocks.
- Product sliders.
If you use a custom template, custom styling, or an older personalization, review the personalization separately because it is not automatically covered by the accessibility support in the latest supported default templates.
Check your content, buttons, labels, and error messages
Your own text affects how understandable the personalization is. Visitors should understand what the personalization asks them to do and what happens when they interact with it.
- Check whether the main message explains the purpose of the personalization.
- Use button text that describes the action, such as Subscribe, Continue, or Close.
- Check whether form labels explain the information you ask for.
- Check whether error messages explain what went wrong and how to correct it.
- Make sure essential information is available as text and not only as an image.
Check colors and contrast after every color change
Spotler Activate supports contrast for default template elements, such as buttons, form input borders, focus indicators, and interface boundaries, when you use the latest supported default template variant.
If you change colors yourself, check the contrast again. Custom colors can affect whether text, buttons, form fields, focus indicators, and other interface elements remain accessible.
- Check the contrast between text and background colors.
- Check the contrast between button text and button background colors.
- Check whether form input borders remain visible.
- Check whether focus indicators remain clearly visible.
- Do not communicate errors, status messages, or required actions by color alone.
- Use the Spotler color contrast checker to check text and background color combinations.
Custom colors can change the result
A default button can start with accessible contrast in a supported template. If you change the button to a light background color with white text, the button may no longer have enough contrast. Check contrast again after changing text, button, background, border, or focus colors.
Test keyboard navigation and visible focus
Keyboard navigation allows visitors to use a personalization without a mouse. Visible focus shows which element is active while someone navigates with a keyboard.
- Check whether you can reach every interactive element with the keyboard.
- Check whether you can activate buttons, links, slider controls, and form fields with the keyboard.
- Check whether you can close overlays, dialogs, toasters, and notification bars without using a mouse.
- Check whether focus remains visible on buttons, links, form fields, close controls, slider controls, cards, and dialogs.
- Check whether focus moves in a predictable way when a dialog opens or closes.
If custom JavaScript changes opening, closing, focus, slider, or form behavior, repeat the keyboard and focus checks after every change.
Check forms and error messages
Spotler Activate supports accessible form behavior in supported feedback form templates. If you change labels, required fields, validation text, confirmation messages, or form content, check whether the form still gives clear instructions and errors.
- Check whether every form field has a clear label.
- Check whether required information is explained clearly.
- Submit the form with missing or invalid information.
- Check whether invalid fields are identified clearly.
- Check whether error messages explain what needs to be corrected.
- Check whether errors are communicated with text and not by color alone.
- Check whether focus and keyboard navigation still work after an error appears.
Check images and alternative text
If your personalization contains images, check whether each image communicates information. Add alternative text when the image adds meaning.
- Add meaningful alternative text for images that communicate information.
- Keep alternative text short and specific.
- Do not use a filename as alternative text.
- Do not rely on an image alone for essential information.
- Leave decorative images empty only when the image adds no meaning.
Review custom HTML, CSS, and JavaScript separately
Custom HTML, CSS, and JavaScript can override or bypass the accessibility support in supported default templates. Spotler Activate cannot automatically validate every custom implementation, so custom code should always be checked separately in the browser.
- Custom HTML can affect headings, labels, structure, buttons, links, forms, and screen reader support.
- Custom CSS can affect contrast, visible focus, spacing, layout, reflow, readability, and high zoom behavior.
- Custom JavaScript can affect keyboard navigation, focus handling, dialog behavior, close actions, form validation, and slider controls.
After adding or changing custom code, retest the full personalization for keyboard navigation, focus visibility, contrast, form behavior, dialog behavior, and high zoom behavior.
For more detailed guidance about custom code, see Can I use custom HTML, CSS, or JavaScript and still support accessibility?.
Test high zoom and narrow viewports
High zoom and narrow viewport testing helps you check whether the personalization remains readable and usable when less space is available. Spotler Activate supports reflow and responsive behavior for supported default template variants, but your own content, layout, styling, and code can still affect the result.
- Zoom the browser to 400%.
- Check whether all important content remains visible.
- Check whether text, buttons, forms, and close controls remain usable.
- Check whether content is not cut off or hidden.
- Check whether the personalization remains usable on a narrow viewport.
If content becomes hidden, overlaps, or cannot be used, review the layout, content length, styling, and custom code.
Use WAVE or a similar tool as an extra check
Use WAVE or a similar accessibility testing tool on the page where the Spotler Activate personalization is shown. Testing the page itself is important because the personalization, website styling, page structure, and custom code can all affect the final accessibility result.
- Open the page where the personalization is shown.
- Run the WAVE browser extension or a similar accessibility testing tool.
- Review issues related to contrast, labels, missing alternative text, and structure.
- Check whether the issue is caused by the personalization, the page, or custom code.
- Adjust the personalization where needed and run the check again.
A successful automated scan does not confirm full WCAG compliance. Use manual checks to review interaction, focus, forms, custom code, and zoom behavior.
What is the result?
After completing the quick checklist and the relevant detailed checks, your Spotler Activate personalization has a stronger accessibility foundation and a lower risk of issues caused by custom content, styling, or code. The personalization should be easier to navigate with a keyboard, clearer to read, more predictable to interact with, and more usable at high zoom levels and on smaller screens.
Accessibility depends on the complete implementation. Use this article whenever you create a new personalization, update an existing personalization, change colors, edit content, add custom styling, or add custom HTML, CSS, or JavaScript.
FAQ
Do I need to check accessibility if I use a default Spotler Activate template?
Yes. Supported default templates provide an accessibility-focused foundation, but your own content, colors, styling, images, settings, and page context can still affect accessibility.
Should I start with WAVE or with my personalization setup?
Start with your personalization setup. Use a supported default template where possible, add clear content, and check your colors, styling, and behavior. Then use WAVE or a similar accessibility testing tool as an extra check for common issues.
Can I make an older personalization accessible by changing one setting?
No. Older personalizations should be reviewed separately. To use the accessibility support in the latest supported default templates, create a new personalization with a supported default template variant or use the available migration approach when it applies.
Can I use custom HTML, CSS, or JavaScript?
Yes. You can use custom HTML, CSS, or JavaScript, but custom code should be reviewed separately because it can affect keyboard navigation, focus handling, structure, contrast, forms, dialogs, and responsive behavior.