Transparency
WCAG 2.2 AA Criteria We Test
Every org chart generated by our tool is validated against the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA. Below is the complete list of criteria we test, how each test is performed, and what it means for your content.
27
Criteria tested
15
Custom validator rules
axe-core
Industry-standard engine
Test Method Legend
Each criterion is tested using one or more of the following methods.
AutomatedTested by our custom WCAG validator and/or axe-core with no human intervention (16 criteria)
Automated + ManualPartially automated with supplemental manual review (6 criteria)
ManualVerified through manual template review and testing (5 criteria)
Full Criteria List
27 WCAG 2.2 success criteria at Level A and AA.
| Criterion # | Name | Level | Test Method | Explanation |
|---|---|---|---|---|
| 1.1.1 | Non-text Content | A | Automated | Every image in the generated org chart includes an alt attribute so screen readers can describe the content. Our custom validator (image-alt rule) flags any <img> missing alt text, and axe-core verifies the same. |
| 1.3.1 | Info and Relationships | A | Automated | Structural information such as headings, lists, tables, and form labels is conveyed through proper HTML semantics. Our custom validator checks heading hierarchy, table headers, list structure, and form labels. axe-core verifies ARIA roles and relationships. |
| 1.3.2 | Meaningful Sequence | A | Automated | The reading order of the generated HTML matches the visual presentation order. axe-core validates that the DOM sequence is logical and meaningful. |
| 1.3.3 | Sensory Characteristics | A | Manual | Instructions in generated charts do not rely solely on shape, size, visual location, orientation, or sound. We verify this through manual review of template output. |
| 1.4.1 | Use of Color | A | Manual | Information is never conveyed by color alone. All templates use text labels and icons alongside color to indicate relationships and hierarchy. |
| 1.4.3 | Contrast (Minimum) | AA | Automated | Text and background color combinations meet the 4.5:1 contrast ratio for normal text and 3:1 for large text. Our custom validator checks inline styles, and axe-core evaluates computed styles in the rendered page. |
| 1.4.4 | Resize Text | AA | Auto + Manual | Text can be resized up to 200% without loss of content or functionality. Our custom validator (text-resize rule) checks for fixed font sizes that would prevent scaling. Manual testing confirms no content overflow. |
| 1.4.5 | Images of Text | AA | Manual | Generated org charts use real HTML text rather than images of text. Names, titles, and department labels are all rendered as DOM text nodes, making them resizable and readable by assistive technology. |
| 1.4.10 | Reflow | AA | Manual | Content reflows at 320 CSS pixel width (equivalent to 400% zoom on a 1280px viewport) without requiring horizontal scrolling. Templates are designed with responsive layouts. |
| 1.4.11 | Non-text Contrast | AA | Auto + Manual | UI components and graphical objects such as org chart connectors and card borders meet the 3:1 contrast ratio against adjacent colors. axe-core checks component boundaries; manual review covers connector lines. |
| 1.4.12 | Text Spacing | AA | Manual | Content remains readable and functional when users override line height to 1.5x, paragraph spacing to 2x, letter spacing to 0.12em, and word spacing to 0.16em. No clipping or overlap occurs. |
| 1.4.13 | Content on Hover or Focus | AA | Auto + Manual | Tooltips and hover content in interactive templates are dismissible, hoverable, and persistent. axe-core validates ARIA patterns; manual testing confirms keyboard dismissal. |
| 2.1.1 | Keyboard | A | Automated | All org chart functionality is operable through a keyboard interface. Our custom validator (keyboard-focusable rule) checks that interactive elements are focusable. axe-core verifies tabindex and keyboard event handlers. |
| 2.1.2 | No Keyboard Trap | A | Automated | Users can navigate away from any component using standard keyboard controls (Tab, Escape). axe-core checks for keyboard traps in interactive widgets. |
| 2.4.1 | Bypass Blocks | A | Automated | A skip navigation link is present as the first focusable element, allowing keyboard users to jump directly to the main content. Our custom validator (skip-navigation rule) verifies this. |
| 2.4.2 | Page Titled | A | Automated | Every generated HTML document includes a descriptive <title> element. Our custom validator (page-title rule) flags missing titles and can auto-insert one. |
| 2.4.3 | Focus Order | A | Auto + Manual | The focus order of interactive elements follows a logical sequence that preserves meaning and operability. axe-core validates tabindex values; manual testing verifies the visual focus path. |
| 2.4.4 | Link Purpose (In Context) | A | Automated | Every link has discernible text that describes its purpose, either through visible text content, aria-label, or surrounding context. Our custom validator (link-purpose rule) and axe-core both check for empty or ambiguous links. |
| 2.4.7 | Focus Visible | AA | Automated | All interactive elements display a visible focus indicator when navigated via keyboard. Our custom validator (focus-visible rule) checks for CSS outline suppression. axe-core verifies focus styles are present. |
| 2.5.8 | Target Size (Minimum) | AA | Automated | Interactive touch targets (buttons, links) are at least 24x24 CSS pixels. Our custom validator (target-size rule) measures inline-styled dimensions and flags elements below the WCAG 2.2 minimum. |
| 3.1.1 | Language of Page | A | Automated | The default human language of every generated page is identified with a lang attribute on the <html> element. Our custom validator (html-lang rule) checks for this and can auto-add lang="en". |
| 3.2.1 | On Focus | A | Automated | Receiving focus does not trigger unexpected context changes. axe-core validates that no onfocus handlers cause navigation or form submission. |
| 3.2.2 | On Input | A | Automated | Changing a form control setting does not automatically trigger a change of context without prior notification. axe-core validates onchange behavior. |
| 3.3.1 | Error Identification | A | Auto + Manual | When input errors are detected, the item in error is identified and the error is described in text. axe-core checks for ARIA error attributes; manual review verifies error message clarity. |
| 3.3.2 | Labels or Instructions | A | Automated | Labels or instructions are provided for user input fields. Our custom validator (form-labels rule) ensures every input, select, and textarea has an associated label or aria-label. |
| 4.1.2 | Name, Role, Value | A | Automated | All UI components have proper name, role, and value information exposed to assistive technology. Our custom validator (aria-roles rule) checks ARIA role validity. axe-core performs comprehensive ARIA attribute validation. |
| 4.1.3 | Status Messages | AA | Auto + Manual | Status messages (such as validation results or generation progress) are presented using ARIA live regions so screen readers announce them without receiving focus. axe-core checks for proper role="status" and aria-live attributes. |
How We Validate
Our validation pipeline runs two complementary engines on every generated org chart, then merges the results into a single compliance report.
Custom WCAG Validator
A purpose-built static analyzer that checks 15 rules specifically tuned for org chart HTML output. It can detect violations and automatically fix many of them (missing titles, lang attributes, alt text, skip links, duplicate IDs, and more).
Custom Rules
html-langpage-titleheading-hierarchyskip-navigationalt-textform-labelscolor-contrastaria-roleskeyboard-focusablelink-purposetable-headersfocus-visibletext-resizetarget-sizelist-structure
axe-core Engine
The industry-standard accessibility testing library by Deque Systems. We run axe-core against the rendered HTML in a headless browser to catch issues that require computed styles and DOM state, such as color contrast on inherited backgrounds and keyboard trap detection.
axe-core Tag Coverage
wcag2a-- WCAG 2.0 Level A ruleswcag2aa-- WCAG 2.0 Level AA ruleswcag21a-- WCAG 2.1 Level A ruleswcag21aa-- WCAG 2.1 Level AA ruleswcag22aa-- WCAG 2.2 Level AA rules
Generate Your First Accessible Org Chart
Every output is validated against all 27 criteria listed above. Start with 5 free credits -- no credit card required.
Get Started Free