typo3-a11y

TYPO3 Accessibility Skill

WCAG 2.2 Level AA compliance standards for TYPO3 v13 and v14.3 LTS sitepackage frontend development. EN 301 549 still cites 2.1 AA; 2.2 covers the WCAG part of both, not EN's further clauses.

v14 a11y wins (use as reference):

Native <dialog> modal replaces Bootstrap Modal (Breaking #107443) — proper focus trap + Esc-to-close for free.
DocHeader breadcrumb rework (Feature #107875) improves landmark structure.
CKEditor 5 v47 dark/light context-aware (Breaking #106964) respects prefers-color-scheme.
Camino theme (v14.1+, Feature #108539) is an alternative to bootstrap-package with configurable nav/footer — validate a11y when opting in.

Accessibility Recommendations

These rules should be followed in every TYPO3 sitepackage:

Skip links required -- first focusable element on every page
Links underlined in body text -- color alone is not sufficient for link identification
Never disable buttons -- validate on click, show error messages
No role="menu" for navigation -- use <nav> > <ul role="list"> > <a>
role="list" on styled lists -- preserves list semantics when list-style: none is applied
Viewport must allow zoom -- never use user-scalable=no or maximum-scale=1
aria-expanded on disclosure triggers -- toggles must announce their state

Content Element Accessibility Checklist

When creating or reviewing content elements, verify:

Interactive elements have ARIA attributes (aria-expanded, aria-controls, aria-label)
Images have alt text (or alt="" for decorative)
Focus indicators are visible (:focus-visible styles)
prefers-reduced-motion is respected for animations
Color contrast meets WCAG AA: 4.5:1, or 3:1 for UI and large text (>=24px / >=18.66px bold), measured not eyeballed. APCA never waives a WCAG failure
Keyboard navigation works (Tab, Escape, Enter, Space)

References

Core

references/accessibility.md -- WCAG 2.2 AA guide, contrast policy
references/verifying-accessible-names.md -- Measure accessible names in a real browser; icon-font and Bootstrap-tooltip traps

Patterns

references/patterns-skiplinks.md -- Mandatory skip link navigation
references/patterns-accessible-navigation.md -- Navigation, submenus, mobile nav
references/patterns-accessible-forms.md -- Form labels, errors, fieldsets, multi-step
references/patterns-accessible-filter.md -- Filtering, pagination, sorting, table accessibility
references/patterns-disclosure-widget.md -- Accordions, collapsible sections, hiding techniques
references/patterns-clickable-cards.md -- Accessible card/teaser click patterns
references/patterns-responsive-tables.md -- Mobile table patterns

Frontend Patterns

references/patterns-sticky-header.md -- Scroll-triggered header, IntersectionObserver, CSS transitions
references/patterns-lazy-loading.md -- Deferred component init, IntersectionObserver, placeholders
references/patterns-breadcrumb.md -- Breadcrumb nav, JSON-LD structured data
references/patterns-language-switcher.md -- Multi-language nav, b13/menus LanguageMenu, flags
references/patterns-animations.md -- Scroll animations, prefers-reduced-motion support
references/patterns-scroll-to-anchor.md -- Smooth scroll, sticky-header offset compensation
references/patterns-skeleton-loading.md -- CSS placeholder animations, layout stability
references/patterns-toast-notification.md -- Auto-dismiss notifications, ARIA live region
references/patterns-back-to-top.md -- Scroll-to-top button, visibility threshold

About this skill