processing
[Content] Screen reader and visual presentation are inconsistent.
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
- Go to /
- 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 This ensures that links for hidden images are not focusable or announced. WCAG: None No response<!-- Before -->
<a href="...">
<div class="hidden">...</div>
</a>
<!-- After -->
<a href="..." class="hidden" aria-hidden="true" tabindex="-1">
<div>...</div>
</a>
Reference
What is your operating system?
Web browser and version
Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.
![welcome[bot] avatar](https://avatars.githubusercontent.com/in/4141?v=4 "Published by a pub.dev verified publisher"){kind=small}
@AR21SM I have fixed these issues in my pull request. These will be updated soon. Thank you so much for highlighting the issues! @raclim Please Review my PR & merge the PR to close the Issue.
Thanks for raising this issue!
This is similar to another issue that's open, which addresses translations on the Sign Up page. Ideally, we want to ensure that we do not rely solely on machine translations, and have native speakers vet and verify them as well. Since there's an open PR with translations already, please feel free to share it around or provide any suggestions on how we could potentially get more eyes on them!
