How to Make The Most Out of New Joomla 4 Web Accessibility Features - JoomShaper

How to Make The Most Out of New Joomla 4 Web Accessibility Features

07 June 2022
Hits 734
5 min read
How to Make The Most Out of New Joomla 4 Web Accessibility Features

In today’s world, it’s not enough to have a good website! You need a website that has inclusion at its heart. A website that welcomes people regardless of their abilities, economic situation, age, or education. Is your website accessible to the widest possible audience, regardless of ability?

Even if you’ve come across the term Web Accessibility, you still might have questions like—what exactly is it, why do I need to worry about it, and most importantly how do I make my site accessible? Well, if that sounds like you, you’re in luck!

Today, we’ll address some of the common questions about web accessibility and how we can make accessibility part of our web development workflow in Joomla.

What is Web Accessibility?

In a nutshell, Web Accessibility means making your website usable to all users regardless of their abilities. It means removing any barriers so that people regardless of any disability can access your site, navigate, and browse through the products and services you offer.

As people are now accustomed to a seamless online experience to do critical day-to-day life activities, it is important everyone gets to enjoy the same user experience. This is where Web Accessibility comes to play, it ensures all users have equal access to the functionalities and information of your website.

Why is Accessibility Important?

Accessibility has become one of the primary concerns for businesses. And when I say primary, I have good reasons to list it as one of the top concerns.

It’s a Moral Thing to Do!

If you’re selling digital products or services on your site, chances are there are millions of people who need access to those products because their disabilities prohibit them to get them from a physical store. If you neglect the accessibility options for such people, that effectively means you’re creating a barrier for them simply because of an oversight on your part.

For Greater Engagement/Conversions

You're missing out on opportunities to gain higher engagement and sales from millions of people with disabilities if you're not optimizing your content to be accessible. Inaccessible websites not only affect sales but can also harm your brand reputation.

Unwelcome Legal Consequence

Accessibility is very important these days, especially for government sites, and is required by law in many situations. The law may be different depending on your location (state, province, or country), but if you're operating a website intended for the general public you should try to be compliant with accessibility best practices whenever possible.

All New Joomla 4 Accessibility

With the mission to improve accessibility, Joomla 4 comes with just one template for the backend and one template for the front-end making them both WCAG 2.1 AA compliant.

This way all Joomla end users get to enjoy the same experience no matter their different capabilities. Joomla 4 also has some new accessibility options to make the overall experience more inclusive.

Let’s have a closer look at the Joomla 4 accessibility features.

New Backend Accessibility Option

Joomla 4 has an Accessibility Settings option at the backend from where you can perform the basic accessibility settings of the template. From the Joomla Backend, click on the User drop-down menu, and select the Accessibility Settings.

Joomla 4 Accessibility features

This will take you to the Accessibility Settings window. Here, you will be able to set the template monochrome, choose a high contrast version, highlight links or increase the font size.

Joomla 4 Accessibility features

Easily Reach With Keyboard Navigation

In Joomla 4, just after opening any page of your backend, if you press “Control + Option + 9” on your keyboard, a Keyboard Navigation area will pop up from where you can easily browse all the sections of the page.

Joomla 4 Accessibility features

This particular shortcut comes in handy when you want to reach a section at the bottom of the page with a keyboard. 

A New “Additional Accessibility Features” System Plugin 

Joomla 4 has a built-in plugin for additional accessibility features. To enable the plugin, go to the Joomla backend Dashboard > System > Manage > Plugins

Search for accessibility and enable the System - Additional Accessibility Features

This will show a floating accessibility button with which you will be able to:

  • change the text, size, and spacing
  • invert the colors of your page
  • go monochromatic
  • get all the links underlined
  • make the cursor bigger
  • get a reading guide to easily see what they are reading next
  • or even get the browser to read aloud the webpage for them 

How to Audit the Accessibility of Your Joomla Site

We need to audit the accessibility of our site to ensure our site is usable by people with disabilities, abide by accessibility legislation, and avoid potential lawsuits. 

You can check the accessibility of your site manually or using accessibility testing tools. 

Manual Accessibility testing can be challenging as you might be unfamiliar with many disabilities. However, here’re some of the key points that you can use as a checklist to be checked while performing accessibility testing.  

  • Image Alt text
  • Color contrast ratio
  • Provides keyboard shortcuts
  • Forms and labels
  • Blinking content
  • Multimedia content alternatives
  • Basic page structure check
  • Text to audio converters
  • Magnifiers in place
  • Color blindness filters 
  • Voice recognition software
  • Configure the timeouts accordingly
  • Clear controls
  • Easily understandable menus

There are various accessibility testing tools online like Accessibility Checker, Accessibility Developer Tools, etc., that can check the accessibility of the website.

Wrapping Up

If you think making your website accessible is costly and only intended for disabled people then let me break the myth for you. With improved accessibility, you also get to enjoy extra benefits like enhanced brand perception and optimized SEO. To know more about how to create an accessible Joomla site, refer to our article here

Joomla has come a long way and made some excellent accessibility improvements. Let us know how you feel about the new Joomla 4 accessibility features in the comments. Good day!

Zareen Tasnim

Zareen Tasnim

Technical Content Writer
Zareen is a technical content writer at JoomShaper. She's a tech enthusiast, writer by day, programmer by night, and always a foodie at heart!
‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s‏‏‎ ‎
‏‏‎ ‎J‏‏‎‎e‏‎‏‏‎‎n‏‏‎‎s‏‏‎ ‎
4 weeks ago
Please also consider the accessibility in your templates and pagebuilder.
The reason is this.
The page builder and the Helix Ultimate template always used pixels for any size.
For example, to allow the font size to change, the font sizes must be specified in EM or REM.
Specifying in pixels ignores the change in the base font size of the root element "html".


And why not just pixels?
Actually, there's nothing wrong with pixels. It's easy to use and you don't have to think much about it. However, the unit pixel is not flexible. 16 pixels are always 16 pixels, no matter what happens around them.
For example, if someone changes the font size in their browser because they want to see everything a bit bigger, texts where the font size is in pixels will not respond to that setting. If the font size is specified in em or rem, the text will scale.

For the same reason, pixels are a bit impractical for Responsive Design. Working with relative units has some advantages here.

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.