Level Up Accessibility in Joomla

Maximizing Inclusive User Experience Through Joomla

You've got an eye-catching website that you're proud of, but what if not everyone can use it? Accessibility is the cornerstone of an inclusive web experience. It's not just a nice-to-have; it's a must. When a website is accessible, it means that everyone can use it, including people who use screen readers, people who have mobility impairments, and people with cognitive disabilities.

Joomla, and What it Does

Joomla is a powerful Content Management System (CMS) used to create websites and applications. It's one of the most popular CMS platforms in the world, It is one of the most popular CMS platforms in the world, right up there with WordPress and Drupal, and has won many awards. As of research from earlier in 2023, 1.8% of websites run on Joomla, which accounts for a 2.7% slice of the international market among websites using a recognized content management system.

The Joomla CMS allows users to build a wide range of websites, from simple blogs to complex e-commerce sites and online portals. The more advanced Joomla Framework is used by developers at every skill level to create everything from plain vanilla commonplace websites right up through to sophisticated large-scale systems, encompassing a sweeping array of applications that includes communication tools, data reporting tools, integrated e-commerce systems, custom product catalogs, application bridges, complex business directories, reservation systems, and inventory control systems.

Suggestion for graphic: A horizontal bar that starts with “Simple Blogs” on the left and ends with “Complex Systems” on the right. Place icons along the bar to represent the different types of websites and applications you can create with Joomla, such as a pencil for blogs and a shopping cart for e-commerce..

Why is Joomla So Popular?

One reason for Joomla's likability is its versatility. It can handle various types of content and offers numerous extensions and templates to customize your website. Joomla is also known for its robustness; it can support large-scale, complex websites with ease. Another draw is its active community, which offers a wealth of information, tutorials, and support.

Some additional features that make Joomla a top choice for many people looking to build a functional, adaptable, and reliable website:

• Ease of use: Joomla is user-friendly, even for people with no web development experience.
• Powerful and flexible: Joomla can be used to create a wide variety of websites, from simple blogs to complex e-commerce sites.
• Extensible: There are thousands of Joomla extensions available, which can be used to add new features and functionality to your website.
• Free and open source: Joomla is free to download and use, and the source code is available for anyone to modify.
• Community: Joomla's global community of developers and volunteers contribute to a shared effort to make the system easy to use, expandable, multi-language supportive, accessible, and adaptable for mobile devices. They also focus on optimizing it for search engines, among many other features. This also makes more information available for developers who are searching for answers on their own projects.

Some of the strong websites powered by Joomla: IKEA, Harvard University, MTV (yes, MTV is still a thing!), eBay, and Linux.com.

What is Digital Accessibility in Joomla?

Are the popular sites we mentioned just above considered accessible? Some of them, sure. How accessible they are is something else entirely.

IKEA offers an accessibility menu, their images have alt text, and their site is keyboard navigable. Harvard also has an accessibility menu, and their pages have clear headings. The MTV site has high color contrast, and image alt text, and eBay has options like font size change, color contrast change, and a skip links feature, which Linux also has. But! here comes a big “but”, and we cannot lie. There is no one-size-fits-all accessibility solution. Website accessibility is a complex issue, and making sure a website is fully accessible as well as standards compliant requires extensive testing with various technologies and, if possible, an in-depth audit by accessibility experts as well as a direct assessment by users with disabilities.

While Joomla itself offers a multitude of native features and an inherent adjustability, the platform's ability to create accessible websites deserves its own discussion.

Digital accessibility: what is it?

Let’s take it from the top. Digital accessibility is the practice of designing and developing websites and web applications so that they will be accessible to everyone, including people with disabilities.

This means creating a site that works well with screen readers, allows for easy navigation via keyboard, and offers visual aids like high contrast text, among other accessibility features. It also refers to following high-level regulations, guidelines and standards for websites and web applications, such as the Web Content Accessibility Guidelines (WCAG) and the US-based (ADA) The Americans with Disabilities Act, as well as similar legal requirements in other countries.

Joomla accessibility, and how to leverage it

Joomla accessibility simply means using Joomla’s CMS or development framework to create accessible websites and web applications.

While accessibility within Joomla’s own family of websites could use some improvement, as they’ll readily admit, their accessibility statement declares:

“Joomla! means “all together”. Inclusion is in our heart. As a community, we accept and welcome everyone. We are committed to being accessible to the widest possible audience, regardless of ability or technology.”

Sounds good. In practice, as with most efforts towards making the web more accessible, it’s a process.

And, accessibility requires engagement and dedication from everyone in that process, from a website or web app’s inception to design to development to delivery. As Joomla specifies, “…we will give you an accessible base install, but it will be up to you to ensure it is still accessible at the end of the build.”

So, make sure you get initial buy-in plus participation all along the line from the people involved.

Why is Joomla Accessibility Important?

Making your Joomla website accessible is not just about going through the motions and checking accessibility off a to-do list, or meeting certain requirements. It's about making sure everyone has an equitable experience on your site or app. With so many people depending on the internet for crucial information and services, Joomla accessibility has to mean more: no one gets locked out.

Here are a few reasons to keep accessibility front of mind when creating in Joomla:

UX: Improve User Experience

One of the most obvious advantages of Joomla accessibility is the enhancement of user experience. Accessibility by its nature creates a better user experience for everyone, whether or not they have a disability. By making your site accessible, you're making it more user-friendly for everyone: it is exponentially easier for everyone to use, navigate, and understand.

Compliance: Stick to the Rules

Digital accessibility isn’t just a nice idea; it’s the law in many places. By making your Joomla website accessible, you’re staying compliant with international guidelines like the Web Content Accessibility Guidelines (WCAG) by W3C, as well as the many laws in almost every country that require websites to be accessible. By making your Joomla website accessible, you can stay ahead of compliance with the law, and out of unnecessary complications. Avoid legal and financial headaches down the road.

Widen Your Reach

Being accessible to millions more potential visitors sounds good, doesn't it? By committing to building out your Joomla project with included accessibility, you naturally extend your audience, boosting your marketing and advertising effectiveness. You can reach a wider audience, including people with disabilities. This is likely to lead to more visitors, more customers, and more impact.

Build Reputation and Trust

Making your Joomla website accessible shows that you genuinely care about all of your users, and you’re putting that into action. This can help improve your brand reputation and build trust with your audience.

Building From Accessible Templates in Joomla

When making your Joomla website accessible, templates are the foundation. Using pre-built accessible templates in Joomla can save a lot of time and effort. An accessible template sets up your website at a good starting point, so that its layout, fonts, and colors are comfortable to interact with for all users.

Accessible templates are designed to follow accessibility guidelines and standards, so you don't have to reinvent the wheel. Take advantage of these, and skip worrying about making them accessible yourself.

Best Practices for Accessible Website Elements

Remember: Joomla templates are not considered accessible based only on how things look; they're judged on how things work. Keep best practices in mind. And, although this isn’t all-inclusive, start here:

• Use Semantic HTML: Use semantic HTML elements to structure your content. This improves screen reader compatibility. It will help any screen reader correctly describe your content, and make it straightforward for people with disabilities to navigate your website.
• Add Good Labels: Add clear, relevant labels to all of your input fields and form elements. This will help people with disabilities recognize what information they should enter. Where useful, consider adding tooltips.
• Build In & Test Keyboard Navigation: Prioritize keyboard navigation. Use your templates, coding, and testing to make sure that your website can be navigated using a keyboard only. This is important for people who cannot use a mouse.
• Avoid CAPTCHAs: How are you setting up secure access on your site? You’re not just blocking robots, you’re creating obstacles for people with disabilities. CAPTCHAs are often difficult or impossible for people with disabilities to solve. If you need to use a CAPTCHA, make sure that there is also an alternative way for people with disabilities to access your website, page, or form.

Choose Wisely: Accessible Visual Design in Joomla Templates

When you’re coming up with the look and feel of your Joomla site, keep in mind that there’s more at stake than aesthetics or even brand identity. People are going to need your site, and they must all find it usable. Don’t worry, designers, it doesn’t need to be boring. Improved function leads to better form.

A visually accessible template for your Joomla website should have:

• High Contrast: Make sure text stands out against its background. While you don’t have to stick to black and white, you should choose the colors in your template carefully to have enough contrast against each other so that your content can be easily read by people with color blindness or low vision.
• Font Readability: Choose fonts that are easily readable for your template. Make sure that the font sizes are large enough, and font styles are clear enough, to be read by everyone without strain on eyes or brain. Save the funky fonts for personal art projects.
• Good Heading Styles: Heading styles are not to be used at random, just because a stronger look fits what you want for your design. Use heading code carefully to structure your content logically and clearly. Keep other large or bold styles out of heading code format, if they aren’t intended to indicate a heading. This makes it easier for people to navigate your website.
• Images: Add relevant alt text to all your images so that they can be understood by people who cannot see them. Keep in mind that using an image’s file name such as “product.jpg” as your alt text is useless, as it doesn’t give any real information to a user who is blind or has low vision. If your image is just a visual flourish, like a flower or an extra color block, make sure it has empty alt text, so users aren’t confused when it’s announced by a screen reader.
• Links: Make sure that your links are clearly visible and easy to follow. Pay attention to how links appear when they’re surrounded by other text. Can they be noticed?
• Clickable Elements: Make sure clickable elements, like buttons, are easily identifiable.
• Responsive Design: Your Joomla accessible templates should work well and be readable and navigable on any device.

Using Joomla Extensions to Maximize Accessibility

Not sure what the right tools are for the job? No need to run in circles figuring it out. Joomla has a variety of extensions specifically aimed at improving accessibility. We don’t judge these extensions individually. Instead, we’ll list the people’s choice based on Joomla’s extension page reviews.

Some 5-star reviewed extensions with a solid amount of votes include:

Screen Reader ★★★★★ 81

Appearing in the frontend as a popup or toolbar, this J!Extensions Store extension is a popular choice, including features such as a high-quality audio text reader, font sizing and spacing, three high contrast modes, a dyslexic font, gray hues, enlarged cursor, read mode, reading guide, hide images option, custom text and background colors, skip to contents, focused elements highlighter, and a fix for anchor links target attribute. +$ Paid Download

All in One Accessibility Pro ★★★★★ 33

This Skynet Technologies USA LLC. extension claims to remediate your website to comply with the following standards: ADA, WCAG 2.1, Section 508, Australian DDA, European EAA EN 301 549, UK Equality Act (EA), Israeli Standard 5568, California Unruh, Ontario AODA, Canada ACA, German BITV, and France RGAA. We can’t confirm that high level of compliance without a site-by-site review. However, we will mention that this extension boasts 53 features, including a screen reader, support for 40+ languages, a quick install process, and tools based on assistive technology. +$ Paid Download

GSpeech ★★★★★ 20

This free Creative Solutions extension focuses on audio, with an AI voice generator that aims at producing realistic text to speech. It has an option to auto-convert content to natural-sounding audio, which can then be embedded in their players. This tool supports 70+ languages and has 16 different audio styles. -$ FREE Download, No CC

All in One Accessibility (Limited) ★★★★★ 19

The free version of the pro All in One we listed above, this Skynet Technologies USA LLC. extension has a limited but still useful 24 features, including a reading mask, content adjustments, and dynamic widget color and position, plus language support as above. -$ FREE Download

Accessibility by UserWay ★★★★★ 529

We’re surprised the UserWay extension hasn’t been reviewed directly on the Joomla site yet. We’ve had it recommended to us personally by some experienced developers. And it has garnered a solid amount of good reviews elsewhere, including a 4.8 average out of 529 reviews on the popular G2 review site, as well as a 4.9 out of 40 reviews on GetApp. While reserving judgment since we have yet to try it ourselves, we’ve added it to this list because it appears to be a serious, solid option, with free and paid versions. -+$ FREE/Paid Download

Bonus Off-Topic 5★ Recommendations: Although they didn’t make our accessibility-specific list, we’ve also heard a couple of other 5 star Joomla-compatible tool recommendations from our sources: Admin Tools Professional by Akeeba Ltd. for security, with 159 5★ reviews, and JCE Editor with 541 5★ reviews (self-described as a familiar favorite) for improved WYSIWYG content creation. Check these out if they seem useful to you, and consider whether they can help with your accessibility improvements or overall website building efforts. As always, no guarantees from us, just our best bets.

Joomla Extension Installation Steps

To get any of the above extensions up and running:

1. Go to the Joomla Extensions Directory.
2. Download the desired extension.
3. Head to your Joomla admin panel.
4. Navigate to Extensions > Manage > Install.
5. Upload the downloaded package and follow the on-screen instructions.

Congratulations, you've taken a solid step toward Joomla accessibility.

How to Test and Audit for Joomla Accessibility: Trusted Tools

Joomla accessibility is crucial, but how do you know your website really meets user expectations as well as regulatory standards? Keep calm and make a list. Get out your digital notepad, we’ve got a few tools and techniques you can reliably use to test for accessibility in Joomla. They'll help you assess your site or app to check if it's in alignment with the Web Content Accessibility Guidelines (WCAG). Of course, your outcome will vary depending on your level of expertise as well as the checker you’re using, aside from the actual accessibility of the site in question. We suggest using multiple tools to test, as this yields the most credible results. Get an expert if you can: experience and understanding cannot be overrated.

