FIL1. Difficulty finding/locating an icon-based search feature – Mobile Digital Library Accessibility and Usability Guidelines (mDLAUG)

Definition

A situation that arises from difficulty finding a search field (text with tooltip) due to the inappropriate label and complexity of interacting with an icon-based search feature (text with tooltip) .

Factors Leading to the Situation

Complex information presentation: illogical structure (text with tooltip)
Inadequate features/functions: complex interactions
Inappropriate labeling: uninformative active element (text with tooltip) or feature labels
Inadequate help information: insufficient contextual help
Unclear instruction: inefficient help feature (text with tooltip)

Guidelines

Ensure that an icon-based search feature (text with tooltip) is easily discoverable and recognizable with an appropriate label.
Ensure that the access to an icon-based search feature (text with tooltip) is simple.

Rationale for Suggesting the above Guidelines

BVI (text with tooltip) users often locate the search field by using shortcuts (text with tooltip) such as the VoiceOver Rotor (text with tooltip) option for “Form Controls.” However, when the search field (text with tooltip) is hidden behind the search toggle icon, they need to explore the page and interact with the icon to find the search box (text with tooltip) . This can be frustrating when the label of the search feature icon is not adequately descriptive, making it difficult to understand functionality at a glance. The suggested guidelines ensure that BVI users can easily find and access icon-based search features (text with tooltip) .

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Use aria-label (text with tooltip) to describe the function and purpose of the icon-based search features (text with tooltip) .
2.1. Automatically activate the search input field (text with tooltip) when the focus reaches the icon-based feature using the “focus” code.

Features Suggested for Users

1.1.1./2.1.1. Icon-based features (See example 1.1.1.a./2.1.1.a.)

Examples of Best Practice

1.1.1.a/2.1.1.a. Using aria-label and focus method

The search toggle button (text with tooltip) is clearly labeled with an aria-label (text with tooltip) indicating its purpose in FIL1 Figure a1 code example It labels the search-related elements, making it easier for users to locate them. When the toggle button receives focus, the search input field (text with tooltip) is automatically activated, reducing interaction steps.

View and Copy code

<script>
    function toggleSearch() {
        var searchInput = document.getElementById('search-input');
        if (searchInput.style.display === 'none') {
            searchInput.style.display = 'block';
            searchInput.focus();
        } else {
            searchInput.style.display = 'none';
        }
    }
</script>
 
<!-- Search toggle button with ARIA label -->
<button onclick="toggleSearch()" aria-label="Toggle search" aria-expanded="false">Search</button>
 
<!-- Search input field -->
<input type="text" id="search-input" style="display: none;" aria-label="Search input">
 
<script>
    function activateSearchField() {
        // Assuming 'toggleButton' is the ID of the search toggle button
        var toggleButton = document.getElementById('toggleButton');
        // Assuming 'searchInput' is the ID of the search input field
        var searchInput = document.getElementById('searchInput');
        toggleButton.addEventListener('focus', function() {
            // Set focus on the search input field
            searchInput.focus();
        });
    }
</script>

ARIA and focus method codes to automatically activate search input field when the toggle button receives focus FIL1 Figure a1. An example code for toggle button

Examples of Poor Practice

1.1.1.b1. Difficulty finding/locating an icon-based search feature

FIL1 Figure b1 illustrates the confusion with a label of the icon-based search feature (text with tooltip) . The search feature icon was labeled as a search toggle, which participants found difficult to understand. They were uncertain whether this label indicated a button to access the search field (text with tooltip) . “Where is the search box (text with tooltip) again? Now it doesn’t want to show up. Let’s see if I can get the search box. It must not be there … Now the search button doesn’t want to…show up. The toggle that I don’t want to mess with again.” (S2-B-M)

This image shows confusion with the label of an icon-based search feature in a mobile environment compared to the desktop version.

FIL1 Figure b1. Screenshot of difficulty finding/locating an icon-based search feature

1.1.1.b2. Difficulty finding/locating an icon-based search feature

Due to the small size, the search field is hidden under the search toggle button (text with tooltip) (FIL1 Figure b2). To access the search field, participants must first interact with the search toggle button, navigate past the filter options, and then enter the field to perform their search. “I think because there’s a search at the top. I think if you could double tap on that and have it open up and you could type something in and then you could access, maybe the filters like searching by date or searching by title or something. That seems like it would make more sense to me, instead of having to essentially what you have to do is you have to hit the search toggle and then hit search Library of Congress and then it brings it up.” (AP15-LO)

This image shows how difficult it is to find a search field with an icon-based search feature labeled search toggle.

FIL1 Figure b2. Screenshot of difficulty finding/locating an icon-based search feature

Resources

Ara, J., & Sik-Lanyi, C. (2022). Artificial intelligence in web accessibility: Potentials and possible challenges. In Proceedings of IAC, 174 – 178.
Li, J., Kim, S., Miele, J. A., Agrawala, M., & Follmer, S. (2019, May). Editing spatial layouts through tactile templates for people with visual impairments. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (pp. 1-11).