Joomla Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-22
Joomla has made significant strides in accessibility with its 4.x and 5.x releases, incorporating accessibility features directly into the core CMS. The Cassiopeia default template includes ARIA landmarks, skip navigation links, and semantic HTML5 structure out of the box. Joomla's administration interface has also been rebuilt with accessibility in mind, making it more usable for administrators who rely on assistive technologies. However, the accessibility of a Joomla site in practice depends heavily on the template chosen, the extensions installed, and how content editors create and structure their content. Many third-party templates prioritize visual appeal over semantic correctness, and popular extensions for forms, galleries, and sliders frequently introduce accessibility barriers. The European Accessibility Act enforcement means that Joomla site owners serving EU customers must ensure their entire digital experience meets WCAG 2.1 AA standards. This checklist targets the most common Joomla-specific accessibility issues and provides practical fixes that site administrators, template developers, and content editors can apply immediately to improve compliance and usability for all visitors.
Common Accessibility Issues
While Joomla's default Cassiopeia template includes proper ARIA landmarks and skip-to-content links, many third-party templates omit these essential features. Templates that use generic div elements for header, navigation, main content, and footer regions force screen reader users to navigate the entire page without any structural shortcuts.
Edit your template's index.php file to replace generic div wrappers with semantic HTML5 elements (header, nav, main, aside, footer). Add a skip-to-content link as the first focusable element in the template. If modifying the template directly is not possible, create a template override. In Joomla 4+, you can use the Cassiopeia child theme approach to inherit accessible defaults while customizing the visual design.
<div id="header">
<div class="nav-wrapper">
<jdoc:include type="modules" name="menu" />
</div>
</div>
<div id="content">
<jdoc:include type="component" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div><a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
<header role="banner">
<nav aria-label="Main navigation">
<jdoc:include type="modules" name="menu" />
</nav>
</header>
<main id="main-content">
<jdoc:include type="component" />
</main>
<footer role="contentinfo">
<jdoc:include type="modules" name="footer" />
</footer>Popular Joomla gallery and slider extensions frequently generate image carousels without alt text support, use auto-advancing slides without pause controls, and implement custom navigation that cannot be operated via keyboard. The slider controls often lack visible focus indicators and meaningful accessible names.
Choose gallery extensions that support alt text for every image and allow editors to enter it during upload. Disable auto-play on sliders or ensure a visible, keyboard-accessible pause button is available. Replace custom slider navigation with standard button elements that include aria-label attributes describing their function. Test the entire gallery interaction using only the keyboard.
Joomla's multilingual capabilities allow creating content in multiple languages, but the lang attribute on the HTML element is sometimes incorrectly set or missing in third-party templates. Content that switches language mid-page (such as a French quote on an English page) rarely includes inline lang attributes, causing screen readers to mispronounce the text.
Verify that your template outputs the correct lang attribute on the html element by using Joomla's language API: <html lang="<?php echo $this->language; ?>">. For inline language switches, wrap foreign-language content in a span with the appropriate lang attribute. Joomla's content component supports per-article language assignment; ensure your template respects this setting.
Joomla's built-in contact form and many third-party form extensions use placeholder text as a substitute for visible form labels. When the user begins typing, the placeholder disappears and they lose the context of what the field requires. Screen reader users may not receive placeholder text at all depending on the assistive technology being used.
Ensure all form fields have explicit label elements associated via the for attribute matching the input id. In Joomla's contact component, the default layout includes labels but template overrides may remove them. For third-party form builders, configure them to display visible labels. If the design requires placeholder-only appearance, use CSS to position the label visually near the field while keeping it programmatically associated.
<input type="text" name="contact_name"
placeholder="Your Name" class="form-control">
<input type="email" name="contact_email"
placeholder="Email Address" class="form-control"><div class="control-group">
<label for="contact_name">Your Name</label>
<input type="text" id="contact_name" name="contact_name"
class="form-control" required aria-required="true">
</div>
<div class="control-group">
<label for="contact_email">Email Address</label>
<input type="email" id="contact_email" name="contact_email"
class="form-control" required aria-required="true">
</div>Joomla module chrome (the HTML wrapper around modules) controls how module content is rendered on the page. Default and custom chrome styles may output module titles as div or span elements rather than proper headings, breaking the document outline and removing navigation landmarks for screen reader users who browse by heading.
Edit or create custom module chrome in your template's html directory (templates/[template]/html/layouts/chromes/) that outputs module titles as appropriate heading levels. Use the module's header level parameter to allow site builders to choose the correct heading level for each module position. Ensure the heading level fits within the overall page hierarchy.
Joomla modules that update content dynamically via AJAX, such as search-as-you-type modules, lazy-loaded content modules, and filtering modules, typically do not announce changes to screen reader users or manage focus appropriately after the content updates.
Add aria-live='polite' to the container element that receives dynamic updates. After AJAX content loads, move focus to the first new content item or provide a status announcement using a visually hidden aria-live region. Use Joomla's built-in JavaScript framework to listen for AJAX completion events and trigger focus management.
Joomla-Specific Tips
- Use Joomla's built-in Cassiopeia template or create a child template based on it, as Cassiopeia was built with WCAG 2.1 AA compliance from the ground up and includes skip links, ARIA landmarks, proper focus management, and responsive accessible navigation.
- Enable Joomla's built-in accessibility features in Global Configuration, including the accessible media manager that prompts editors for alt text during image upload and the structured content editor that enforces heading hierarchy.
- When selecting extensions from the Joomla Extensions Directory, prioritize extensions that explicitly mention accessibility compliance or WCAG support in their descriptions, and always test with keyboard navigation before deploying to production.
- Use Joomla's template override system (templates/[template]/html/) to fix accessibility issues in extension output without modifying the extension code directly, ensuring your fixes persist through extension updates.
Recommended Tools
WAVE Web Accessibility Evaluator
A free web-based tool and browser extension from WebAIM that visually overlays accessibility errors and warnings on your Joomla pages, making it easy to identify and locate specific issues.
axe DevTools
A browser extension that runs automated accessibility audits against the rendered page output, identifying WCAG violations in your Joomla template and module output with detailed remediation guidance.
Sa11y
An accessibility quality assurance tool that can be integrated into Joomla templates to provide content editors with real-time, page-level accessibility feedback while previewing their content.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.