With version 4, the Zhong Framework brings numerous improvements and changes. The most notable one is the shift from focusing on accessibility to the broader concept of Universal Design (which inherently includes accessibility). This post explains the "journey" that led to this important decision.

The origins

Originally Zhong was born with the goal of including advanced accessibility features in a theme that would be pleasant to use and customize. In order to do so, the "accessibility panel" was created. The aim of this panel was to host controls that could be used by users with special needs to customize the site presentation. The controls could also activate "alternate layouts", for example the high-contrast layout (optimized for low-vision users), or the full-access layout (optimized for screenreader users). Together with the panel, a rigid semantic strucuture of the page was created, using hidden headings and HTML5 tags.The implementation of these features was done after a lot of researching on W3C documentation, online resources and forums, testing, user feedback and analyzing how other websites approach the accessibility challenge.

A complex solution is a bad solution

Although I've been receiving (mostly) positive feedback regarding the template and its accessibility features, I started to realize that the whole implementation was too complex and confusing, both for site users (with and without special needs) and for webmasters. In fact, the implementation of the accessibility features was so strict that it was common for webmasters to break the accessibility requirements. For example, loading a specific Joomla module in the wrong position would break the semantic structure of the page. Another example is, applying a custom CSS would break the high-contrast layout and would make the content illegible. Also, many Joomla plugins would just break on the "alternative layouts".On the user side, some users without special needs found the controls difficult to understand. As for users with special needs, although some of them found the controls useful, they already have ways to personalize the look of web pages. This led to the conclusion that some of the accessibility controls were useful only in limited cases, or when the user didn't have access to his/her personalized environment (for example from a public device).

Universal Design

After a lot of research for a better solution, I found the answer on Universal Design, which is a set of principles for creating products that can be used by a vast category of users. It has to be noted that these principles are broader than those of accessible design, therefore products are inherently accessible to older people, people without disabilities, and people with disabilities.

Universal Design made me re-think Zhong by shifting the focus from accessibility to three key concepts: usability, simplicity and universality.

What's changed

Top-bar removed

The first step I took was to align the layout to usability standards and to make it as clean and simple as possible.This led to the removal of the top bar: The top-bar was originally included to host the accessibility panel and the breadcrumbs in order to give them visual priority. My idea was to create an interface that emulates a software window with a toolbar, however this paradigm doesn't really work for websites, so I decided to fall back to the classic header/main-content/footer paradigm.
In order to make the layout as simple as possible, I decided to group tools under panels. These tools are: the site-search, login form, the readability controls and, on small screens, the main menu. This would remove clutter from the overall layout, giving more priority to the content.

Readability controls

As explained before, versions 3 and 2 provided a solution that includes multiple layouts and specific controls for users with special needs. On many forums and discussions online there is an intense debate whether these controls are actually useful or not. I personally think that some users (such as an elderly audience) could benefit from it as long as: they work with external plugins or customizations made by webmasters, they don't break the layout by causing unexpected changes, they are not too complex and they are served with a simple interface. So following the principle of "universality", I decided to remove the old features and leave three controls that could be actually useful to all users, and not only to users with special needs. By default the font-resizer is enabled, a font-family switcher and a theme switcher can be enabled depending on the website requirements.

Universality

The goal of making Zhong "universal" was to make a single interface work for as many devices and input methods as possible and for the widest audience. On top of that, it had to be flexible enough to be compatible with thrid party plugins and sustain customizations from webmasters.

The first step in this direction was to remove the separate mobile layout (generated by PHP) and use only CSS media-queries.

An important change was the improvement of how sub-menus and panels interact. Old versions 2 and 3 used different code for handling the activation of elements. For example, sub-menus would open on hover if a mouse is used, or on touch if it is on a mobile device, or by using a hidden button if a keyboard is used. This approach wasn't very flexible and it was buggy on certain touch devices. In version 4 the interaction with menus and panels has been unified (on-click) so that the same code can handle multiple device types: touch, mouse, keyboard and screenreader. Also, this approach was coupled with a better usage of aria-attributes in order to improve accessibility.

I reduced and simplified the usage of languages snippets. I also focused on providing a solid interface for RTL languages.

I tested the compatibility with older browsers and mobile-browsers on a slow connection (such as Opera mini on extreme mode).

Also, as already explained, I worked hard on making the readability controls work in any situation. For example, the font resizer actually checks for external stylesheets using absolute font-sizes and converts them in em. The theme-switcher applies low brightness only to known elements belonging to Zhong, and the inverted-theme uses CSS filters (older versions of Zhong used a forced CSS override that would likely break third-party plugins).

Accessibility tweaks

Version 4 aims to guarantee accessibility by providing a highly flexible and universal interface, however certain specific accessibility features are kept and improved:The semantic structure of the page has been significantly simplified so that webmasters don't have to worry about loading modules in the wrong position. Many hidden headings for screenreader and "skip links" are removed and only few are kept. Highlighted outline is now enabled only during keyboard navigation. There is better usage of aria attributes for pop-up menus and tool panels. Bigger font-size is now used by default, and all templates' elements now pass the WCAG AAA contrast level.

Conclusions

Ultimately, accessibility must not be seen as the aim, or as an enforced feature in the system, but as an "invisible" layer that is gracefully integrated with all the other parts. The design and the implementation of a web interface should consider usability and code standards first, then accessibility will come naturally with only few specific adaptations.