The Joomla Accessibility Checker (Jooa11y)

The open-source Joomla Accessibility Checker, aka Jooa11y, is helpful for content authors. It is now included in Joomla by default. While it is not a code analysis tool, it can identify content errors and warnings, and give guidance on fixes. It lists features including 50+ test conditions, explanatory tooltips on the page, low-tech without complex API or integration, and more checks on toggle including form labels, contrast, readability, dark mode, and links (advanced). -$ FREE

As an aside: We’ll take this opportunity to mention that the a11y abbreviation you’ll see frequently in the context of accessibility is simply the first and last letters of “accessibility” (a-y) plus the 11 characters in between them. Although it isn’t read out that way by screen readers, visually the word a11y also looks like the word “ally”.

Merriam-Webster defines “ally” as an individual or group that gives help or support to a labor or endeavor. In modern usage, the term ally is often used to describe someone who supports and helps a marginalized group in their ongoing fight for equality. Certainly people with disabilities often face obstacles as well as discrimination, and just as surely, they deserve equality and equal access to the services everyone enjoys.

WAVE by WebAIM

Straight from the accessibility home base, WAVE is a web accessibility evaluation tool developed by the Web Accessibility Initiative (WAI) at the World Wide Web Consortium (W3C). It can be used to check the accessibility of any web page, including Joomla websites. Using the main extension interface, you can detect issues using the WAVE sidebar, as error highlights marked directly in the page content with injected indicators, and in the WAVE code panel. Note that the WAVE tool includes a suite of free and paid accessibility tools. -+$ FREE/Paid

aXe by Deque

This informative and in-depth accessibility testing tool provides specific links to issues on your website plus hints on how to solve them. However, it is best used by someone with a good amount of accessibility experience and knowledge. Otherwise, your results may not be helpful. -$ FREE

More Joomla Accessibility Add-Ons & Plugins

These Joomla accessibility add-ons are available for front-end and back-end users. If you’re a developer who may find these helpful yourself or for team members on the back-end, these can be edited per user in profile settings. If you’re adjusting accessibility settings intended for your end users, check through and examine your options.

• The Skip-to-Navigation Plugin is a back-end default, and can also be toggled on for front-end. Does what it says on the box: gets users past repetitive content such as page headers.
• Joomla’s plainly-named internal Additional Accessibility Features Plugin can be activated for either front-end, or back-end, or both. It offers some useful functionality: increase/decrease for text size and text spacing, invert colors, underline links, a big cursor, a reading guide, and text to speech, as well as some options that may not be available in all browsers.
• TinyMCE is a front-end-aimed plugin that helps you define text as another language. This is important as it tells screen readers what accent to use, which is essential for listeners to understand what’s being said. If a phrase in another language, say Spanish or French, is set in the middle of English text, it will be incomprehensible when read out loud if the accent isn’t noted as its correct language. This becomes especially problematic when the word has switched from one language to another and also changed its meaning! “Les baskets”, for example, are actually sports shoes, a slang term probably derived from basketball.
• The Joomla Accessibility Checker is tailored for Joomla. This extension scans your site and offers insights.
• Siteimprove can be useful for tracking accessibility and SEO metrics in Joomla and elsewhere.
• Tenon.io offers in-depth analysis and suggests fixes for accessibility issues.

Self-Testing for Accessibility

Aside from using any external tools, you should absolutely examine your website yourself, and have any contributors look it over as well. Here’s a good checklist as you run through your content:

• Do the colors in your website have enough contrast so that they can be easily read by people with visual impairments?
• Is the font size in your template large enough to be easily read by everyone?
• Are your site headings set up correctly to logically structure your content and make it easier for people to navigate your website?
• Have you added clear alt text that describes your images, so that they can be understood by people who cannot see them?
• Are your links clearly visible and easy to follow?
• Can your website can be navigated using the keyboard only?

Accessibility Optimization for Joomla Content

Whether you’re masterminding content development for a huge family of sites, or you’re a writer adding a blog to a mini-site, here are a few tips to boost your Joomla-created content accessibility:

