Everyone has his own preferences and needs - and Joomla takes care of them all.

In addition to all the measures taken in the core for providing an accessible authoring tool there are add-ons in Joomla that can make your life easier and make your users and customers feel more comfortable. 

These additions can be useful - but be aware that they don’t make a site accessible by themselves!

Backend: Individual Accessibility settings

In Joomla 4 it is possible to change the settings for the backend on a user basis: each user can adapt the backend to their needs. The accessibility settings can be found under the user profile (Users -> Manage) and in the user menu on the top right corner of your backend.

There are four different settings that can be used individually or in combination. Monochrome will change the colors of the backend from blue to black/white:

High Contrast will remove some background and make the contrast brighter:

Highlight Links adds underlines and borders to all links in the backend:

Increase Font Size changes the basic font size to 18px (the standard font size in browsers is mostly 16px).

For users: Skip-to-navigation Plugin

This plugin is enabled by default for the backend, but can also be enabled for the frontend .

It helps keyboard users to skip directly to a region of the site. 

For users: Accessibility Plugin

The accessibility settings are useful to adapt the backend for each individual backend user. But it is also possible to offer accessibility features for the visitors of your page. The “Additional Accessibility Features” plugin can be activate for  backend, frontend or both: 

The plugin adds a button on the bottom of the page. To open / close the functions you can use a hotkey, CTRL+ALT+A on Windows or CTRL+OPTION+A on MacOS.

With the plugin the user can increase or decrease the font size and increase or decrease the text spacing to improve content readability.

The user can also invert the colors of the page, add underlines to all links, make the cursor bigger, activate a reading guide and also convert text to speech.

Screenshot Firefox

There is a function to change the gray hues of the page, that can be used in Edge or Chrome, but it is deactivated in Firefox.

Screenshot Edge

For some functions there are special hotkeys:

Screenshot Cassiopeia demo page with activated reading guide

The Additional Accessibility Features plugin does not solve any accessibility problem your site can have. The website needs to be built correctly for accessibility from the start.

People with disabilities use specialized tools (screen readers, screen magnifiers, braille embossers, etc.). and will probably not use the plugin, but it can improve the usability for the elderly, people with visual impairments, people with cognitive problems. E.g. a blind person will use a screen reader and not the option to change text to speech, but this is a very good solution for the elderly, for people who have difficulty concentrating, and also for those who have temporary reading issues.

Text enlargement is very useful for many seniors and people who see less well. They often do not know about the possibilities of the browser and like to use such tools.

The contrast version will not replace the correct contrasts on the website. But it can be helpful for people who have weaker eyesight or for people who browse the site, for example in a sunny place.

WCAG does not require the links to be underlined (they must be highlighted). But underlined links can improve accessibility for visually impaired people or for people who have difficulty concentrating.

For Users: Language of Parts in TinyMCE

What is it?

A tag that marks a part of a text as “other language”. It is useful for search engines or screen readers so they know that they must change their language or pronounciation. Imagine a screen reader uses English pronunciation for a phrase like  “honni soit qui mal y pense” - sounds awkward!

How to configure?

In the TinyMCE plugin you can define the languages you are using in your texts. 

If you want to make it easy for editors, then pull the language icon to the allowed icons for your editors. Otherwise they need to select a language with the format button and scroll down there.

How to use it in the editor?

Write your article and save it. Then mark parts that are in another language, click the world icon or the format dropdown and select the language of this part.

Now this part of the text is tagged as German. The screen reader will change pronunciation accordingly and search engines will understand your text too.

For Authors and Editors: Accessibility Checker  - jooa11y 

Remember this article of Brian Teeman announcing a new and exciting enhancement of Joomla: https://magazine.joomla.org/all-issues/july-2021/a-web-without-barriers. 

Now we have it on board! 

This plugin helps provide accessible content on your website.

Where can you find it?

It is a system plugin, its name is jooa11y. You have got this plugin with Joomla Version 4.1.0, it is enabled per default. 

In the plugin you can define which area of your site is checked (default is the main area) and you can include or exclude some rules. For the start simply keep the predefined settings.

Who benefits from this?

Visitors to your site, because they get barriere-free content.

Authors of content on your site, because they can produce barrier-free content.

Agencies and web developers - they have product which enables providing barrier-free content

How to use it?

Write any article and save or open any existing article. 

Activate the button “Accessibility Check” in the toolbar and at once the accessibility checker will indicate in a preview window if there are violations of the known rules. 

Please note: just like a spelling or grammar checker, this is a tool, it performs automatic checks. It cannot find violations against rules that are not specified in the program and it can mark violations which are intended and are correct in the context of an article. It is always your responsibility.

How does it work?

You surely remember the famous rule “Contrast of text color and background color must have a contrast ratio of > 4.5”?

The plugin checks this rule and many others one by one and every violation of a rule triggers an error and will be marked with an icon in the preview.

You can define which area of your site is checked (in the plugin parameters, default is the main area) and you can include or exclude some rules. 

While some rules are well defined and are definitely errors, other rules are violations of good practice. They are warnings and you can decide for yourself if this is ok and intended in your context or if you need to fix this. 

Behind every icon you can find a description - and sometimes advice on how to resolve the issue or what is best practice.

In the right bottom the checker icon gives the first information. It shows the number of issues if issues were found. Clicking the button toggles detailed information in the text.

Let us go through step by step: 

The checker found

• Contrast errors in two places - these are errors.
• A link which has target=_blank. This can be correct and intended - but in general it is not good practice and therefore a warning is displayed. 
• An image without alt-text - this is an error. 

Remarks

All settings and plugins presented here do not solve any accessibility problem on your site. To make a website accessible you need a correct semantic HTML structure and good CSS. Joomla core helps you with accessible structures in the different views, like correct labels and input fields in forms. 

If you are using a 3rd party template, you should be aware of overrides changing the original structure of the views. A nice template can break the accessibility of a site, if color contrast is not good or if elements are not reachable by keyboard. Accessibility has many facets and plugins are only a help for visitors that use your website in a different way as you may do.

Room for improvement

Joomla is always “work in progress” and the plugins discussed here are still evolving. In the next Google Summer of Code we included an accessibility project that should improve the accessibility plugin. Stay tuned and think accessible!