[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