How we made Joomla 4 accessible

Outline

  • About me
  • A quick Joomla intro
  • Accesibility in Joomla since the beginning of the project
  • Joomla 1.5 (2008) - Beez theme
  • Joomla 2.5 and 3 - Beez 2 and 3
  • Changes in leadership
  • Joomla 4
  • Decissions we made

About me

  • Web developer expert in Joomla and PrestaShop and I can speak WordPress and Laravel.
  • Not an accessibility expert, but really interested in a web for everyone.
  • Involved in Joomla governance.
  • JAT leader in 2020.
  • I have 2 dogs and just became father of my 3rd kid and I like running

Joomla politics

  • Joomla is a fork from Mambo. It's been around since 2005.
  • Joomla name comes from the swahili word Jumla which means "All Together" or "As a Whole".
  • Joomla is guarded by a non-profit organization called Open Source Matters
  • Open Source Matters is fully formed by members of the community
  • The board of Open Source Matters is formed by four elected members (President, Vicepresident, Treasurer and secretary) and working team leaders

Joomla quick intro

  • Joomla administrator is an independent application and we call it backend
  • In Joomla we also have plugins, and widgets which we call modules and themes, which we call templates
  • In Joomla we have overrides for our views
  • Joomla is fully featured with interesting extensions to develop a website with minor or none 3rd party extensions
  • We also has Components, libraries, language files...

Accesibility in Joomla since the beginning of the project

  • In the first releases Joomla evolved slowly in the frontend:
  • Since the beginning Joomla community has cared about accessibility
  • All Joomla releases had in the past a frontend theme to make your sites accessible
  • All Joomla releases had in the past a simpler Joomla administrator theme that was suppossed to be accessible

Joomla 1.5 (2008) - Beez theme

  • Beez was a nice theme featured with all the accessible features of that time (2008):
    • Font size selector
    • Good contrast
    • Almost no tables for layout purposes
  • Beez had one problem in my opinion: It was an strident design. Other themes that came with the release were more sober and appropiate for companies.
  • People saw it as an overrides experiment to learn from instead of a template to consider

Joomla 2.5 and 3 - Beez 2 and 3

  • People saw it as an overrides experiment to learn from instead of a template to consider
  • Boring themes
  • Internal efforts to be compliant with with ATAG 2.0
  • Part of the UX team. Some volunteers like Angie Radtke (developer of Beez templates) pushing for accessibility

Changes in leadership

  • Only the Core Team were allowed to add code to the CMS
  • People contributed sending code to the core team and discussing changes
  • Since 2005 several changes in project leadership brought the current project structure
  • Now every important aspect in Joomla has a team: Production, Marketing, Events, and many more. And of course accessibility

Joomla 4

  • In development since 2013
  • JAT was stablished in 2016
  • Mainly driven by volunteers
  • Since 2017 till 2019 JAT made a huge effort in generating documentation and fixing issues for the new themes

(Hard) decissions we made

  • We use just one theme for frontend
  • We use just one theme for Joomla administrator

What we accomplished

  • Both themes (administrator and frontend) are WCAG 2.1 Level AA
  • Added user accessibility settings: Monochrome, increase font size, high contrast, highlight links
  • Skip to links
  • An overlay!!!

Helping content creators being accessible

  • Joomla conforms ATAG 2.0
  • Our own accessibility tester: Joa11y
  • Make alt descriptions relevant when creating content
  • Keyboard shortcuts in the administrator
  • Be sure every new addition to Joomla is accessible

The future of Joomla

  • We already have plans for Joomla 5
  • More improvements
  • New UX Team with tight conection with JAT
  • Teach web integrators how to build accessible websites
  • Create and curate accesibility documentation
  • Allow for accessible coding

References

![](https://magazine.joomla.org/images/2020-07/a11y/500px-Beez_01_ov.png)

![width:600px](https://magazine.joomla.org/images/2020-07/a11y/beez2.jpg)