EXE1. Difficulty clearing a search box

Definition

A situation that arises from difficulty clearing previous search queries in the search box (text with tooltip) A design element that allows users to enter search terms into a blank field.  efficiently and effectively due to inaccessible or unavailable features or instructions.

Factors Leading to the Situation

  • Inappropriate labeling: unlabeled active elements (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags.  or features
  • Lack of features/functions/items/information: unavailable active elements or features

Guidelines

  1. Ensure that the process of clearing a search query from the search box (text with tooltip) A design element that allows users to enter search terms into a blank field.  is efficient and effective.

Rationale for Suggesting the above Guidelines

The suggested guideline provides simple and accessible solutions 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. By incorporating “Clear search query” feature and voice commands (text with tooltip) A feature that uses spoken instructions and hands-free interaction to control digital devices and improve accessibility. , BVI users can easily clear previous search queries and initiate new searches without assistance. This guideline promotes inclusive design, satisfying the specific needs of BVI users of DLs (text with tooltip) The acronym for digital library (DL) .

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Offer a button or icon to clear previous search query.
1.2. Use 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.  code to make clearing button/icon accessible.
1.3. Incorporate voice commands (text with tooltip) A feature that uses spoken instructions and hands-free interaction to control digital devices and improve accessibility. to clear the search box (text with tooltip) A design element that allows users to enter search terms into a blank field. .

Features Suggested for Users

1.1.1/1.2.1. “Clear search query” (See example 1.1.1.a. and 1.2.1.a.)
1.3.1. Voice commands (text with tooltip) A feature that uses spoken instructions and hands-free interaction to control digital devices and improve accessibility.  (See example 1.3.1.a.)

Examples of Best Practice

1.1.1.a. An accessible “Clear search query” feature

To clear a search query in a search box (text with tooltip) A design element that allows users to enter search terms into a blank field. , it is easier and more intuitive to click an explicit “Clear search query” feature than to highlight the query and delete it (EXE1 Figure a1). Search results page for 'social informatics' with 1,398,014 results. 'Clear search' feature allows refining the query and clearing search input field
EXE1 Figure a1. An example of clear search button with adequate label

1.2.1.a1. Providing ARIA code

EXE1 Figure a2 demonstrates the use of aria-label (text with tooltip) An HTML attribute that provides a text label for an object, such as a button.  to associate the clear search feature with an element containing a message like “Clear search box.” This ensures that screen reader users receive the relevant information about the feature.

View and Copy code 
<form role="search" id="searchForm">
    <div style="position: relative;">
        <input type="search" id="search" name="q" aria-label="Search query" oninput="toggleClearButton()">
        <span class="clear-button" aria-label="Clear search" onclick="clearSearch()"></span>
    </div>
    <button type="submit" aria-label="Submit search">Search</button>
</form>
 
<script>
    // Function to toggle the visibility of the clear button
    function toggleClearButton() {
        const searchInput = document.getElementById('search');
        const clearButton = document.querySelector('.clear-button');
        clearButton.style.visibility = searchInput.value.length > 0 ? 'visible' : 'hidden';
    }
 
    // Function to clear the search input
    function clearSearch() {
        const searchInput = document.getElementById('search');
        searchInput.value = ''; // Clears the input field
        toggleClearButton();    // Hide the clear button after clearing
    }
</script>
 

ARIA codes to clear search boxEXE1 Figure a2. An example code for aria-label related to clear search

1.3.1.a. Voice commands

Using mobile voice commands (text with tooltip) A feature that uses spoken instructions and hands-free interaction to control digital devices and improve accessibility. , users can delete search queries in the search box. In EXE1 Figure a3, Android users can use Google Gboard commands like “Delete last word” or “Clear all.” iOS users can employ Voice Control commands such as “Delete all” or “Delete paragraph.” Instructions on how to say a command on an Android device and a list of voice commands about text deletion on iOS devices.EXE1 Figure a3. List of voice command associated with text deletion

Examples of Poor Practice

1.1.1.b1. Difficulty clearing a search box

As shown in EXE1 b1, the participant had difficulty efficiently clearing the search query because there was not a button available to directly clear search terms present in the search box. “[enters search box] Trying to clear the search. There doesn’t seem to be a clear search button.” (S12-B-M. App)

This image shows a search page where a user was typing "Womens r" in the search box and cannot find a clear search button.

EXE1 Figure b1. Screenshot of difficulty clearing a search box

1.1.1.b2. Difficulty clearing a search box

According to EXE1 Figure b2, there is no “clear search” feature on the search interface, making it 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 clear searches made.

This image shows a search page where a user searched for "Artificial Intelli" in the search box and cannot find a clear search feature.

EXE1 Figure b2. Screenshot of difficulty clearing a search box

Resources

See also: