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.
<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 #
Go to content link #
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.