| Category | Pass | Fail | Review | Coverage |
|---|---|---|---|---|
| Color & Contrast | 6 | 3 | 0 | |
| Keyboard Navigation | 4 | 4 | 0 | |
| Screen Reader | 7 | 2 | 0 | |
| Forms | 0 | 0 | 0 | |
| Responsive & Reflow | 5 | 2 | 0 | |
| Touch & Target | 4 | 0 | 0 | |
| Cognitive | 5 | 0 | 0 | |
| Motion | 4 | 0 | 0 | |
| Media | 0 | 0 | 0 | |
| Agent Operability & AEO | 4 | 4 | 0 |
Affected users: Low-vision users, elderly users, users in bright daylight
Location: :root --ink-faint var, used in .filter-label, .shortlist-info, .card-meta-row, .card-cta, .head-right, .anti-list, footnote text, ~30+ usages
axe-core flagged 66 nodes; ink-faint is the primary culprit. Used widely for small labels (10-11px). Ratio is 3.44:1 vs 4.5:1 AA minimum.
--ink-faint: #8A8578;--ink-faint: #6B6655; /* 5.4:1 on --paper, passes AA */Affected users: Low-vision users
Location: .cat-num for cat 1, .matrix-table .ref, .combo-load, .anti-list bullets
Need 4.5:1 for normal text. Currently 4.23. Borderline but fails.
--cat-1: #B85C3D;--cat-1: #A04F33; /* 4.8:1 on --paper */Affected users: Low-vision users
Location: .cat-num for cat-2 (Curriculum 課程型), border-color usages
Used as text color for category 2 number labels. 2.47:1 ratio. Light ochre on cream is one of the worst common combinations.
--cat-2: #C19A3D;--cat-2: #8A6E1F; /* darker ochre, 4.7:1 */
--cat-2-border: #C19A3D; /* keep light for borders/accents */Affected users: Keyboard-only users, screen reader users, motor-impaired users using switch devices
Location: .card elements (23 nodes); buildCard() in script
Cards are
card.addEventListener('click', () => openDetail(p.id));
// card has no tabindex, no role, no keydown// Option A (preferred): use a <button>
const card = document.createElement('button');
card.type = 'button';
card.className = 'card';
// ... rest unchanged
// Option B: make div behave like button
card.tabIndex = 0;
card.setAttribute('role', 'button');
card.addEventListener('click', () => openDetail(p.id));
card.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(p.id); }
});Affected users: Keyboard-only users
Location: .combo elements (3 nodes); renderPresets() in script
The recommended combo cards (一鍵載入) cannot be activated without a mouse. Same pattern as f1.
div.addEventListener('click', () => loadCombo(preset.paradigms));const div = document.createElement('button');
div.type = 'button';
div.className = 'combo';
div.addEventListener('click', () => loadCombo(preset.paradigms));Affected users: Keyboard-only users
Location: .synergy-item (li elements with click handler)
The synergy list inside detail panel lets you jump to another paradigm. Mouse-only.
li.addEventListener('click', () => openDetail(s.with));// Wrap inner content in a button:
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'synergy-link';
btn.append(head, why);
btn.addEventListener('click', () => openDetail(s.with));
li.appendChild(btn);Affected users: Keyboard-only users
Location: .wb-suggestion (div with click)
Same div-as-button anti-pattern. Suggestions are also draggable but drag is mouse-only too.
Affected users: Screen reader users who navigate by headings
Location: Workbench section h3 elements directly under document with h1 only
Workbench h3 (你的組合 / 適合用在 / 建議補上) appear after the page h1 with no h2 in between (until the categories). Heading navigation (rotor) becomes confusing.
<section class="workbench"> ... <h3>你的組合</h3> ... </section><section class="workbench" aria-labelledby="wb-h"> <h2 id="wb-h" class="sr-only">Combo Workbench</h2> ... <h3>你的組合</h3> ... </section>Affected users: Screen reader users using landmark navigation
Location: 6 .cat-meta
Per ARIA spec, aside is a complementary landmark and should be top-level. axe flagged this as best-practice violation.
Affected users: Keyboard users, screen reader users
Location: top
After fixing keyboard support on cards, this becomes important — without a skip link, users tab through control-bar (7+ stops) before reaching main content.
No findings in this category.
Affected users: Mobile users, zoom users (zoom equivalent of 400% on 1280px desktop)
Location: main { max-width: 1640px; padding: 0 64px } and .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
scrollWidth=487px on innerWidth=320px → 167px horizontal overflow. The card grid's minmax(320px, 1fr) forces 320px minimum cards, plus padding pushes total beyond viewport.
.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }.cards { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 480px) {
header.atlas-head, .control-bar, .workbench, main { padding-left: 16px; padding-right: 16px; }
}No findings in this category.
No findings in this category.
No findings in this category.
No findings in this category.
Affected users: AI agents, search engines, social media unfurl previews
Location:
If shared as a personal brand artifact, the lack of metadata means LLM crawlers / search engines can't index it well. No og:title, no canonical, no JSON-LD.
Affected users: Keyboard-only users, screen reader users, motor-impaired users using switch devices
Location: .card elements (23 nodes); buildCard() in script
Cards are
card.addEventListener('click', () => openDetail(p.id));
// card has no tabindex, no role, no keydown// Option A (preferred): use a <button>
const card = document.createElement('button');
card.type = 'button';
card.className = 'card';
// ... rest unchanged
// Option B: make div behave like button
card.tabIndex = 0;
card.setAttribute('role', 'button');
card.addEventListener('click', () => openDetail(p.id));
card.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(p.id); }
});Affected users: Keyboard-only users
Location: .combo elements (3 nodes); renderPresets() in script
The recommended combo cards (一鍵載入) cannot be activated without a mouse. Same pattern as f1.
div.addEventListener('click', () => loadCombo(preset.paradigms));const div = document.createElement('button');
div.type = 'button';
div.className = 'combo';
div.addEventListener('click', () => loadCombo(preset.paradigms));Affected users: Keyboard-only users
Location: .synergy-item (li elements with click handler)
The synergy list inside detail panel lets you jump to another paradigm. Mouse-only.
li.addEventListener('click', () => openDetail(s.with));// Wrap inner content in a button:
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'synergy-link';
btn.append(head, why);
btn.addEventListener('click', () => openDetail(s.with));
li.appendChild(btn);Affected users: Keyboard-only users
Location: .wb-suggestion (div with click)
Same div-as-button anti-pattern. Suggestions are also draggable but drag is mouse-only too.
Affected users: Low-vision users
Location: .cat-num for cat-2 (Curriculum 課程型), border-color usages
Used as text color for category 2 number labels. 2.47:1 ratio. Light ochre on cream is one of the worst common combinations.
--cat-2: #C19A3D;--cat-2: #8A6E1F; /* darker ochre, 4.7:1 */
--cat-2-border: #C19A3D; /* keep light for borders/accents */Affected users: Low-vision users, elderly users, users in bright daylight
Location: :root --ink-faint var, used in .filter-label, .shortlist-info, .card-meta-row, .card-cta, .head-right, .anti-list, footnote text, ~30+ usages
axe-core flagged 66 nodes; ink-faint is the primary culprit. Used widely for small labels (10-11px). Ratio is 3.44:1 vs 4.5:1 AA minimum.
--ink-faint: #8A8578;--ink-faint: #6B6655; /* 5.4:1 on --paper, passes AA */Affected users: Low-vision users
Location: .cat-num for cat 1, .matrix-table .ref, .combo-load, .anti-list bullets
Need 4.5:1 for normal text. Currently 4.23. Borderline but fails.
--cat-1: #B85C3D;--cat-1: #A04F33; /* 4.8:1 on --paper */Affected users: Mobile users, zoom users (zoom equivalent of 400% on 1280px desktop)
Location: main { max-width: 1640px; padding: 0 64px } and .cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
scrollWidth=487px on innerWidth=320px → 167px horizontal overflow. The card grid's minmax(320px, 1fr) forces 320px minimum cards, plus padding pushes total beyond viewport.
.cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }.cards { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
@media (max-width: 480px) {
header.atlas-head, .control-bar, .workbench, main { padding-left: 16px; padding-right: 16px; }
}Affected users: Screen reader users who navigate by headings
Location: Workbench section h3 elements directly under document with h1 only
Workbench h3 (你的組合 / 適合用在 / 建議補上) appear after the page h1 with no h2 in between (until the categories). Heading navigation (rotor) becomes confusing.
<section class="workbench"> ... <h3>你的組合</h3> ... </section><section class="workbench" aria-labelledby="wb-h"> <h2 id="wb-h" class="sr-only">Combo Workbench</h2> ... <h3>你的組合</h3> ... </section>Affected users: Screen reader users using landmark navigation
Location: 6 .cat-meta
Per ARIA spec, aside is a complementary landmark and should be top-level. axe flagged this as best-practice violation.
Affected users: Keyboard users, screen reader users
Location: top
After fixing keyboard support on cards, this becomes important — without a skip link, users tab through control-bar (7+ stops) before reaching main content.
Affected users: AI agents, search engines, social media unfurl previews
Location:
If shared as a personal brand artifact, the lack of metadata means LLM crawlers / search engines can't index it well. No og:title, no canonical, no JSON-LD.
Americans with Disabilities Act — 4 critical Level A violations (keyboard inoperability across primary content), 3 Level AA violations (contrast, reflow). 8,000+ web a11y lawsuits filed annually 2023-2025. Most cite WCAG 1.4.3 + 2.1.1, both flagged here.
Exposure Score: 7/10
Japanese Industrial Standard for Web Accessibility — Same WCAG mapping as ADA. Japan emphasizes voluntary compliance for private sites; mandatory for government. Lower litigation risk but reputational risk for organizations engaging APAC public sector.
Exposure Score: 4/10
Web Accessibility Guidelines (Taiwan) — Based on WCAG 2.0 AA. Same violations apply. Mandatory for government and quasi-public organizations including some NGO classifications.
Exposure Score: 4/10