ACC5. Difficulty accessing expandable/collapsed content – Mobile Digital Library Accessibility and Usability Guidelines (mDLAUG)

Definition

A situation that arises from difficulty accessing the collapsed content associated with an item or a collection due to inaccurate link for screen readers (text with tooltip) .

Factors Leading to the Situation

Inadequate support: misleading links

Guidelines

Ensure that the DL enables screen readers (text with tooltip) to follow the executed actions.
Ensure all interactive elements, like buttons and links, are clearly labeled with meaningful

Rationale for Suggesting the above Guidelines

The collapsed content displayed on a search result list aids BVI (text with tooltip) users in evaluating the relevance of an item and determining whether to explore it further. Presenting this information in a coherent and logical sequence is crucial to prevent users from having to search extensively for details. However, in a mobile environment, such information about an item or collection may be hidden under the interactive elements, such as a “more” button, due to space limitations. Therefore, it is crucial to ensure that interactive elements are clearly labeled and the links activating these interactive elements (e.g., “more” buttons) accurately lead to appropriate metadata (text with tooltip) for users on screen readers (text with tooltip) .

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Use aria-expanded (text with tooltip) and tabindex (text with tooltip) attributes in HTML to ensure that interactive elements are focusable in a logical order.
2.1. Label the “more” button as “More information about [Item Title]” so that users know exactly what additional content they will access.

Features Suggested for Users

1.1.1. Expand/Collapse (See example 1.1.1.a.)
2.1.1. Descriptive label

Examples of Best Practice

1.1.1.a. Focus shift using aria-expand

Focus shifting to the newly revealed content after expansion to ensure that the content is captured by the screen reader (text with tooltip) . When the “More about item” button is clicked, the scripts checks if the metadata (text with tooltip) is expanded (isExpanded) and updates aria-expanded attributes and toggles the metadata visibility (ACC5 Figure a1). If the metadata is expanded, focus shifts to the metadata container (metadata.focus()), ensuring screen readers can immediately announce the revealed content.

View and Copy code

<!html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Search Result with Metadata</title> 
 
    <style> 
 
        .metadata { 
 
            display: none; 
 
        } 
 
        .metadata[aria-expanded="true"] { 
 
            display: block; 
 
        } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="search-result"> 
 
        <h2>Item Title</h2> 
 
        <p>Brief description of the item...</p> 
 
        <button id="moreButton" aria-expanded="false" aria-controls="metadata1" tabindex="0"> 
 
    More about item 
 
</button> 
 
<div id="metadata1" class="metadata" tabindex="-1" aria-expanded="false"> 
 
    <p>Author: Jane Doe</p> 
 
    <p>Published: 2023</p> 
 
    <p>Category: Science Fiction</p> 
 
    <!-- More about item --> 
 
</div> 
 
<script> 
 
    const moreButton = document.getElementById('moreButton'); 
 
    const metadata = document.getElementById('metadata1'); 
 
    moreButton.addEventListener('click', () => { 
 
        const isExpanded = moreButton.getAttribute('aria-expanded') === 'true'; 
 
        moreButton.setAttribute('aria-expanded', !isExpanded); 
 
        metadata.setAttribute('aria-expanded', !isExpanded); 
 
        if (!isExpanded) { 
 
            metadata.focus(); // Move focus to the metadata section after expanding it 
 
        } 
 
    }); 
 
</script> 
 
    </div> 
 
</body> 
</Html>

This image showcases an example code using tab index attribute.

ACC5 Figure a1. An example code for using aria-expand

Examples of Poor Practice

1.1.1.b. Difficulty accessing expandable/collapsed content

Compared to the desktop environment, in the mobile environment, clicking “More” on the search result item shifted the focus to the rating of the next item, instead of the metadata of the current item (ACC5 Figure b1). “I’m going to hit this more. See, when I hit more, I thought it would give me more information, but it’s not. Maybe ok. Oh. Yes, it is. It’s just gives it above it, OK.” (AP15-LO) Clicking the more button in the search result list caused the focus to shift to the rating of the next item instead of the metadata of the current item. ACC5 Figure b1. Difficulty accessing expandable/collapsed content

Resources

- Ross, A. S., Zhang, X., Fogarty, J., & Wobbrock, J. O. (2018). Examining image-based button labeling for accessibility in Android apps through large-scale analysis. In Proceedings of the 20th International ACM SIGACCESS Conference on Computers and Accessibility. 119-130.
- Silva, J. S. R., Freire, A. P., & Cardoso, P. C. F. (2022, April). When headers are not there: Design and user evaluation of an automatic topicalisation and labelling tool to aid the exploration of web documents by blind users. In Proceedings of the 19th International Web for All Conference. 1-11.