Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
Clay / Lexicon Accessibility Issues
Have a look at the attached screenshots.
The default Liferay UI components seem to be built on top of inaccessible styles? Is this a known issue? Are these visual design issues targeted for improvement? Is there a way we could help?
In addition to attractive, responsive design, we strive to meet WCAG 2.0 AA or AAA standards. Indeed, it is our requirement. Anyone else notice these issues?
Thanks for this report. I agree our color choices aren't the best for visually impaired users. Unfortunately, I don't think we can change the colors in Atlas to be WCAG 2.0 compliant at this point in the project. There is always the option to fall back to Bootstrap 3's colors with Lexicon Base (Styled theme in 7.0). It's better, but probably won't meet your requirements 100%.
The best option at this point is to customize the colors to meet your requirements. We have mapped the colors for each component to a Sass variable that can be overridden through the file _aui_variables.scss in 7.0. You just need to add that file to your theme in the same directory as _custom.scss and make sure to add (at the beginning of the file):
$FontAwesomePath: "aui/lexicon/fonts/alloy-font-awesome/font";
$font-awesome-path: "aui/lexicon/fonts/alloy-font-awesome/font";
$icon-font-path: "aui/lexicon/fonts/";
You will have to do all the color calculations and set them yourself. Something that we can add to Lexicon 1.x is a Sass function that will color the text for you based on the background-color of the component or vise versa. Bootstrap 4 has added this and we can easily copy it over. See https://github.com/twbs/bootstrap/blob/v4-dev/scss/_functions.scss#L52.
How it would work is:
$alert-success-bg: #DDF3D5;
$alert-success-text: color-yiq($alert-success-bg);
.alert-success would then have either a dark (#222) or a light (#FFF) text color. We might be able to add an additional block to return some color based on a formula. You will still need to set the variables, but it removes one variable you need calculate colors for. The color-yiq function can be added to your custom theme as well, just add the function to _aui_variables.scss and make sure the variables are declared after the function.
One thing thats been on the back burner is something to help ease the pain of learning/using the Sass variable api. It's pretty massive. I might be able to put together some kind of template _aui_variables.scss file that lists all the variables that you can customize and in the proper order later this week. I will get back to you.
I know Liferay follows all the web standards for backend and frontend (proud) and I am surprised if this is the area where Liferay lacks in following web standards?
Thanks for this report. I agree our color choices aren't the best for visually impaired users. Unfortunately, I don't think we can change the colors in Atlas to be WCAG 2.0 compliant at this point in the project. There is always the option to fall back to Bootstrap 3's colors with Lexicon Base (Styled theme in 7.0). It's better, but probably won't meet your requirements 100%.
You are welcome. I'm not sure I understand this part of your response, though. The issues I am pointing out are clear, blatant violations and are bad for even sighted users (as pointed out by Himanshu, as well) and tightly woven throughout the UI. You know you have current government and education sector clients who expect accessibility in the default UI that is exposed throughout the system. Further, sales staff @ Liferay and beyond are assuring clients that it is easy to build an accessible portal or website with the shipped Liferay product codebase. The thought of adding all this extra UI work on top of an arduous upgrade process already is making me tired before starting.
The choices made by the UI team are clearly very flawed from an accessibility perspective and should be seriously revisited to address the issues we are finding so quickly. Why is it impossible for you to "change" / retrofix the bg/foreground issues we are pointing out? You describe how the changes can be made. Why wouldn't Liferay want to strive to improve this situation - especially since many more LR7 / DXP installations are yet to come? Are you saying Liferay won't fix the issues moreso than "can't" fix the issues...?
I certainly would appreciate any / all of the follow-up tips / offers you have made to make it easier for us to address contrast ratio issues throughout Liferay 7 / DXP.
Also, thank you for escalating the concerns, since they would likely be shared and appreciated by many new and longtime Liferay users / supporters.
As Patrick points out, you are totally right and we are aware of this issue.
Our UX team has been working hard on defining a new and more accessible palette for upcoming versions that adheres to all accessibility contrast-ratio requirements. You can take a look at what's coming at https://lexicondesign.io/docs/designPrinciples/colors.html and check the related patterns to verify this.
We are also working on other initiatives to showcase best practices and examples on how to properly build accessible sites with Liferay as well as introducing automated accessibility checks into our development cycle to make sure these don't go unnoticed.
As the current release of Liferay Portal goes, there are some reasons why we haven't actively pushed a fix for this so far:
- The default classic theme is not really meant for a production offering, so we don't expect it to hit real sites and users
 - A product release involves also a lot of documentation (screenshot) generation both on our side as well as all of our partners and customers. We try to minimize UI changes as much as possible so materials are not outdated or confusing and customers and partners alike are forced to re-generate them.
 
While none of these really excuse the lack of proper color contrast on the default themes, I hope they bring some light into the reasons why we are orienting the work towards future releases.
That being said, I'll reach out to some stakeholders again to see if we could get a palette update out to improve it even if only marginally.
Hi Daniel!
...
We are also working on other initiatives to showcase best practices and examples on how to properly build accessible sites with Liferay as well as introducing automated accessibility checks into our development cycle to make sure these don't go unnoticed.
...
That being said, I'll reach out to some stakeholders again to see if we could get a palette update out to improve it even if only marginally.
Any update from Liferay regarding improvements to inaccessible lexicon / clay contrast ratios, visibility flaws? Any example theme available to illustrate how Liferay 7/DXP can produce an accessible website theme, including Admin / control panel usage? Can "Classic" be revamped to be accessible?
Thank you for any updates to this last set of replies from Liferay staff.
What happened to my attachments to this thread? Also, are there any updates from Liferay staff regarding the accessibility situation?
Hi Daniel,
We had an issue with our Forum upgrade. Attachments should be working again now. Sorry for the inconvenience.
Hi Daniel, I'm just becoming aware of this thread. Let me ask the team for a briefing of the pros/cons and LOE. I'm not technical enough to gauge immediately.
Reading the thread so far, I imagine we could live with outdated documentation screenshots, for example, if we gain on accessibility.
I agree that the product gains on accessibility should be the priority. Please let me know how I might help.
Hi Daniel -
I will contact you directly about this and the other issues you have reported. Like Bryan, I, too, was just made aware of this, and we will work with Engineering to make things right.
Thank you,
Josh
I look forward to hearing from you.
https://liferay.dev/forums/-/message_boards/message/113957135