Understanding Accessible Design

Liferay DXP supports accessibility compliance out of the box with a range of features and capabilities. As an eyewear manufacturer, Clarity understands that individuals with visual impairments make up a significant portion of their target audience. For Clarity, compliance with accessibility standards goes beyond functionality; it aligns directly with the company’s mission and values.

In this lesson, you’ll learn about Liferay accessibility features, along with best practices for applying them.

Complying with Global Accessibility Standards

Liferay is designed to comply with the Web Content Accessibility Guidelines (WCAG), an international standard for accessible web content. WCAG is built around four principles of accessibility:

Perceivable: Information and user interface components must be presentable to users in ways they can perceive (i.e., they cannot be invisible to all their senses).
Operable: User interface components cannot require interaction that a user cannot perform.
Understandable: Users must be able to understand the information presented along with the operation of the user interface.
Robust: Web content must support reliable interpretation by a wide range of user agents, including assistive technologies.

Out of the box, Liferay provides functionality that upholds these principles. Native accessibility features include keyboard navigation, screen reader compatibility, the page audit tool, and the accessibility menu.

For users who cannot rely on a mouse, many Liferay components are built to be fully accessible via keyboard. Users can navigate menus and sub-menus, interact with forms and buttons, and access modals and dialogs all without a mouse.

Liferay supports Accessible Rich Internet Applications (ARIA), a set of roles and attributes for developing accessible web content and applications. By leveraging ARIA attributes, Liferay becomes compatible with popular screen reading tools, which provide

Clear labels and descriptions for interactive elements
Logical navigation orders to help users understand page structure
Accessible alternative text for images and multimedia.

Page Auditing

The page audit tool uses the Google PageSpeed Insights service to analyze Liferay pages and provide recommendations for improving accessibility and search engine optimization. Specifically, it evaluates pages for low contrast ratios and the presence of alternate text for images and inputs. Note that the page audit tool only works with public web pages.

While most accessibility configurations are propagated globally, Liferay provides individual users with the option to toggle specific settings using the accessibility menu:

Underlined Links: Add an underline to all links to increase their visibility.
Increased Text Spacing: Increase horizontal spacing between text characters to improve readability.
Expanded Text: Expand all truncated text to show complete messages by default.
Reduced Motion: Hide animations, transitions, and other movement effects in the user interface.

Making Design Elements Accessible

Liferay’s built-in themes and templates leverage the above features to follow accessibility best practices. You can modify styles and layouts for these elements without compromising your WCAG compliance. Leverage style books to define accessible design rules for typography, colors, and spacing.

While Liferay provides accessibility compliance for out-of-the-box design elements, it does not provide the same automatically for any fragments, templates, client extensions, or plugins that you create from scratch. For designers and developers implementing custom elements, accessibility remains just as important. Here are some best practice considerations:

Use semantic HTML. Screen readers and other assistive technologies expect content to have a predictable structure. They navigate the document object model (DOM) of the code to provide users with a perceivable description of the content. To avoid confusing these tools, developers should use semantic elements to define a clear, legible structure for web pages.
Use ARIA attributes selectively. ARIA is a powerful tool, but it can actually create more accessibility issues if misused. Avoid using ARIA roles and attributes where well-defined semantic HTML can do the job. ARIA is intended to complement structural HTML, not replace it.
Enable keyboard navigation whenever possible. Alternatives to mouse navigation are often overlooked in digital experiences.
Use high contrast color schemes. Higher contrast ratios are more perceivable and operable for the visually impaired.

Conclusion

Liferay provides a wide range of native features for improving accessibility and complying with WCAG standards. These features help organizations to create accessible content and experiences efficiently. Keeping accessibility best practices in mind is even more important when developing custom elements, interfaces, and applications.

Next, you’ll update one of Clarity’s fragments to make it more accessible.