| name | typo3-a11y |
| description | Use when building accessible navigation, forms, filters, tables, skip links, disclosure widgets, or reviewing frontend code for accessibility in TYPO3 v13/v14 LTS projects. Also covers frontend implementation patterns: sticky header, lazy loading, breadcrumb, language switcher, animations, scroll-to-anchor, skeleton loading, toast notifications, back-to-top. Covers WCAG 2.1 AA: ARIA attributes, focus management, keyboard navigation, screen reader support, color contrast, link identification, heading hierarchy, native dialog element modal (#107443), Camino theme a11y. |
TYPO3 Accessibility Skill
WCAG 2.1 Level AA compliance standards for TYPO3 v13 and v14.3 LTS sitepackage frontend development.
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 text, 3:1 large text/UI)
- Keyboard navigation works (Tab, Escape, Enter, Space)
References
Core
references/accessibility.md -- WCAG 2.1 AA comprehensive guide
Patterns
references/patterns-skiplinks.md -- Mandatory skip link navigationreferences/patterns-accessible-navigation.md -- Navigation, submenus, mobile navreferences/patterns-accessible-forms.md -- Form labels, errors, fieldsets, multi-stepreferences/patterns-accessible-filter.md -- Filtering, pagination, sorting, table accessibilityreferences/patterns-disclosure-widget.md -- Accordions, collapsible sections, hiding techniquesreferences/patterns-clickable-cards.md -- Accessible card/teaser click patternsreferences/patterns-responsive-tables.md -- Mobile table patterns
Frontend Patterns
references/patterns-sticky-header.md -- Scroll-triggered header, IntersectionObserver, CSS transitionsreferences/patterns-lazy-loading.md -- Deferred component init, IntersectionObserver, placeholdersreferences/patterns-breadcrumb.md -- Breadcrumb nav, JSON-LD structured datareferences/patterns-language-switcher.md -- Multi-language nav, b13/menus LanguageMenu, flagsreferences/patterns-animations.md -- Scroll animations, prefers-reduced-motion supportreferences/patterns-scroll-to-anchor.md -- Smooth scroll, sticky-header offset compensationreferences/patterns-skeleton-loading.md -- CSS placeholder animations, layout stabilityreferences/patterns-toast-notification.md -- Auto-dismiss notifications, ARIA live regionreferences/patterns-back-to-top.md -- Scroll-to-top button, visibility threshold
Recommended Reading
Web Accessibility Cookbook by Manuel Matuzovic (O'Reilly, 2024)
