« Back to Themes

Accessibility Guidelines

Introduction #

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. This page outlines the best practices for building an accessible portal in Liferay.

Hiding text #

Sometimes, you may want to hide some information in a label or a table but you may still want that information to be read by screen readers. In Liferay, we provide a css selector for doing this: aui-helper-hidden-accessible. It is different to the aui-helper-hidden because this selector will hide the text also from screenreaders.

Example:

<a href="#">Read more <span class="aui-helper-hidden-accessible"> about the Accessibility Guidelines page </span></a>

This link will only display "Read More" but users using a screenreader will get all the information they may need. }}}

HTML Validation vs Performance #

If you have a look at the templates (vm files) for Liferay portal, you may find that the javascript is placed after the </body> tag. This small change brings a lot of improvements in performance, but it does not validate HTML. So, you will have to modify the vm templates if you want to change this. There is also a theme in liferay plugins repository which already validates HTML called "WCAG 2.0".

By default, the classic theme and control panel theme have links at the very beginning of every page with "Skip to content" -- it automatically goes to the begining of the content (the anchor #main-content). You can add more links or change the existing one in your theme to fit your needs.

Opens in a new window#

If you use <aui:a> instead of <a> in your links, this will be done automatically for you. If your link opens a new window the html generated for your link will be like this:

<a target="_blank" href="#">
   <span class="taglib-text">RSS</span><span class="opens-new-window-accessible">(Opens New Window)</span>
</a>

All the liferay links opening a new window are like this, so you can modify the text for an image using css in the class opens-new-window-accessible.

0 Attachments
24795 Views
Average (0 Votes)
The average rating is 0.0 stars out of 5.
Comments
Threaded Replies Author Date
I would like to report the Italian Data... alex wom November 9, 2012 5:29 AM

I would like to report the Italian Data Protection Authority portal (http://www.gpdp.it) developed with Liferay and validated by http://validator.w3.org/ with XHTML + RDFa doctype.
Posted on 11/9/12 5:29 AM.