[Content] Screen reader and visual presentation are inconsistent.

[coseeian]

Title

[Content] Screen reader and visual presentation are inconsistent.

Description

There is an inconsistency between the screen reader output and the visual presentation. After implementing random homepage images, only one image is displayed visually at a time, but all image links remain in the DOM and are focusable. This causes a mismatch between what sighted users see and what screen reader users encounter, leading to confusion and unnecessary navigation stops.

Steps to Reproduce

1. Go to /
2. Locate to the following element:

• body > div > header > div > a:nth-child(2)
• body > div > header > div > a:nth-child(10)

Actual Behavior

Links corresponding to non-displayed images remain in the tab order and are announced by screen readers link role only, even though those images are hidden visually. A link that provides no information is focusable via the Tab key.

Expected Behavior

Only the link for the image currently displayed should be focusable. Links for hidden images must be removed from the tab sequence and hidden from assistive technologies. The link cannot receive focus when the randomly displayed image does not correspond to it.

Environments

No response

Suggested Fix

Apply the hidden class or appropriate ARIA attributes to the element itself, rather than to its child

. For example:

<!-- Before -->
<a href="...">
  <div class="hidden">...</div>
</a>

<!-- After -->
<a href="..." class="hidden" aria-hidden="true" tabindex="-1">
  <div>...</div>
</a>

This ensures that links for hidden images are not focusable or announced.

Reference

WCAG:

• 1.3.1 Info and Relationships
• 2.4.11 Focus Not Obscured (Minimum)

What is your operating system?

None

Web browser and version

No response