FOR Sa11y adds "Sa11y" to the REDAXO frontend whenever a backend user is logged in.
Sa11y visually highlights accessibility content issues at the source with a simple tooltip on how to fix them.
The AddOn serves as an editorial assistant to reduce accessibility issues on your website.
Version 5.0 – Sa11y library updated to 5.0. See Upgrade Notes below.
- Install the AddOn via the REDAXO installer or upload it manually.
- Add the following snippet to your template, near the end or beginning of
<body>:
<?= \FriendsOfRedaxo\Sa11y\Sa11y::get() ?>That's it. Sa11y appears automatically for every logged-in backend user.
All settings are managed on the AddOn's config page in the REDAXO backend. They are grouped into six sections:
| Setting | Description |
|---|---|
| Active | Enable or disable Sa11y globally |
| Root element | CSS selector for the content area to check (default: body) |
| Ignore selectors | CSS selectors to exclude from all checks |
| Panel position | right (default), left, top-right, top-left |
| Check delay (ms) | Delay before Sa11y runs (useful for SPAs) |
| Detect SPA routing | Re-run checks on client-side navigation |
| Setting | Description |
|---|---|
| Show "Good image" button | Highlights images that have good alt text |
| Show "Good link" button | Highlights links with descriptive text |
| Setting | Description |
|---|---|
| Contrast plugin | Enable WCAG colour contrast checking |
| Contrast algorithm | AA (default), AAA, or APCA (experimental) |
| Form labels plugin | Check for missing form labels |
| Readability plugin | Flesch-Kincaid readability score |
| Readability root | CSS selector for the readability target area |
| Readability ignore | CSS selectors to exclude from readability checks (e.g. .sidebar, .footer) |
| Export results plugin | Export findings as CSV (enabled by default) |
| Lang of parts plugin | Experimental AI-powered per-element language detection (Chrome only) |
| Lang of parts cache | Cache language detection results |
Configure custom link checks via a JSON array of objects. Each object can contain
pattern (regex string), exclusive (bool), weight (int) and css (class name).
Freeform JS options passed directly to the Sa11y initialiser. Useful for any prop not covered by the form above.
Examples available in the accordion on the config page:
// Custom about panel content
aboutContent: '<h2>Help</h2><p>Questions? Ask the REDAXO community.</p>',
// Ignore specific elements by test
ignoreByTest: { allCaps: '.hero-title', linkLabel: 'nav a' },
// Skip Sa11y entirely when a specific element is present
doNotRun: '.no-sa11y',
// Adjust alt text placeholder detection
altPlaceholder: ['placeholder', 'bild', 'image'],
// Set the expected first heading level
initialHeadingLevel: 2,
// Shadow DOM / Web Components
shadowComponents: 'my-card, my-hero',
// Sticky/fixed elements
fixedRoots: '.sticky-header, #cookie-bar',| Setting | Description |
|---|---|
| doNotRun | CSS selector – Sa11y does not start if this element is found on the page |
| Developer plugin | Show developer-mode checks (CSS/JS issues) |
| Developer checks on by default | Start with developer checks enabled |
| Auto-detect Shadow DOM | Automatically discover Web Component shadow roots |
The AddOn includes an optional live link checker that runs entirely in the browser—no server-side crawling required.
Once enabled, the link checker runs asynchronously in the background using Sa11y's native customChecks: "listen" API.
Broken links are reported directly inside the Sa11y error panel using the same annotation system as all other checks.
Each broken link shows a red error annotation button; clicking it opens a tooltip that displays a human-readable explanation including the HTTP status code:
- HTTP 404 – Link not found
- HTTP 5xx – Server error
- Timeout – No response within 8 seconds
- Network error – Server unreachable (DNS failure, connection refused)
| Setting | Description |
|---|---|
| Enable Link Checker | Turns the feature on/off |
| Check external links | Also check cross-origin URLs (detects unreachable servers; cannot read HTTP status due to CORS) |
| Ignore selectors | Comma-separated CSS selectors to exclude from checking (e.g. nav a, .footer a) |
- Non-blocking – uses Sa11y's native
customChecks: "listen"API; Sa11y renders immediately, broken links are injected after network checks complete - HEAD request first, GET fallback for servers that reject HEAD (HTTP 405)
- Session cache – results are stored in
sessionStoragefor 5 minutes; repeated navigation on a SPA skips already-checked links - Concurrency – 3 parallel requests at most
- External links – checked via
no-corsmode: an opaque response means the server is up; aTypeErrormeans it's unreachable (status code is not readable due to CORS)
panelPositionvalues changed –bottom-right→right,bottom-left→left.
Stored config values are migrated automatically byupdate.php.linksToFlagremoved – This prop was dropped by Sa11y 5.0. The config field has been removed from the AddOn.
- XSS hardening and performance improvements in the Sa11y core library
- ~10 % smaller bundle (migrated from Tippy.js to Floating UI)
- New Tamil (
ta) translation - New
contrastAlgorithmprop (AA / AAA / APCA) - New
langOfPartsPluginfor AI-powered per-element language detection - New
autoDetectShadowComponentsfor easier Web Component support - Expanded language support in
detectLanguage(): French, Dutch, Polish, Portuguese, Ukrainian, US English
A GitHub Action automatically tracks new Sa11y releases and updates the assets/vendor/sa11y/dist/ files.
Manual vendor updates are not required.
All available Sa11y props are documented at
https://sa11y.netlify.app/developers/props/
- Adam Chaboryk – creator of Sa11y
- Digital Media Projects team at TMU
- German translation: @elricco @ansichtsache
Sa11y is licensed under the GNU General Public License.
https://github.com/ryersondmp/sa11y/blob/master/LICENSE.md