Accessibility
WCAG 2.2 Level A and AA conformance of the QFlow Design System, in the VPAT® 2.5 layout, generated from the latest gate run.
Product information
| Item | Detail |
|---|---|
| Name of product | QFlow Design System (static reference: HTML, CSS, SVG sprite) |
| Version | 26.10.1 |
| Report date | 2026-10-22 |
| Product description | Design tokens, elements, templates and patterns for QFlow applications, published as this site. |
| Contact | accessibility@qflow.com |
| Evaluation methods | Automated gate on every page in the light and dark themes (static checks; Playwright with axe-core; run 358b316 on 2026-10-22) and per-element manual checklists approved by named people. The final determination is made manually by a certified WCAG engineer. |
| Format | VPAT® 2.5 Rev (WCAG 2.2 and Revised Section 508 editions) |
Applicable standards
| Standard | Included in report |
|---|---|
| Web Content Accessibility Guidelines 2.2, Level A | Yes |
| Web Content Accessibility Guidelines 2.2, Level AA | Yes |
| Web Content Accessibility Guidelines 2.2, Level AAA | No |
| Revised Section 508 standards (36 CFR Part 1194), which incorporate WCAG 2.0 A and AA | Yes, through the WCAG tables |
Terms. Supports: the functionality meets the criterion without known defects. Partially Supports: some functionality does not meet it. Does Not Support: the majority does not meet it. Not Applicable: the criterion is not relevant. Not Evaluated: not yet evaluated (used for criteria that need manual review).
Levels here are generated from the latest recorded gate run and are provisional until the manual evaluation confirms them.
Table 1: Success Criteria, Level A
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.1.1 Non-text Content | Partially Supports | Known findings remain on some elements; see Test status. Every glyph is an inline <svg class="qf-icon"><use> from the sprite; the static check enforces aria-hidden or a name on each. axe verifies img/svg/role=img naming. Automation cannot judge whether the alternative is equivalent. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | Not Applicable | The site ships no <audio>, <video>, <object>, <embed> or <iframe>; the guard check fails the gate if one is ever added so this entry must be revisited. |
| 1.2.2 Captions (Prerecorded) | Not Applicable | No synchronized media on the site (guarded). |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | Not Applicable | No synchronized media on the site (guarded). |
| 1.3.1 Info and Relationships | Partially Supports | Known findings remain on some elements; see Test status. axe covers list, table, heading and ARIA parent/child structure; static checks add heading nesting and label association. Whether a visual relationship exists that markup omits is a human judgment. |
| 1.3.2 Meaningful Sequence | Partially Supports | Known findings remain on some elements; see Test status. DOM order is the reading order when nothing reorders it: the static check rejects tabindex>0 and CSS order/flex-reverse/grid-area reordering; pw:focus-order confirms focus follows DOM. Meaning of the sequence itself is human. |
| 1.3.3 Sensory Characteristics | Not Evaluated | Awaiting manual evaluation. Prose instructions cannot be classified by automation. |
| 1.4.1 Use of Color | Not Evaluated | Awaiting manual evaluation. axe only covers links distinguished by color alone inside text. Whether color is the sole carrier elsewhere is a design judgment. |
| 1.4.2 Audio Control | Not Applicable | No audio on the site (guarded). |
| 2.1.1 Keyboard | Partially Supports | Known findings remain on some elements; see Test status. docs.js wires demos with click handlers only; Enter/Space on native buttons still fires click, but custom roles (tab, menuitem, treeitem, option) need explicit key handling. Playwright walks every focusable and activates it. |
| 2.1.2 No Keyboard Trap | Partially Supports | Known findings remain on some elements; see Test status. Needs a browser to Tab through the full page and out again. |
| 2.1.4 Character Key Shortcuts | Supports | Checks for accesskey attributes and document/window keydown handlers on single printable keys. None exist; the check keeps it that way. |
| 2.2.1 Timing Adjustable | Supports | No page-level time limits. The demo toast removes itself after 5 s, which is a content time limit without a turn-off; static:auto-dismiss-timeouts lists setTimeout/setInterval calls that remove or replace content so they are reviewed. |
| 2.2.2 Pause, Stop, Hide | Supports | static:animation-finite flags animation-iteration-count:infinite outside a reduced-motion guard. Whether a given specimen is essential is a human call. |
| 2.3.1 Three Flashes or Below Threshold | Supports | Parses @keyframes and durations for opacity/visibility/background toggles above 3 Hz. Video flashes are impossible (no media). |
| 2.4.1 Bypass Blocks | Partially Supports | Known findings remain on some elements; see Test status. Every page has one <main> and labeled <nav> landmarks; that is a sufficient bypass mechanism (ARIA11). No skip link exists; the check passes on landmarks and would also accept a skip link. |
| 2.4.2 Page Titled | Supports | Checks the title is non-empty, unique across the five pages and includes the site name. |
| 2.4.3 Focus Order | Supports | DOM order plus no positive tabindex gives a predictable order; the browser walk verifies it including dynamically opened content. |
| 2.4.4 Link Purpose (In Context) | Supports | axe requires an accessible name; the static check rejects generic names (here, more, click). Purpose is a human judgment. |
| 2.5.1 Pointer Gestures | Not Applicable | No touch/pointer multipoint or path handlers in docs.js (guarded). |
| 2.5.2 Pointer Cancellation | Partially Supports | Known findings remain on some elements; see Test status. All demo behavior is on click (up-event). The check fails on mousedown/pointerdown/touchstart handlers. |
| 2.5.3 Label in Name | Supports | axe compares visible text with the accessible name for named controls. |
| 2.5.4 Motion Actuation | Not Applicable | No devicemotion/deviceorientation listeners (guarded). |
| 3.1.1 Language of Page | Supports | All five pages carry <html lang="en">; the check enforces it. |
| 3.2.1 On Focus | Supports | Tabs through every focusable and asserts URL, open dialogs and document root are unchanged. |
| 3.2.2 On Input | Supports | Toggles every checkbox, radio and select and asserts no navigation or new window; forms use onsubmit="return false". |
| 3.2.6 Consistent Help | Supports | The site has no help mechanism (contact, chat, FAQ). The check passes vacuously and compares the relative order of any mailto:, tel: or help links if they are added. |
| 3.3.1 Error Identification | Supports | Demo fields with aria-invalid="true" must reference a visible error message through aria-describedby or aria-errormessage; no live validation runs. |
| 3.3.2 Labels or Instructions | Supports | Several specimens use placeholder as the only cue; the static check requires a label, aria-label or aria-labelledby. |
| 3.3.7 Redundant Entry | Not Applicable | No multi-step process; nothing is submitted or carried between pages (guarded). |
| 4.1.2 Name, Role, Value | Partially Supports | Known findings remain on some elements; see Test status. axe validates roles, names and attributes in the DOM as loaded. pw:aria-state-sync activates each demo and asserts aria-selected/pressed/expanded/current change accordingly. |
Table 2: Success Criteria, Level AA
| Criteria | Conformance Level | Remarks and Explanations |
|---|---|---|
| 1.2.4 Captions (Live) | Not Applicable | No live media on the site (guarded). |
| 1.2.5 Audio Description (Prerecorded) | Not Applicable | No synchronized media on the site (guarded). |
| 1.3.4 Orientation | Supports | Both checks look for CSS that locks or transforms content to one orientation. The site has no orientation media queries; the checks keep it that way. |
| 1.3.5 Identify Input Purpose | Partially Supports | Known findings remain on some elements; see Test status. Composites show name/email/tel inputs without autocomplete. The static check flags inputs whose type, placeholder or label imply a personal purpose but lack autocomplete; axe validates the token values. |
| 1.4.3 Contrast (Minimum) | Partially Supports | Known findings remain on some elements; see Test status. axe measures rendered contrast; pw:axe-per-theme repeats it under data-theme=dark. static:token-contrast-text computes ink/surface token pairs from tokens.css so a bad token fails before render. |
| 1.4.4 Resize Text | Partially Supports | Known findings remain on some elements; see Test status. Needs a browser to zoom and detect clipping/overflow. Static check guards the viewport meta against user-scalable=no or maximum-scale<2. |
| 1.4.5 Images of Text | Supports | The only <img> is a decorative data: avatar with alt="" and the only CSS url() image is an icon mask; both are recorded as notes. The check fails on any image whose alt or file name suggests text, on <picture>, SVG <image> or inline SVG <text>. |
| 1.4.10 Reflow | Partially Supports | Known findings remain on some elements; see Test status. Requires rendering at a 320 CSS px viewport and detecting horizontal scroll or clipped content. |
| 1.4.11 Non-text Contrast | Partially Supports | Known findings remain on some elements; see Test status. axe has no non-text contrast rule. static:token-contrast-ui checks border/ring/icon tokens against surface tokens; pw:focus-ring-contrast samples the rendered focus indicator. Graphic parts needed for understanding remain a human check. |
| 1.4.12 Text Spacing | Partially Supports | Known findings remain on some elements; see Test status. Needs the WCAG spacing stylesheet injected in a browser and overflow measured. axe only flags inline !important spacing. |
| 1.4.13 Content on Hover or Focus | Supports | Tooltips appear via .qf-tooltip-host:hover; only a browser can verify hoverable/persistent/dismissible behavior. |
| 2.4.5 Multiple Ways | Partially Supports | Known findings remain on some elements; see Test status. Checks every page has the global nav linking all five pages and that index.html links to each. Two independent routes to every page. |
| 2.4.6 Headings and Labels | Supports | Automation can verify presence and non-emptiness, not descriptiveness. |
| 2.4.7 Focus Visible | Partially Supports | Known findings remain on some elements; see Test status. base.css sets outline:none and a box-shadow ring on :focus-visible; only a browser can confirm each focusable renders a visible change in every theme. |
| 2.4.11 Focus Not Obscured (Minimum) | Partially Supports | Known findings remain on some elements; see Test status. Needs rendered geometry: intersect each focused element with fixed/sticky layers. |
| 2.5.7 Dragging Movements | Not Applicable | No draggable attributes or drag/pointermove handlers; the kanban composite is static markup (guarded). |
| 2.5.8 Target Size (Minimum) | Partially Supports | Known findings remain on some elements; see Test status. Needs rendered bounding boxes and the 24 px spacing exception; axe 4.13 target-size gives the first pass, pw check handles themes and open menus. |
| 3.1.2 Language of Parts | Not Evaluated | Awaiting manual evaluation. axe can validate lang values but cannot find passages that are missing one. |
| 3.2.3 Consistent Navigation | Supports | Compares the .ds-nav link sequence across all five pages. |
| 3.2.4 Consistent Identification | Partially Supports | Known findings remain on some elements; see Test status. The check maps sprite symbol id to accessible name across pages and fails on conflicts. Functional sameness is a human judgment. |
| 3.3.3 Error Suggestion | Not Evaluated | Awaiting manual evaluation. No real validation happens; only the demo message text can be reviewed. |
| 3.3.4 Error Prevention (Legal, Financial, Data) | Not Applicable | Forms never submit (onsubmit="return false", no action); no data is stored (guarded). |
| 3.3.8 Accessible Authentication (Minimum) | Not Applicable | No authentication: no form contains a password or one-time-code input. The TextField password specimen sits outside any form and submits nothing (recorded as a note; guarded). |
| 4.1.3 Status Messages | Supports | Checks the toast container has aria-live and that status/alert specimens use role=status or role=alert. Announcement behavior itself is only observable with a screen reader. |
Revised Section 508
Chapter 5 (Software) and Chapter 6 (Support Documentation) apply to products built with the system, not to the design system itself. Their web content requirements are met through the WCAG 2.0 criteria in Tables 1 and 2 (every criterion introduced in WCAG 2.0).