Accessibility & Screen Reader Support

At Sleeknote, accessibility is a core part of how we build campaigns. Our widgets are designed so visitors using assistive technologies — including screen readers such as NVDA, JAWS, and VoiceOver — can perceive, navigate, and interact with campaigns confidently and independently.

Campaign Formats Covered:

Our accessibility standards apply across all campaign types, including:

• Popups (center overlays, slide-ins, corner widgets)
• Banners (top and bottom bars)
• Embedded forms (inline on-page)
• Coupon codes
• Interactive campaigns (quizzes, spin-to-win, scratch cards)
• Product recommendations
• Calendar and door-style campaigns

Screen Reader Behavior

When a campaign appears, it is presented to assistive technologies as a dialog. This clearly communicates that a distinct, interactive region has opened.

• Modal campaigns (such as popups and slide-ins) temporarily make the rest of the page inactive to prevent confusion.
• Non-modal campaigns (such as banners and embedded forms) allow continued access to surrounding page content.
• Decorative elements — including background images, layout spacers, and purely visual flourishes — are hidden from screen readers to ensure users only hear meaningful content.

Focus Management

We implement structured focus behavior to support keyboard and screen reader users:

• On open: Focus automatically moves to the first interactive element inside the campaign.
• Focus trapping: In modal campaigns, the Tab key cycles only through elements within the campaign. Focus wraps from the last element back to the first (and vice versa with Shift + Tab).
• Shadow DOM compatibility: Campaigns are rendered inside Shadow DOM for style isolation. Our focus management traverses shadow boundaries so all interactive elements remain accessible.

Keyboard Navigation

All campaigns are fully operable by keyboard:

• Tab — Move to the next interactive element
• Shift + Tab — Move to the previous interactive element
• Escape — Close the campaign
• Enter / Space — Activate buttons, submit forms, select options
• Arrow keys — Navigate dropdown lists and autocomplete fields

Form Accessibility

We ensure forms are structured and announced correctly:

• Labels: Every form field has an associated label, so screen readers clearly announce its purpose.
• Required fields: Required inputs are announced as required when focused.
• Validation errors: Errors are announced immediately using live regions and are programmatically linked to their corresponding inputs.
• Buttons: Interactive elements use semantic <button> elements with accessible names derived from visible text.

Coupon Codes

Coupon codes are accessible to both keyboard and screen reader users:
The code itself is presented as selectable text.

A semantic Copy button allows easy copying and is fully operable via keyboard and assistive technologies.

Interactive Campaigns

Interactive elements are built with semantic markup and keyboard operability:

• Selection states use standard form controls (radio buttons, checkboxes) with associated labels.
• Dropdowns and list selections communicate the currently selected option to assistive technologies.

Hidden from Assistive Technology

To reduce noise and improve clarity, the following elements are hidden from screen readers:

• Background images and decorative overlays
• Visual spacers and layout-only elements
• Decorative SVG icons