Audits and implements TYPO3 accessibility patterns for WCAG 2.2 AA, including Fluid templates, PHP helpers, JavaScript widgets, forms, focus states, ARIA, and go-live checks. Use when building or reviewing TYPO3 templates, content elements, extensions, or frontend code for accessibility, keyboard support, screen readers, WCAG, ARIA, or a11y readiness.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Audits and implements TYPO3 accessibility patterns for WCAG 2.2 AA, including Fluid templates, PHP helpers, JavaScript widgets, forms, focus states, ARIA, and go-live checks. Use when building or reviewing TYPO3 templates, content elements, extensions, or frontend code for accessibility, keyboard support, screen readers, WCAG, ARIA, or a11y readiness.
Compatibility: TYPO3 v14.x only. Older cores are out of scope for this collection.
TYPO3 API First: Always use TYPO3's built-in APIs, Fluid ViewHelpers, and core
features before adding custom markup. Verify methods exist in TYPO3 v14.
PHP & JS over TypoScript: This skill provides PHP middleware, Fluid partials, and
vanilla JavaScript solutions. TypoScript examples are avoided; use PHP-based approaches.
1. Accessibility Checklist (Go-Live Gate)
Run through this checklist before every deployment. Mark items as you fix them.
Semantic Structure
Every page has exactly one
<h1>
Heading hierarchy is sequential (h1 > h2 > h3, no skips)
Landmark elements used: <main>, <nav>, <header>, <footer>, <aside>
Skip-to-content link is the first focusable element
<html lang="..."> matches page language
Language changes within content use lang attribute on containing element
Images & Media
All <img> have alt attribute (empty alt="" for decorative)
All <img> have explicit width and height (prevents CLS)
Complex images (charts, infographics) have long description
Videos have captions/subtitles
Audio content has transcript
No auto-playing media with sound
Color & Contrast
Text contrast >= 4.5:1 (normal) / 3:1 (large text >= 24px / 18.66px bold)
UI components and graphical objects >= 3:1 contrast
Information not conveyed by color alone (add icon, text, or pattern)
Dark mode (if implemented) maintains contrast ratios
Keyboard & Focus
All interactive elements reachable via Tab
Focus order matches visual order
Visible focus indicator on all interactive elements (:focus-visible)
No focus traps (except modals — which must trap correctly)
Escape closes modals/overlays and returns focus to trigger
Custom widgets have correct keyboard handlers
Forms
Every input has a programmatic <label> (explicit for/id or wrapping)
Placeholder is not used as sole label
Required fields indicated visually and with required attribute
Error messages linked to inputs via aria-describedby + aria-invalid
Form groups use <fieldset> + <legend>
Correct type and autocomplete attributes on inputs
ARIA & Dynamic Content
Icon-only buttons have aria-label
Decorative icons have aria-hidden="true"
Dynamic updates use aria-live="polite" or role="status"
Error alerts use role="alert"
Active navigation links have aria-current="page"
Expandable elements use aria-expanded
Motion & Interaction
prefers-reduced-motion respected (CSS and JS)
No content flashes more than 3 times per second
Touch targets meet WCAG 2.2 AA 2.5.8 (minimum 24×24 CSS pixels); use 44×44 as a stricter comfort target where feasible
user-scalable=no is NOT set in viewport meta
TYPO3-Specific
Backend: alt text fields are filled for all images in File List
Backend: content elements have descriptive headers (or header_layout = 100 for hidden)
Backend: page properties have proper <title> and description
Fluid templates use <f:link.page> / <f:link.typolink> (not <a> with manual hrefs)
Content Block / Content Element templates follow accessible patterns below
2. WCAG 2.2 Conformance Audit Workflow
When asked for a WCAG 2.2 audit, do the work that can be done by the agent before handing anything back:
Run scripts/wcag22_audit.cjs against the rendered pages with axe-core tags for WCAG 2.0/2.1/2.2 A/AA.
Review and either fix or document all automated violations and incomplete items. The audit script computes contrast for color-contrast incomplete nodes where possible; use that evidence before escalating. Do not treat unresolved incomplete as a pass.
Verify semantic structure, page language, landmarks, one <h1>, heading order, skip link, image alt, image dimensions, viewport zoom, footer/header navigation, focusability, target-size candidates, and target-size exceptions for inline text links.
Probe keyboard order with real Tab navigation where possible. Fix clear template/component defects immediately.
Human/user follow-up only: screen reader confirmation, legal statement approval, and only applicable device-only, third-party/PDF/media, or user-testing tasks.
Use the detailed procedure in Testing & Tools when a conformance audit is requested. A successful automated run is not a WCAG conformance claim; it is evidence for the parts that automation and code inspection can cover.
3. Fluid Template Patterns
3.1 Page Layout with Landmarks
<!-- EXT:site_package/Resources/Private/Layouts/Default.html --><!-- Layout files must NOT contain <f:layout> — that tag belongs in Templates to select a layout. --><f:rendersection="Main" />
<!-- EXT:site_package/Resources/Private/Templates/Default.html --><f:layoutname="Default" /><f:sectionname="Main"><ahref="#main-content"class="skip-link"><f:translatekey="LLL:EXT:site_package/Resources/Private/Language/locallang.xlf:skip_to_content" /></a><header><!-- Main nav landmark lives in the partial (e.g. MainMenu.html) to avoid nested <nav>. --><f:cObjecttyposcriptObjectPath="lib.mainNavigation" /></header><mainid="main-content"><f:rendersection="Content" /></main><footer><navaria-label="{f:translate(key: 'LLL:EXT:site_package/Resources/Private/Language/locallang.xlf:nav.footer')}"><f:cObjecttyposcriptObjectPath="lib.footerNavigation" /></nav></footer></f:section>
<!-- Partial: Resources/Private/Partials/Navigation/MainMenu.html --><navaria-label="{f:translate(key: 'LLL:EXT:site_package/Resources/Private/Language/locallang.xlf:nav.main')}"><!-- role="list" restores list semantics in Safari/VoiceOver when list-style:none strips native list role --><ulrole="list"><f:foreach="{menu}"as="item"><li><f:ifcondition="{item.active}"><f:then><ahref="{item.link}"aria-current="page">{item.title}</a></f:then><f:else><ahref="{item.link}">{item.title}</a></f:else></f:if><f:ifcondition="{item.children}"><ul><f:foreach="{item.children}"as="child"><li><ahref="{child.link}"
{f:if(condition:child.active, then: 'aria-current="page"')}>
{child.title}
</a></li></f:for></ul></f:if></li></f:for></ul></nav>
Read the full guide when the task needs detailed examples, long templates, troubleshooting matrices, appendices, or sections not included above. Keep this file unloaded for narrow tasks so the skill follows progressive disclosure.
