Clay / Lexicon Accessibility Issues

RE: Clay / Lexicon Accessibility Issues

2019-06-13T18:54:19Z

Now after a year asking same question related to WCAG 2.1
https://liferay.dev/forums/-/message_boards/message/113957135

RE: Clay / Lexicon Accessibility Issues

2018-07-10T15:08:46Z

I look forward to hearing from you.

RE: Clay / Lexicon Accessibility Issues

2018-07-10T15:08:23Z

I agree that the product gains on accessibility should be the priority. Please let me know how I might help.

RE: Clay / Lexicon Accessibility Issues

2018-06-22T13:04:44Z

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

RE: Clay / Lexicon Accessibility Issues

2018-06-22T02:00:52Z

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.

RE: Clay / Lexicon Accessibility Issues

2018-06-21T22:48:03Z

Hi Daniel,

We had an issue with our Forum upgrade. Attachments should be working again now. Sorry for the inconvenience.

RE: Clay / Lexicon Accessibility Issues

2018-06-21T15:16:39Z

What happened to my attachments to this thread? Also, are there any updates from Liferay staff regarding the accessibility situation?

RE: Clay / Lexicon Accessibility Issues

2018-02-23T16:00:14Z

Chema Balsas:

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.

RE: Clay / Lexicon Accessibility Issues

2017-12-12T11:13:07Z

Hi Daniel!

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.

RE: Clay / Lexicon Accessibility Issues

2017-12-05T18:33:53Z

Thank you, kindly, Patrick for your timely and thoughtful responses.

Also, thank you for escalating the concerns, since they would likely be shared and appreciated by many new and longtime Liferay users / supporters.

RE: Clay / Lexicon Accessibility Issues

2017-12-05T18:30:02Z

I agree with you guys. This should be addressed in one form or another. This is a decision that affects many departments internally and I'm not in the position to decide that. I'll get someone to chime in with more details. Hypothetically, if I was given the go to change the colors, it wouldn't be too hard. My gut feeling is we won't be able to and what we would provide is a WCAG compliant theme you can install AAA or AA or both.

RE: Clay / Lexicon Accessibility Issues

2017-12-05T17:26:08Z

Thank you, Patrick for replying and offering some insight into the root of the problems. \

Patrick Yeo:

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.

RE: Clay / Lexicon Accessibility Issues

2017-12-05T06:33:26Z

While reading Liferay documentation I found visibility issue because of very light weight fonts and I reported it on Forums. Now on the new documentation site fonts are better but with Liferay 7 I am still facing the same problem, however I know that we can change that through some customization(Thanks to Liferay) but still I feels it to be a very basic thing that shouldn't needs to be fixed out of the box.

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?

RE: Clay / Lexicon Accessibility Issues

2017-12-04T21:46:02Z

Hey Daniel,

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.

Clay / Lexicon Accessibility Issues

2017-12-04T14:45:01Z

I started exploring the upgrade path > Liferay 7 and, in particular, took a quick look into UI / theme changes and accessibility. In the first few minutes of testing using https://webaim.org/ WebAiM’s WAVE Accessibility tool, I found 90-100% failure rates on the contrast ratio for several key components.

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?