search

pkp / pkp-lib

The library used by PKP's applications OJS, OMP and OPS, open source software for scholarly publishing.
https://pkp.sfu.ca
GNU General Public License v3.0
297 stars 442 forks source link

[A11Y] Long description field for complex Issue cover images #9418

Open israelcefrin opened 10 months ago

israelcefrin commented 10 months ago

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

  1. Log in to the journal
  2. Click on "Issues"
  3. Click on the "create issue" button
  4. Roll down to the "Cover image" section
  5. Upload an image
  6. Click on save
  7. Edit the just created issue
  8. See the Alternate text field (single line)

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

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

israelcefrin commented 10 months ago

Just a suggested approach to Cover image rendering in the frontend, we could use the aria-describedbyparameter 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>
Devika008 commented 10 months ago

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