Accessibility bug: Inconsistent Screen Reader Interpretation in caMicroscope Regarding WCAG 2.1 Standards

[barchakuz]

Description The caMicroscope interface, when accessed using a screen reader extension, exhibits inconsistent and incomplete information dissemination. This inconsistency poses significant challenges for users with visual impairments, hindering their ability to comprehend various interface elements and functionalities. Upon investigation, it has been determined that the root cause of this issue lies in coding deficiencies within the caMicroscope website. These coding practices do not adhere to global standards and search engine guidelines, thereby impeding the screen reader's capability to accurately define and describe every object on the website.

To Reproduce Steps to reproduce the behavior:

1. Lauch caMicroscope in docker and go to landing page.
2. Activate the screen reader extension to facilitate accessibility for individuals with visual impairments.
3. Initiate navigation through the interface by traversing different sections such as image galleries, tools, and navigation menus.
4. Observe and document instances where the screen reader fails to provide comprehensive or accurate information about the interface elements, including labels, states, and available actions.

Expected behavior According to WCAG 2.1 standards and global accessibility guidelines, the screen reader should proficiently convey all pertinent information regarding the interface components. This includes precise descriptions of labels, states (e.g., active or inactive), and available actions associated with each element. Such adherence ensures that users with visual impairments can seamlessly navigate and interact with the caMicroscope interface.

Screenshots

https://github.com/camicroscope/caMicroscope/assets/66128370/8b0886c5-d723-479b-845e-7cfb30811e6b

Issue in video During testing, it was observed that when the screen reader reaches the section containing the post featured image on the caMicroscope interface, it only identifies it as a generic "section" without specifying the image or indicating which blog post it belongs to. This lack of contextual information poses a significant challenge for blind users or those with visual impairments, as it hinders their ability to understand the content and its relevance within the interface.

Key points to note include

• Identification Issue: The screen reader fails to provide specific information about the post featured image, merely identifying it as a "section" without further detail.
• Lack of Context: Blind users or individuals with visual impairments are unable to discern the image's relevance or its association with a particular blog post, leading to confusion and frustration.
• Accessibility Concern: This oversight contravenes the principles of inclusive design and accessibility outlined in WCAG 2.1, which emphasize the importance of providing clear and meaningful information to all users, regardless of their abilities.

Laptop:

• OS: Windows 10
• Browser Chrome
• Version 22.1

Additional context Despite utilizing the most recent version of the screen reader extension, persistent inconsistencies in the interpretation of interface elements across different sections of the caMicroscope website are observed. These discrepancies signify a fundamental non-compliance with WCAG 2.1 accessibility standards due to coding deficiencies that do not align with global standards and search engine guidelines. Urgent attention and remedial action are warranted to rectify these accessibility deficiencies and ensure equitable access to the caMicroscope platform for all users.