Accessibility Dock: Check Accessibility in the YOOtheme Customizer

The Accessibility Dock checks the accessibility of your page where you build it: in the YOOtheme Pro Customizer, on Joomla and on WordPress. It finds issues in the preview, names the WCAG criterion involved and opens the builder element with the field where you fix it. No more switching between a checker on the frontend and the builder, and no more guessing which element sits behind a CSS class.

The problem: checkers don't know the builder

Browser extensions like WAVE or axe DevTools and frontend checkers like Sa11y, built into Joomla as jooa11y, flag errors on the finished page. There, a YOOtheme layout is a stack of nested containers, classes like el-title and values from the Styler. By the time you know which column, which item and which field holds the faded text or the missing alt attribute, most of your time is gone. Contrast adds another problem: if text sits on an image, an overlay or in a slideshow, many tools only tell you to check it yourself.

How the Dock works

The Dock sits collapsed in the Customizer. You dock it to the left, right or bottom, and it follows your system's light or dark mode. Until you switch on checking in the Dock, it loads nothing into the preview. Nothing runs on the public website at all, the plugin only loads in the Customizer. Once switched on, the Dock checks the current page as soon as the preview has finished loading, and optionally again after every change.

Every finding is rated as an error, a warning or "Check manually" and names the WCAG criterion with a link. The Dock also traces it to its source: a builder element, a theme area like the header, navbar or footer, or third-party content like a Joomla module, a WordPress widget or article text. If the same error appears in several places within one element, it is listed once, with the number of occurrences. You step through them one by one in the preview. You can sort the list by issue or by element.

Straight to the field, not just to the error

One click on "Go to field" opens the responsible element in the builder, switches to the right tab and jumps to the field, even if it sits in a sub-panel, such as the overlay color under Image/Video of a section. Below the field, you see what's wrong and which value helps. In the layout tree, a colored dot marks the node that needs attention, and in the Content tab a button opens the report for the element. You make the changes yourself: the Dock never writes to your layout or the Styler settings, and you copy recommended values with one click.

For contrast errors, you get more than a hex value. The Dock recommends the YOOtheme option that actually improves the contrast, for example a darker overlay color, and states the resulting contrast. It never suggests a value that is already set. If the color comes from the theme, as with links or menu items, "Open in style" jumps to the Styler and highlights the responsible variable. Field mapping covers the YOOtheme Pro core elements and the elements by Tonino Gerns. Other elements open without field focus.

What gets checked

The technical checks run on axe-core, the testing engine by Deque. You choose the check profile in the settings: WCAG 2.1 AA, the benchmark behind EN 301 549 and the German Accessibility Strengthening Act (BFSG), WCAG 2.2 AA as the default, or WCAG 2.2 AAA with best practices. On top of that come editorial checks modeled on Sa11y, aimed at the content you or your editors maintain:

• Alt text: missing, a file name, a placeholder, too long or identical to the caption
• Link text like "click here", URLs as link text, identical link text with different targets and links to files without a note on the format
• Empty headings and links, skipped heading levels and bold paragraphs that look like headings
• Tables without header cells and longer text in all caps
• Readability: German text using the Amstad formula and the Wiener Sachtextformel, English text using Flesch-Kincaid

Uncertain heuristics show up as warnings, not errors. If text sits on an image, a gradient, a video or a transparent overlay, it never passes silently. Map tiles from the Map element don't count as images without alt text.

Measure contrast, even on images

With the element picker, you hover over the preview and get a measurement card for every element: text and background color, contrast ratio with a traffic light for AA and AAA, font size and weight, role, accessible name, alt text, heading level, target size and focusability. If text sits on a background image, the Dock measures the image itself, even under an overlay, across all slides in slideshows and with the Ken Burns effect. One click pins the card and shows the findings along with the way into the builder.

Tools for manual testing

You switch on seven tools individually in the Dock. You see the results in the preview and as a list in a separate window:

• Heading outline of the page, skipped levels stand out right away
• Page regions such as header, navigation, main content and footer (landmarks)
• Keyboard order, including obscured focus under WCAG 2.4.11
• Vision simulations: protanopia, deuteranopia, tritanopia, grayscale and blur
• Text spacing under WCAG 1.4.12 and 200 percent zoom
• Reading view as an approximation of what a screen reader announces
• Motion: reduced motion, autoplay and slideshows without a pause control

Simulations and the reading view are approximations. They don't replace a test with real assistive technology or with people with disabilities, and the Dock says so too.

Status log and report

Findings don't disappear with the next reload. The log stores them and automatically marks them as fixed once a later check no longer finds them. What you solved differently, you mark as done, and what doesn't apply, as ignored, with a required reason. Many similar occurrences, such as purely decorative images, you ignore in one go with a single reason. Every status change is recorded with user and timestamp, and filters narrow down the list.

You can export as CSV, as JSON or as an accessible HTML report that you print to PDF in the browser. For client projects, the report carries your logo and agency name, editor names can be anonymized, and fixed and done findings are listed separately. If the log grows too large, you clean it up with filters, and the Dock offers an export first.

Rules that don't fit your website, you switch off site-wide with a reason, and you exclude individual areas by selector. Both stay visible in the Dock and in the report. Rules at WCAG levels A and AA with error severity cannot be switched off.

Who the Dock is for

For agencies and freelancers who build with YOOtheme Pro and want to check accessibility while building instead of just before sign-off. For editors who maintain images, link text and headings and want to see right away what a change does. And for projects where you have to show a client what was checked and what was fixed. The interface is available in German and English.

BFSG, WCAG and the limits of automated testing

Since 28 June 2025, the German Accessibility Strengthening Act (BFSG), Germany's implementation of the European Accessibility Act, has applied to many online shops and digital services for consumers. The Dock helps you find barriers early and keep a traceable record of the work on them. It does not make your website legally compliant: automated checks only find part of the issues. Whether an alt text captures what an image shows, whether the reading order makes sense or whether a form is understandable with a screen reader is for a person to judge. The Dock replaces neither a manual audit nor proof of conformance. Nor is it an overlay widget meant to cover up barriers for visitors.

Quick start

1. Install the plugin. On Joomla it activates itself, on WordPress you activate it in the plugin list.
2. Enter the download key from your customer account: on Joomla under System, Update Sites, on WordPress under Settings, Accessibility Dock. This gets you updates and binds the license to your domain.
3. Open the YOOtheme Customizer, expand the Dock and switch on checking.
4. Click a finding and choose "Go to field". After your change, the Dock checks the page again.

You also set the check profile, automatic checking, exceptions and report details under Settings, TG - Accessibility Dock.

If something doesn't work as expected

• The Dock shows no findings: checking only applies to the current Customizer session. After reopening it, switch checking on again.
• The Dock reports a missing activation: check that the download key is entered in full and save again. If the license is already bound to another domain, release it in your customer account.
• The HTML report doesn't open: it appears in a new tab and the browser has blocked the pop-up. The Dock tells you so, allow pop-ups for the Customizer.
• A finding opens the element but no field: the element comes neither from YOOtheme Pro nor from Tonino Gerns. There is no field mapping for such elements.
• A contrast is set to "Check manually": the text sits on an image, gradient or video. Measure it with the element picker.

Requirements

• YOOtheme Pro 5, older versions are not supported
• Joomla 5 or 6 with PHP 8.2 or later
• WordPress 6.5 or later with PHP 8.2 or later
• The license is valid for twelve months for one website, on either Joomla or WordPress. A staging copy under dev., staging., test., demo. or sandbox. of your domain is included, and local environments like localhost, .test or .local run without activation.