WCAG Accessibility issue on the <@liferay_ui["quick-access"]> taglib
Written By
Pooja Bhambani
How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!
While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.
Legacy Article
You are viewing an article from our legacy "FastTrack"
publication program, made available for informational purposes. Articles
in this program were published without a requirement for independent
editing or verification and are provided"as is" without
guarantee.
Before using any information from this article, independently verify its
suitability for your situation and project.
Issue
- (WCAG) accessibility issue on the <@liferay_ui["quick-access"]> taglib.
- Steps to reproduce:
1. Start Liferay 7.2 dxp-8 server, log in as Admin on Chrome browser.
2. Create a new dummy theme with Theme Generator & deploy it on the server.
3. Download the Axe extension for Chrome https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
4. Create a new page and add set the dummy theme to it: this has <@liferay_ui["quick-access"] contentId="#main-content" /> in its portal_normal.ftl
5. Press F12 and go to the very right side on tab "axe"
6. On the bottom-left frame, click on the "Analyze" button.
7. Among the results, you'll get one: "Ensures landmarks are unique (1)". Click on it
Result:
Issue description
Landmarks must have a unique role or role/label/title (i.e. accessible name) combination
More info
Element location
#jhfi_quickAccessNav
Element source
<nav class="quick-access-nav" id="jhfi_quickAccessNav"> <h1 class="hide-accessible">Navigation</h1> <ul> <li><a href="#main-content">Skip to Content</a></li> </ul> </nav>
To solve this violation, you need to...
Fix the following:
The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
Related node:
#ouom_quickAccessNav
More info: https://dequeuniversity.com/rules/axe/4.0/landmark-unique?application=AxeChrome
Environment
- Liferay DXP 7.2
- Liferay DXP 7.3
Resolution
- The observed behavior is a known issue and is fixed in liferay-fix-pack-dxp-9 for 7.2.
- The observed behavior is a known issue and is fixed in liferay-dxp-73-sp1.
- If the hotfix is required for this issue, please create a support ticket requesting a hotfix by attaching patch details.
-
Installing Fix Packs and Hotfixes on Liferay DXP will guide to installation of the hotfix in the respective environment.
Did this article resolve your issue ?