Definition
A situation that arises from difficulty recognizing collection titles due to the unseparated collection titles and alt text for thumbnails (text with tooltip) A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images. .
Factors Leading to the Situation
- Complex information presentation: inadequate semantics
Guidelines
- Ensure that collection titles and label/alt text for thumbnails (text with tooltip) A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images. are easily differentiated.
- Ensure that collection titles and alt text of thumbnails present different levels of collection description.
Rationale for Suggesting the above Guidelines
When a thumbnail (text with tooltip) A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images. and a label associated with a collection title are read together without any break or pause, it is challenging for BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs). users to recognize collection titles as collection descriptions are narrated alongside them without clear differentiation. Since BVI users cannot visually differentiate titles and thumbnail descriptions, adding a noticeable break between them can be helpful. Providing concise and meaningful collection titles and alt text of thumbnails also contributes to BVI users’ comprehension of collections in DLs.
Techniques and Methods to Comply with a Specific Design Guideline
1.1. Add a break between a collection title and its
thumbnail
(text with tooltip)
A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images.
.
1.2. Use a null (empty) alt value for a decorative
thumbnail
(text with tooltip)
A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images.
if it is part of a text link.
2.1. Assign concise and meaningful collection titles as well as alt text of thumbnails related to the description of collections.
Features Suggested for Users
1.1.1./2.1.1. Collection title/alt text (See example 1.1.1.a./2.1.1.a.)
1.2.1.
Thumbnail
(text with tooltip)
A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images.
and collection title as one clickable link (See example 1.2.1.a.)
Examples of Best Practice
1.1.1.a./2.1.1.a. Providing appropriate ARIA attributes to break thumbnails and collection titles
In RED2 Figure a1, HTML snippet structures a collection of items, each with a thumbnail and associated title. It includes ARIA (text with tooltip) The acronym for Accessible Rich Internet Applications. It is a set of attributes that define ways to make web content and user interface more accessible to people with disabilities. attributes to enhance accessibility for assistive technologies like screen readers.
View and Copy code
<div class="collection">
<h2 id="collection-title">Collection Title</h2>
<ul>
<li>
<a href="#" aria-labelledby="collection-title thumb1">
<img src="thumbnail1.jpg" alt="Thumbnail Description for Item" id="thumb1">
</a>
</li>
<li>
<a href="#" aria-labelledby="collection-title thumb2">
<img src="thumbnail2.jpg" alt="Thumbnail Description for Item 2" id="thumb2">
</a>
</li>
<!-- More items here -->
</ul>
</div>
RED2 Figure a1. An example code for aria-labelledby
1.2.1.a. Decorative image as part of a text link
RED2 Figure a2 shows when and how to treat decorative images (text with tooltip) An image that does not convey meaningful information to the content of a page, such as background images and borders. . This illustration of a crocus bulb is used to make the link easier to identify and to increase the clickable area but doesn’t add to the information already provided in the adjacent link text (of the same anchor). In this case, use a null (empty) alt value for the image.
RED2 Figure a2. An example of decorative image (Image source: W3C Web Accessibility Initiative, 2019)
Examples of Poor Practice
1.1.1.b. Difficulty distinguishing collection titles from thumbnails
RED2 Figure b1 presents a screenshot of a list of thumbnails (text with tooltip) A miniaturized version of a larger image that can be quick and easy viewing while browsing through a large collection of images. representing DL collections with the screen reader focus on the category “Politics.” The issue is that BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs). users cannot tell whether the following descriptions were about the “Politics” collection because there was no break between collection titles (“Politics”) and the alt text for their thumbnails (“white button with blue and read lettering”). “It doesn’t act like there’s a break between the description and what the category is…this one says white button with blue and red lettering politics explore so politics.” (AT24-ML)
RED2 Figure b1. Screenshot of difficulty distinguishing collection titles from thumbnails
Resources
- Digital Accessibility. (n.d.). Write helpful Alt Text to describe images.
- Tiwary, T., & Mahapatra, R. P. (2022). Web accessibility challenges for disabled and generation of alt text for images in websites using artificial intelligence. In 2022 3rd International Conference on Issues and Challenges in Intelligent Computing Techniques (ICICT), 1-5. IEEE.
- W3C. (2018). WCAG 2.1 Guideline 2.4 Navigable.
- W3C. (2019). Web Accessibility Initiative. Decorative Images.