Status of Accessibility in the Joomla Backend

Today is the official final day of coding for the Google Summer of Code and my project of an accessible administrator template for Joomla 1.6. There's been much accomplished and much still to do to make Joomla as accessible in the backend as it can be in the front. If you have an interest in accessibility and Joomla join me in making Joomla fully accessible.

Hathor Accessible Administrator Template

Standard

picture of template

High Contrast

Hathor High Contrast Administrator Template

Changes to the Core

Some of the fixes made this summer have already been implemented in the code stream for the upcoming Joomla 1.6 beta. These tend to be small changes that can have a major effect.

The menu has been changed so that template writers can make the menu accessible, the status bar has been refactored to be more understandable, and various links, particularly on submenus, can now be activated by the keyboard. The toolbar icons (Edit, Save, Cancel, etc.) look the same but they are now in a list just like a menu. These are some changes that everyone will have.

Basic Information

My template, which is code named Hathor, brings further enhancements. There is a choice of two templates, one of which is higher contrast. There is an option of regular or bold text.

This template can be used to create templates in your custom colors. The high contrast template is created with a CSS file that consists entirely of color styles. If you wish, you can manually change the colors in that file.

I have restructured the submenus into a tabbed interface and placed the toolbar icons immediately under the tabs over on the left. This interface is more obvious and results in less traveling of the mouse from side to side.

Accessibility Changes

Those items marked with an asterisk (*) require applying patches to the core. The template will function without the patches, but it won't give you that particular functionality.

On all pages

Skip to Content
Status Module has text
Accessible Menu
Submenus Accessible (some require *core changes)
Toolbars in a list
Appropriate structural headers
Colors pass WCAG 2.0 AA tests
*Accordion panels can be opened by keyboard
*Titles on initial checkboxes in tabular data
WAI-ARIA Roles on structural segments
WAI-ARIA Property/States on Required & Read only form fields
*WAI-ARIA Property/States to flag invalid forms fields
*Removal of jump menu on the "number of pages to display" selection

On pages with template overrides

Appropriate structural headers
Labels for form fields
Titles on form fields for tabular data
Removal of various jump menus that jump you back to the top of the page
Removed tables that were only for layout

Template overrides

Some of the accessibility changes require template overrides for the specific pages. I have done some pages and will continue to add more. Currently, I have overrides for the Article Manager, Article Edits, Featured Articles, Weblinks Manager, Weblinks edit, Login, and Control Panel.

Known Issues

I have compiled a spreadsheet listing each of the pages and detailing the issues remaining to be fixed on each. Some of the issues can be fixed with template overrides. Others will need patches to the core. See the link below under Related Links.

What follows below is a summary core changes that will need to be worked on to make the backend fully accessible.

Accordion Panels

We can get keyboard access, but currently you will need to tab through all the fields that are hidden without knowing where you are. Once you pop up on the header you can enter to open that panel. Screen readers should now work properly because they can jump to the header, but visual people who use a keyboard will have a harder time.

Lightboxes

The Options icon on the Article Manager and similar screens needs work. You need to keyboard through the entire shadowed original page before you get to the lightbox that has the options. Once there, the tabbed interface (if more than one tab) is a problem because you can't use a keyboard to switch tabs.

Hardcoded styles in the CMS

Still tracking down places where style tags are hard coded in the core which need the flexibility of being changed. For instance there are places where inline styles are coded as "red" or "green" for valid and invalid not taking into account either the background color on the template or whether those colors have the appropriate contrast with the background.

Hardcoded inline-JavaScript

Still tracking down places where inline JavaScript causes accessibility issues such as "onchange". In one case I'm doing a preg_replace to pull out the JavaScript before displaying it.

Inaccessible JavaScript Mootools

Unlike with jQuery, there doesn't seem to be much of a movement to add accessibility to the Mootools JavaScript framework that is used in the back end. Ideally accessibility should be built into the framework so that it will flow naturally.

Forms issues

Most of these are relatively minor and could be fixed with good written guidelines. In some cases it's using labels when you should just use text or using text when you should use a label. There are a couple places that there appear to be bugs where the labels link to and the input link from are not matching. There is also a problem with the optgroup not being closed out. Some cases can be fixed in layout file overrides, but others need to be fixed in the core.

Testing

There has been some testing done but more needs to be done. I will actually be using this project for user testing in a class this fall. It will be interesting to see the results.

Future of the project

I will be continuing to work on this project throughout the fall and will complete the rest of the overrides. I would like to see an Accessibility group formed to be dealing with these issues on an ongoing basis.

Final words

I, like all the other students, appreciate all the help I've received this summer from everyone in the project, not only from my mentors, Steve Fisher and TJ Baker, but also from the endless questions on the Skype chat and elsewhere. I am really going to miss that Skype!

I'll be blogging further about my experiences this summer, the continuing work, and Joomla and accessibility either here or on my site at www.tarrconsulting.com/blog. This blog is already too long to go into anything other than the project itself!