[Deque Analysis] Faded text (for long abstracts / text blocks) may be seen as insufficient color contrast & as "content lost" on small screens

[tdonohue]

Serious: This issue results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority.

Deque Analysis Summary

Two "serious" issues with faded text:

1. Faded text triggers insufficient color contrast errors
When viewing a list of Items, sometimes faded text will appear (for long lists of authors, or a long description/abstract). This is most easily seen in the Search Results (especially the grid view): https://demo7.dspace.org/search?spc.page=1&query=test&spc.sf=score&spc.sd=DESC

This text's purpose is to signify that additional text is available -- if you click on the text, it will expand to show the entire text.

However, this faded text was noted in "manual" testing by the Deque team as having color contrast issues. Obviously, this is expected behavior for text that fades away....it is not meant to be entirely readable.

Deque issue ticket IDs: 472737

2. Faded text triggers "content lost" errors
When testing on small screens (320px width) or zoomed at 200%, this triggers more text to be faded. The text again can still be clicked to be viewed, but it was noted by the Deque team as "content lost"

See for example these ticket IDs (all include screenshots): 470760, 470757, 470752

Recommended Fix

Unclear how/whether this should be resolved (labeling as low priority), as this almost seems like a "false positive". However, I wanted to capture these results from the Deque Analysis in case we find it more problematic with additional testing.

We might consider thinking of a way to make it more obvious that the text is clickable to expand....that may make it clear that the fading text is purposeful & that clicking it will "unfade it" and show all the content.

Alternatively, we could consider replacing the "fading text" with a simple three dots (ellipsis) ..., which is a more common representation of "text overflow" (e.g. text-overflow: ellipsis is valid in CSS: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp). Or we could clip the text at the nearest space (i.e. not clip mid-word, but between words) without fading.

More Information / Tools

• As necessary, see mentioned Issue IDs in our assessment results (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues
• Consider using Deque's free Chrome plugin to check your work
• Deque's color contrast tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

[tdonohue]

@artlowel : I'd appreciate your feedback here...but this is low priority as I think it may be a "false positive" (it was only found from manual testing, not automated, so it might be confusion over how this feature works). That said, if you have feedback or ideas, let me know.

[DanGastardelli]

Good afternoon @tdonohue!

We at Neki-it made 2 models for analysis, follow the models below:

Example 1 (changing button text and changing position)

Example 2 (just changing button text)

Would any of them meet the demand?

Waiting for feedback!

[tdonohue]

@DanGastardelli : I'm not sure I know of the best solution here, so I'm finding it hard to recommend a next step. As you can tell from the ticket description, there was not a clear "solution" chosen yet.

Personally, though, I don't think changing the text from "Show more" to "Read more" provides any significant improvement. Other ideas have already been suggested in #2573. But, the core issue wasn't in the name of the link..it was that the link's purpose and the faded text were unclear to the accessibility analyzer.

I'm also worried that this ticket may overlap with #3073, which is already assigned. So, we may want to wait on the solution to #3073 before doing something simple like changing the text of this link.

[atarix83]

@tdonohue

i think replacing the "fading text" with a simple three dots (ellipsis) ... is the best solution. i'd leave the show more button as is

[atarix83]

@tdonohue

We can work on this. it's about 8h

[tdonohue]

Thanks @atarix83 ! I'll assign it to you and add the estimate