accessibletemplate

Version 4.0.0 Released

Details

Created on Tuesday, 13 June 2017 09:52

Written by Francesco Zaniol

Dear Customers,

I am pleased to announce the release of Zhong Framework version 4.0.0.

A new approach

With version 4, the Zhong Framework aims to tackle accessibility requirements with a different approach compared to versions 3 and 2. This approach is known as Universal Design (or Inclusive Design). Further information about this topic is in this post.

What's new in this release?

Version 4.0.0 brings many important changes regarding performance, mobile compatibility, and, most importantly, accessibility and usability.

These are some of the most important improvements:

• Cleaner interface: One of the main goals of this release is to improve the overall interface usability, therefore much effort was put into polishing and simplifying the layout: The top-bar was removed and it was replaced by a section besides the main menu. This section groups important site utilities into panels, such as the site search and the login form. Also, the breadcrumbs was moved on top of the main area as recommended by many usability guidelines.
• Better mobile experience: The mobile layout has been merged into the default layout so that only media queries are used to serve the mobile site. Previously a separate layout was served and a mechanism of device detection was used for this purpose. This mechanism and any other device detection have now been removed. This improvement also allows the use of page caching techniques, which are used to speed up the website.
• Better interaction usability: 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 navigation types: touch, mouse, keyboard and screenreader. This approach was also tested and recommended by screenreader users.
• Improved keyboard and sreenreader navigation: The HTML5 semantic structure has been improved and simplified. The "skip links" have been reduced and improved for a better keyboard-based navigation. Menus use an improved solution with aria attributes.
• Improved performance: The JavaScript and PHP code performance has been improved.
• Simplified administration interface: Fewer tabs and fewer options for the template's administration page.
• Improved visual accessibility: Bigger font-size is now used by default, and all templates' elements now pass the WCAG AAA contrast level.
• Live updates: Joomla will automatically check our servers for the latest update and alert you if any is available.

Free update for everyone

Version 2 and 3 are now considered obsolete and they will no longer be supported. Also, since this release brings many important changes and improvements, the update is provided free of charge. This means that you can download now the updated template from your orders without having to purchase a new template.

Further information about how to update your template can be found here: Zhong updates

Before you update

Both updates from versions 3.x.x and 2.x.x should go smoothly, however note that version 4 brings some changes in the site-layout, so be sure to check the preview in our gallery so that you are aware of what's changed.

If you are having difficulties with the update process, or if you have any questions about this new release, don't hesitate to contact me.

A new approach

Details

Created on Tuesday, 13 June 2017 09:51

Written by Super User

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.

Shop is back online

Details

Created on Tuesday, 30 May 2017 10:01

Written by Francesco Zaniol

After a long pause, we restored the purchase system with a new version of our themes available.