Open israelcefrin opened 10 months ago
Just a suggested approach to Cover image rendering in the frontend, we could use the aria-describedby
parameter when including long description of the image.
E.g:
<img src="cover-with-photo.jpg"
alt="Cover issue Volume 1 No 1 includes a picture"
aria-describedby="cover-description">
[…]
<p id="cover-description">
This is the long description of the cover image.
We can use HTML or even words in any other language like <span lang="fr_CA">Français</a>.
Screen readers will be able to identify it and pronounce it correctly.
</p>
The option of having a required Alternative Text and an optional long description would work wonders for us. I believe that when we show it as a part of the UI, adding the Alternative Text and then giving a link to the Long description would be a better way of going about things
Issue Description
Some journals may upload complex images to the Issue cover image which may include: long texts, long titles, photos, quotes, by-lingual texts, etc... Currently, the ALT parameter is limited to any use of markup, and using a screen reader doesn't allow to stop the reading or return to a certain point of the text on this parameter. Hence, including long descriptions to this field is not recommended because can turn into a struggle to consume the content.
How to reproduce / Current behavior
What application are you using?
OJS version 3.4.0
Stack used
Testing method
Action
Adding an optional "Long description" field can remediate this accessibility issue and provide a huge enhancement for image content description. This new field would be presented after uploading an image and would remain optional with instructions to be filled in when a cover image is complex and editors are willing to provide a full description. The field should also provide the shifting locale option to describe the image in every language available in the journal.
To achieve full accessibility compliance to the element it will be necessary to adjust the website theme to include this description in somehow accessible to screen reader users and non-screen reader users, e.g.: collapsable, modal window, footnote, etc ...
W3C provides examples of long description approach that might be useful to discuss which fits as a best solution to use on this use case: https://www.w3.org/WAI/tutorials/images/complex/#example-1-description-containing-structured-information
Additional information
Current view:![image](https://github.com/pkp/pkp-lib/assets/4992902/b95efb9d-c960-420a-a0f4-42b7f9334d6e)
Remediation mockup: The WYSIWYG text editor can be simpler since it means to allow a few markup tags as paragraphs, list items, and links.![image](https://github.com/pkp/pkp-lib/assets/4992902/5c411a5e-ae1b-4456-be42-f0a5e2b233bd)