Accessibility statement (WCAG 2.1 AA)
Guidely aims for the guides, checklists, surveys, resource center and messenger it shows inside your product to conform to the Web Content Accessibility Guidelines (WCAG) 2.1, level AA. This page describes how the web runtime (@guidelytech/guide-runtime, used by every web SDK and the script tag) meets that, what depends on your content, and the known limitations. The mobile SDKs follow the same rules with the platform's accessibility APIs (VoiceOver, TalkBack).
What the runtime does
| WCAG 2.1 criterion | How |
|---|---|
| 1.1.1 Non-text content | Step images use the step's image description as alt; an empty description marks the image decorative. Icons are aria-hidden. |
| 1.3.1 Info and relationships | Modals and anchored cards are role="dialog" labelled by their title (aria-labelledby) and described by their body; untitled cards are labelled "Step 2 of 4". Banners are labelled regions; hotspots are buttons with aria-expanded / aria-controls; FAQ answers are linked with aria-controls. Progress text is announced as "Step x of y". |
| 1.4.3 / 1.4.11 Contrast | Button labels, banners and badges on your primary colour automatically use white or near-black text, whichever passes. The editor and validation warn when text/background (4.5:1) or link/background (3:1) contrast is below AA. |
| 1.4.10 Reflow / 1.4.4 Resize text | Cards size to min(width, 100vw − 32px) and scroll inside; text uses relative sizes. |
| 2.1.1 Keyboard | Everything is reachable with Tab; Escape closes a step (when it can be closed); → / ← trigger the step's Next/Done and Back buttons (not while typing in a field); hotspots open with Enter/Space. |
| 2.1.2 No keyboard trap | Modal dialogs keep focus inside while open (as dialogs should) and release it when they close. |
| 2.3.3 / 2.2.2 Motion | Fade/slide animations and the hotspot pulse are removed with prefers-reduced-motion: reduce (or the guide's "no animation" setting). |
| 2.4.3 Focus order / 2.4.7 Focus visible | Opening a step moves focus to its primary button; closing the guide returns focus to the element the visitor was on. All controls show a visible focus ring; Windows high-contrast (forced colours) keeps borders. |
| 3.1.2 Language of parts | Guides render in the visitor's language when translated (see authoring.md). |
| 4.1.2 Name, role, value | Native <button>s with accessible names ("Close", "Show me: …"); the resource-center launcher announces unread "What's new" items. |
| 4.1.3 Status messages | A polite live region announces each new step ("Title. Step 2 of 4"). |
What depends on you
- Write meaningful image descriptions (or leave them empty for decorative images), link text and button labels.
- Choose colours that pass the editor's contrast check; custom CSS can override the defaults.
- Custom HTML steps and code blocks are yours: Guidely sanitizes them but can't make them accessible.
- Anchored tooltips point at elements of your app; make sure those elements are themselves accessible.
Known limitations
- Videos embedded in help articles rely on the provider's player (YouTube, Vimeo, Loom, Wistia) for captions and controls.
- PDF pages in help articles are images; link the original PDF (the reader does) for screen-reader users.
Report accessibility issues to support; we treat them as bugs.