Main content

Alert message

This website uses "technical cookies" to improve your experience, "analytics cookies" to collect data in an anonymous form, and cookies from social networks for the like/share buttons. More info.
By your continued use of this site you accept such use.

The Zhong framework: Features in detail

The following document lists the Zhòng framework features. For each feature there is also a 'Try it' tip that explains how to test the features using our website.

Legend:

  • A green mark, the feature is available in the free edition The feature is available in the free editions
  • A blue mark, the feature is not available in the free edition The feature is available only in the premium/basic editions (visit our gallery to discover more)

Accessibility PanelA green mark, the feature is available in the free edition

The accessibility panel helps users customize the website layout.

Try it!

Click the "accessibility panel" button in the top bar.

High Contrast LayoutA green mark, the feature is available in the free edition

This layout is suitable for people with low vision.

Implementation

  • The layout is "horizontal": all sections and columns are full width. This helps users zoom the text and set big fonts to read the content clearly.
  • In this layout the highest contrast between background and text color is set. Furthermore, all text links are highlighted and no graphic effects are added.
  • Each section has a descriptive heading so that users can better understand the structure of the page.

Try it!

Open the accessibility panel and switch to "High Contrast".

Legibility menuA green mark, the feature is available in the free edition

These options are included in the accessibility panel and allow to:

  • Lower the contrast of white backgrounds
  • Remove the underline effect on links, remove all-caps and italic effects
  • Change font-family
  • Highlight hovered and focused elements

Try it!

Open the accessibility panel and change the legibility options.

Layout Width switcherA green mark, the feature is available in the free edition

  • Liquid layout width: the website layout adapts to the window width but it is bounded to a maximum size.
  • Full layout width: the website layout always adapts to the window width.

Try it!

Open the accessibility panel and change the layout width.

Font Resize ToolA green mark, the feature is available in the free edition

This tool increases or decreases the font size.

Try it!

Open the accessibility panel and use the font resize tool.

Mobile LayoutA blue mark, the feature is not available in the free edition

This layout is optimized for small screens.

Try it!

Access this website with your mobile phone.

Accessible SlideshowA blue mark, the feature is not available in the free edition

The accessibility slideshow is a separate Joomla module that can be installed in your website; it is fully compatible with Zhong.

Try it!

Visit our gallery and click on the demo page of any of our templates.

Slideshow Features

  • Fully compatible with the Zhong Framework
  • Fully accessible by screen readers
  • 20 slide positions available
  • Responsive images
  • Navigation dots and arrows available

MultilanguageA green mark, the feature is available in the free edition

Our templates have been translated into: English, Italian, French, German, Spanish, Portuguese, traditional Chinese, simplified Chinese, Slovenian, Farsi, Malay, Arabic, Turkish, Swedish, Swahili, Norwegian, Russian, Dutch, Polish, Greek, Croatian, Hebrew, Slovak, Hungarian, Afrikaans, Thai, Hindi, Czech.

ATTENTION: only the front-end is translated, the back-end (template administration panel) is english only.

Do you want to help us translating our templates? There is a discount for you! Contact us for more info.

CrossbrowserA green mark, the feature is available in the free edition

Our templates are developed to be compatible with all major browsers, tablets and phone devices.
They are tested using the following browsers:

Firefox Chrome Opera Internet Explorer Safari

Compatibility with Internet Explorer starts from version 8, IE7 is partially supported.

Mobile testing using:

i-phone and i-pad android

Tested using JAWS, NVDA, Window Eyes, Voiceover screenreaders.

Advanced style customization A Blue X mark, the feature is not available

You can easily customize the style and colors of the template.

Note that in the free edition only the basic style customization is available.

Installation GuideA green mark, the feature is available in the free edition

A step by step guide for the installation and configuration of our templates is provided. The guide will help you:

  • Install our templates
  • Add important menus and modules
  • Configure our templates
  • Add custom modules

The guide has detailed screenshots.

You can read our installation guide here: installation guide, EN

40 Custom Module Positions AvailableA green mark, the feature is available in the free edition

You can load your custom modules in 40 different positions. To see the layout structure, visit the Demo page of each template.

Quick access menuA green mark, the feature is available in the free edition

The quick access menu is very useful for screen readers and keyboard only navigation for jumping to the most important sections of the page.

Try it!

Use "Tab" and "Shift+Tab" to navigate the page, the menu is initially hidden.

Section headingsA green mark, the feature is available in the free edition

At the beginning of each section of content a descriptive heading is provided. These headings are useful to users using a screenreader for better navigating the page.

Try it!

Switch to "High contrast" layout: for each content section a meaningful heading is visible

Social media options A blue mark, the feature is not available in the free edition

Easily include share buttons and social media links into your website.

HTML5 ImplementedA green mark, the feature is available in the free edition

The template validates to the HTML5 standard. The structure of the page is semantically correct.

ARIA Landmarks and Roles ImplementedA green mark, the feature is available in the free edition

The ARIA landmarks and roles help increase the semantic of the page structure. They are also very useful to screen readers.

WAI-ARIA ImplementedA green mark, the feature is available in the free edition

The WAI-ARIA specification is implemented into the template. It specifies how to increase the accessibility of dynamic content in web pages.

Keyboard only navigationA green mark, the feature is available in the free edition

All page functionalities are available via keyboard.

Try it!

Try to use the keyboard instead of the mouse. For the majority of browsers hit "Tab" for moving forward and "Shift-Tab" for moving backwards.


WCAG 2.0 References

  • General Techniques for WCAG 2.0: Using a style switcher to provide a conforming alternate version
  • General Techniques for WCAG 2.0: Allowing users to provide preferences for the display of conforming alternate versions
  • General Techniques for WCAG 2.0: Providing a button on the page to increase line spaces and paragraph spaces
  • General Techniques for WCAG 2.0: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
  • General Techniques for WCAG 2.0: Providing a mechanism to remove full justification of text
  • General Techniques for WCAG 2.0: Aligning text on only one side
  • General Techniques for WCAG 2.0: Adding a link at the top of each page that goes directly to the main content area
  • General Techniques for WCAG 2.0: Ensuring keyboard control for all functionality
  • General Techniques for WCAG 2.0: Ordering the content in a meaningful sequence
  • General Techniques for WCAG 2.0: Making the DOM order match the visual order
  • General Techniques for WCAG 2.0: Providing heading elements at the beginning of each section of content
  • General Techniques for WCAG 2.0: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
  • General Techniques for WCAG 2.0: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
  • General Techniques for WCAG 2.0: Using percent for font sizes
  • General Techniques for WCAG 2.0: Using em units for font sizes
  • General Techniques for WCAG 2.0: Using liquid layout
  • General Techniques for WCAG 2.0: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
  • General Techniques for WCAG 2.0: Adding links at the top of the page to each area of the content
  • General Techniques for WCAG 2.0: Organizing a page using headings
  • General Techniques for WCAG 2.0: Using semantic elements to mark up structure
  • General Techniques for WCAG 2.0: Adding a link at the top of each page that goes directly to the main content area