[A11Y] Cover image has neither an accessible name nor is marked as decorative or redundant

[israelcefrin]

Issue Description

Cover image of issue in the homepage, when missing ALT description, they are not marked as decorative only neither are hidden from the DOM tree. The missing text is also a missing link text since there is any other descriptive text available to serve as text description to the link tag.

How to reproduce / Current behavior

1. Access OJS Demo - Immersion journal: https://ojs34.demo.publicknowledgeproject.org/index.php/immersion/index
2. Scroll down to the "Current Issue - Volume 1, No. 2"
3. Inspect the Cover image
4. Notice the ALT description missing

What application are you using?

OJS version 3.4

Stack

• Device: Laptop
• OS: MacOS Sequoia
• Browser: Firefox

Testing method

• Automated test: Browser plugin - IBM Equal Access Accessibility Checker (Firefox)

Action

1. If the image conveys meaning, make the ALT required on the dashboard and provide a non-empty accessible name when showing it. However, it will also require to remove the HYPERLINK tag container of this image since it will not have a link text at all.

Or

2. Use an aria-label or aria-labelledby to provide a short description based on the Issue title.

Or

3. If the Issue cover image is meant to be decorative only or the ALT has to be optional, add an empty string as the attribute's value (e.g., ) or set the role="presentation" attribute to the <img> tag and it will also require to remove the <A HREF> that is encapsulating this image.

Additional information

Current chunk of code in the page

<a
    href="https://ojs34.demo.publicknowledgeproject.org/index.php/immersion/issue/view/38"
    class="col-md-2">
<img
    class="img-fluid"
    src="https://ojs34.demo.publicknowledgeproject.org/public/journals/14/cover_issue_38_en_US.jpg">
</a>

[kaitlinnewson]

Hi @israelcefrin, I think the cover images would be considered decorative, as all of the information about the issue is in the page text already, and the hyperlink it uses is included elsewhere on the page. Would you agree with that?

[israelcefrin]

Hello @kaitlinnewson , if the image is merely decorative then we can remove the container link tag <a href="... markup from it and add an empty alt="" to force screen readers to ignore it.