Accessibility

Built-in accessibility

• Keyboard support everywhere. Accordions, tabs (arrow keys, Home, End), content toggles, carousels, the before/after slider, lightboxes, the mini cart drawer and live search results all work without a mouse.
• Standard patterns. Tabs follow the WAI-ARIA tabs pattern; accordions use native <details>; lightboxes and the cart drawer are modal dialogs that keep focus inside, close with Esc and return focus to where you were.
• Screen-reader text. Counters and statistics are read once as their final value; charts include a hidden data table; progress bars and rings are announced with their values; icon-only buttons have labels; links that open a new tab say so.
• Visible focus. Interactive parts have a clear focus ring, which you can restyle in the Focus state (Focus indicator).
• Reduced motion. Count-ups, chart and progress animations, carousel autoplay and flip effects are reduced or skipped for visitors who ask their device for less motion.
• Colour contrast. The built-in Donix colour combinations meet WCAG AA contrast.
• Decorative graphics are hidden from assistive technology (icons, separators, markers).

Your part: a checklist

• Alternative text: describe meaningful images (Image, Image Box, Gallery, Before / After). Leave it empty only for decorative images.
• Headings in order: one H1 per page, then H2, H3… Use the Title tag / heading level settings to keep the order; change the visual size separately.
• Meaningful link text: “Download the brochure” rather than “Click here”. Give linked icons an Accessible label.
• Contrast: when you change colours in the Styles tab, keep at least 4.5 : 1 for normal text and 3 : 1 for large text. Add an overlay to images behind text.
• Don’t rely on colour alone to convey meaning.
• Keep the focus ring visible — if you restyle it, make it at least 2px and clearly different from the background.
• Visual order = reading order: avoid “Reverse” directions and Flex item Order for important content.
• Motion: avoid autoplay for carousels and videos with important content; keep video controls on.
• Accessible titles for videos and maps; captions inside your videos.
• Test your pages with only the keyboard (Tab, Shift+Tab, Enter, Space, arrows).

Each block guide has an Accessibility section with block-specific details.