• Keep Content Clear: Use concise language. Keep your content straightforward to make it accessible to everyone, including those with cognitive disabilities. Avoid using jargon or technical terms that your audience may not understand.
• Keep Content Short: Break text strategically. Divide your text into small paragraphs, and use headings to structure your content. This makes it easier for people to read and understand.
• Don’t Forget That Alt Text: Always include brief but descriptive alt text for images to improve screen reader compatibility. This will allow people who cannot see your images to understand what they are about.
• Are Your Links Descriptive? Avoid using generic links like “click here.” These aren’t clear or helpful to people using assistive technology. Instead, use links that describe the link destination.
• Use Semantic HTML: Use the right tags for headlines, paragraphs, and lists to help screen readers interpret your site.
• Add Closed Captions & Transcripts: Include captions and transcripts for any recorded audio-visual content to make it accessible to those with hearing impairments, and make sure captions are synced correctly. Add live captions where possible.

Quick Tips: Navigating with Assistive Technologies

You’re already well on your way to accessibility. Here are some items to confirm that people using the most common assistive technology can easily navigate your Joomla site:

Keyboard navigation in Joomla-created websites can and should be simplified. Regularly test keyboard navigation for both functionality and order. It’s essential for maintaining keyboard navigation compatibility. Make sure all interactive elements are focusable and can be activated using keyboard only, including all links and form elements. Set a logical tab order that takes the user through content following the visual order on the page. Keep your website's navigation structure consistent throughout, to make it easier for users to learn to navigate your website using the keyboard.

Joomla provides a number of keyboard shortcuts that can be used to navigate the website. Make sure that your users are aware of these keyboard shortcuts and how to use them.

Screen reader compatibility: Most Joomla accessible templates already incorporate good practices for screen reader compatibility. However, using ARIA landmarks can significantly improve the navigation experience for screen reader users. Be sure to add skip links so users can jump past repetitive content, like the navigation menu, and head directly to the page’s main content.

WCAG and ADA Compliance in Joomla

WCAG, developed by the W3C, is a set of guidelines intended to make all of the web more accessible. The theory behind these guidelines are usually summarized as the POUR principles: Perceivable, Operable, Understandable, and Robust.

Perceivable: Web content must be perceivable by users, regardless of their disabilities.

Operable: Web content must be operable by users, regardless of their disabilities.

Understandable: Web content must be understandable by users, regardless of their disabilities.

Robust: Web content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

Making WCAG Your Website’s Reality

You can implement WCAG principles by using Joomla accessible templates that comply with these guidelines, by testing your back-end and front-end regularly both automatically and manually, by using the tips we’ve listed throughout this article, and by maintaining regularly scheduled accessibility audits for your site. Joomla extensions for accessibility can also add functionalities like voice navigation, making your site even more operable and understandable.

What is ADA Compliance for Digital Accessibility?

The Americans with Disabilities Act (ADA) is a civil rights law that prohibits discrimination against individuals with disabilities. The ADA requires businesses and organizations to provide accessible goods and services, including accessible websites and applications.

To comply with the ADA, businesses and organizations must make sure that their websites and applications, as well as their other digital content such as PDFs and presentations, are accessible to people with disabilities. This means following WCAG guidelines and standards.

Why WCAG?

Although the WCAG is not a governmental regulation in itself, it is often referenced in legal cases and governmental discussions and lawmaking. The WCAG is considered by most to be the benchmark: the definitive standard by which digital accessibility is measured.

The WCAG is also used as a way to measure accessibility for compliance with other laws and regulations around the world. And, the web by its very nature is worldwide. That means if you don’t want to run afoul of laws in states and countries where you hadn’t even realized you had users, make sure your websites are accessible.

One Last Recommendation

Speed and Performance

Nobody likes a slow website, especially users relying on assistive technologies. Optimize your site’s performance by reducing image sizes and leveraging browser caching.

Let’s Go: Boost Joomla Web Accessibility

We've covered a fair amount here, from the basics of digital and Joomla accessibility to specifics like WCAG and ADA compliance, as well as including a good few tips, recommendations, and links we hope you'll find useful. Remember, by making your Joomla website accessible, you’re doing more than following rules. You’re extending a welcoming digital hand to everyone. So, go put some (or all!) of our suggestions into action and start optimizing your Joomla websites for accessibility. Because the web is a place where everyone should feel at home.

If you’re serious about growing digital accessibility, take some time and explore a few of the many resources available to help you learn more about accessibility and how to implement it. There are vast amounts of tutorials, blogs, and videos that you can skim or dive into. If you're comfortable with some heavier reading, the World Wide Web Consortium (W3C) has a comprehensive set of guidelines for web accessibility, and the US Department of Justice has a website with information on American accessibility laws and regulations, or check your local government websites.

FAQ