Building an Accessible Website with Joomla: 4 Tips

Joomla isn’t the most popular content management system (CMS) on the internet, but it maintains an enormous user base of nearly 2 million active users. 

Other CMSs like WordPress and Squarespace have more users — but Joomla’s flexible design, open-source infrastructure, and simple content management tools have carved out a niche. 

If your website uses Joomla, there’s good news: By using appropriate extensions, plugins, and plain old semantic HTML, you can create accessible content with the Joomla site builder. 

To create a sustainable strategy, you’ll need to test content against the Web Content Accessibility Guidelines (WCAG), the international standards for accessibility. 

WCAG can help you reach more users and improve compliance with the Americans with Disabilities Act (ADA) and other non-discrimination laws. Here’s how to get started. 

1. Before building on Joomla, understand the basics of accessibility

As we’ve discussed in other articles, web accessibility isn’t a one-and-done process — it’s a mindset. You’ll need to treat digital accessibility as a priority from day one. 

Start by reviewing the four principles of WCAG: Content must be perceivable, operable, understandable, and robust. By thinking about those principles, you can make effective design decisions (and improve compliance with the ADA and other laws). 

Get into the habit of asking questions when designing your site:

• Does the content rely on a certain type of sensory perception? For example, does the visual appearance of a button (rather than its text label) indicate its purpose?
• Can users operate the website with different types of technology? Is the website operable with a keyboard alone (no mouse)?
• Can users understand how to navigate and operate the website? 
• Does the content work on a variety of types of devices — smartphones, desktop computers, and other systems?

By asking these types of questions, you’ll find opportunities to improve accessibility. For instance, if you’re adding a video, you can make sure that the video has captions and an accurate transcript. If you’re building a form, you can test it for keyboard operability, then review the form labels to ensure they are clear and descriptive.

When you think about your users with disabilities, these types of improvements are easy to implement — and they won’t require much additional work.

Related: The 5 Most Common Website Accessibility Issues (And How To Fix Them)

2. Start with an accessible Joomla template

You shouldn’t rely on a template to make your Joomla site accessible. With that said, it’s much easier to build inclusive content when you begin with an accessible framework.

Templates like JM Simple are responsive by default, which fulfills an important WCAG requirement. They may also include ”skip navigation” links and use default color schemes that conform with WCAG’s rules for color contrast — but remember, the choices you make when designing your site may make your website less (or more) accessible. 

Related: The Basics and Importance of Color Contrast for Web Accessibility

3. Review your website for common WCAG conformance failures

Joomla’s site builder has the necessary features to create accessible content. To use those features, you’ll need to understand why they’re important. 

To that end, quickly check your content for the most common accessibility barriers: 

• Low-contrast text - WCAG requires that text and interactive controls maintain a minimum level of contrast with the website’s background. Following this requirement benefits people with low vision and color vision deficiencies (also called color blindness). For detailed guidance, read: The Basics and Importance of Color Contrast for Web Accessibility.
• Missing alternative text - Images, graphs, and other non-text content must have accurate alternative text (also known as alt text) that describes its purpose. This benefits people who cannot perceive content visually. For more guidance, read: Alternative Text: What and Why.
• Inaccurate or duplicate title tags - Each page must have a unique, descriptive title. This benefits a wide range of users (and can enhance your website’s search engine presence). For more guidance, read: Why Page Titles Are Important for Web Accessibility.
• Missing form labels and instructions - Form labels are important for people who use screen readers and other assistive technologies. For more guidance, read: Why Form Labels and Instructions Are Important for Digital Accessibility.
• Missing captions and transcripts - All multimedia must be accessible for users with hearing and vision disabilities. By providing accurate captions and transcripts, you can accommodate these users and provide all visitors with more options for engaging with your content. For more guidance, read: Why Do I Need Both Transcripts And Captions for Accessibility?

After reviewing your content manually, consider using automated tools to find other potential WCAG failures. The Bureau of Internet Accessibility provides a free web accessibility compliance summary, which can help you find barriers — just remember, no automated test can guarantee WCAG conformance.

Related: What’s the Difference Between Manual and Automated Accessibility Testing?

4. Use Joomla extensions to improve accessibility, but don’t rely on extensions alone

Joomla’s Extensions Directory™ includes a variety of accessibility plugins, and some are quite useful for identifying and fixing common barriers. 

However, some accessibility issues require human judgment. An automated extension might be able to determine whether images have alt text, but cannot determine whether that alt text is accurate (at least, not yet — artificial intelligence is quickly becoming a powerful tool for accessibility). 

When evaluating extensions, ask questions:

• Does the extension “guarantee" WCAG conformance? If so, it’s probably not reliable.
• Is the extension based on WCAG recommendations? 
• If so, which version of WCAG? The best practice is to follow the latest version of the guidelines (currently, WCAG 2.1, with WCAG 2.2 expected for release in the next few months). 
• Does the extension provide functionality that is already available to users? For example, one extension provides an onsite screen reader — but most users with visual impairments will already have screen readers installed, so the feature may not be helpful.

Make sure you understand all of the features and limitations of each extension. Don’t assume that a single plugin will make your site compliant with the ADA or other laws — you’ll need a long-term testing strategy.

Related: What to Know About Accessibility Checker Browser Extensions

Remember, digital accessibility benefits every user

By making accessibility a priority, you contribute to a more inclusive online environment. You also make your content more predictable and useful for every user, regardless of their abilities. 

Writing alt text benefits users with vision disabilities, but also helps people understand content when your images fail to load. Following WCAG’s color contrast requirements can improve readability for color blind users, but it also benefits anyone who accesses your website in bright ambient light. 

And while accessibility requires some work, it’s well worth the effort. WCAG provides a framework for testing your website — and whether you’re working in Joomla, WordPress, or another CMS, the best practices of accessibility will help you create engaging content.

For more guidance, download our free eBook: The Ultimate Guide to Web Accessibility.