ACC6. Difficulty accessing a query suggestion

Definition

A situation that arises from difficulty accessing search query auto suggestions (text with tooltip) A search feature that a search engine predicts what a user would query and then provides a list of suggestions as a user types.  due to required complex interactions.

Factors Leading to the Situation

  • Inadequate features/functions: complex interactions

Guidelines

  1. Ensure feedback is in place to notify users of the availability of auto suggestions (text with tooltip) A search feature that a search engine predicts what a user would query and then provides a list of suggestions as a user types. .
  2. Ensure easy access to query term (text with tooltip) A term that users enter to query information based on their needs.  suggestions to assist users in completing their search queries.

Rationale for suggesting the above Guidelines

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 may encounter challenges when accessing search query suggestions (text with tooltip) A recommended query that predicts the rest of the search terms when keyed in.  while using DLs (text with tooltip) The acronym for digital library (DL) . This is due to lack of real-time feedback for the availability of query suggestions and complex steps needed to interact with the suggestions. Therefore, the recommended guidelines propose providing instant feedback and accessible query suggestions to assist users in more effectively completing their searches.

Techniques and Methods to Comply with a Specific Design Guideline

1.1/2.1. Utilize aria-live (text with tooltip) An HTML attribute that allows assistive technology to receive notifications when error messages are added to a Live Region container.  to provide real-time feedback when formulating or modifying search queries.
1.2. Offer help regarding how to access and select specific auto suggestions (text with tooltip) A search feature that a search engine predicts what a user would query and then provides a list of suggestions as a user types. .

Features Suggested for Users

1.1.1/2.1.1. Real-time feedback (See example 1.1.1.a. and 2.1.1.a.)
1.2.1. Help information

Examples of Best Practice

1.1.1.a. Providing “real-time query suggestions”

ACC6 Figure a1 illustrates example codes on using JavaScript to create a real-time query suggestion. The code below implements a suggestion dropdown feature, with accessibility support, for an input field. It includes features such as fetching suggestions, rendering them dynamically, and managing their accessibility attributes for screen readers.

View and Copy code 
// Clear previous suggestions 
 
suggestionsContainer.innerHTML = ''; 
 
if (query.length > 0) { 
 
    // Get suggestions (mocked API used here with a static array) 
 
    const response = await fetchSuggestions(query); 
 
    const suggestions = response.suggestions; 
   
    suggestions.forEach((suggestion, index) => { 
 
        const listItem = document.createElement('li'); 
 
        listItem.textContent = suggestion; 
 
        listItem.tabIndex = -1; // Make list items focusable 
 
        listItem.setAttribute('role', 'option'); 
 
        listItem.setAttribute('aria-selected', 'false'); 
 
 
        listItem.addEventListener('click', () => { 
 
            document.getElementById('query').value = suggestion; 
 
            suggestionsContainer.innerHTML = ''; 
 
        }); 
 
 
        listItem.addEventListener('keydown', (event) => { 
 
            if (event.key === 'Enter') { 
 
                document.getElementById('query').value = suggestion; 
 
                suggestionsContainer.innerHTML = ''; 
 
            } 
 
        }); 
 
 
        suggestionsContainer.appendChild(listItem);   
 
        // Announce the suggestion via TTS 
 
        readSuggestion(suggestion); 
 
    });  
 
    suggestionsBox.setAttribute('aria-expanded', 'true'); 
 
} else { 
 
    suggestionsBox.setAttribute('aria-expanded', 'false'); 
 
}  
 
// Mocked API response 
 
async function fetchSuggestions(query) { 
 
    return { 
 
        suggestions: ['apple', 'banana', 'cherry', 'date', 'elderberry', 
 
                      'world war two', 'world war III', 'independence of declaration'] 
 
            .filter(item => item.includes(query)) 
 
    }; 
 
}  
 
function readSuggestion(suggestion) { 
 
    // Use TTS to read out the suggested item 
 
    const utterance = new SpeechSynthesisUtterance(suggestion); 
 
    speechSynthesis.speak(utterance); 
 
}   
 
document.getElementById('query').addEventListener('keydown', (event) => { 
 
    const suggestions = Array.from(document.querySelectorAll('suggestions li')); 
 
    let currentIndex = suggestions.findIndex(item =>  
 
        item.getAttribute('aria-selected') === 'true');  
 
    if (event.key === 'ArrowDown') { 
 
        currentIndex = (currentIndex + 1) % suggestions.length; 
 
    } else if (event.key === 'ArrowUp') { 
 
        currentIndex = (currentIndex - 1 + suggestions.length) % suggestions.length; 
 
    } else if (event.key === 'Escape') { 
 
        suggestionsContainer.innerHTML = ''; 
 
        return; 
 
    } 
   
 
    suggestions.forEach((item, index) => { 
 
        item.setAttribute('aria-selected', index === currentIndex ? 'true' : 'false'); 
 
        if (index === currentIndex) { 
 
            item.focus(); 
 
        } 
 
    }); 
 
});
 

ARIA codes to create a real real-time query suggestionACC6 Figure a1. An example code for query suggestions

2.1.1.a. Auto-complete options

ACC6 Figure a2 illustrates the auto-complete feature, which assists users in formulating search queries in real time reducing the need for complex interactions.
This image shows a list of suggested queries by ACM digital library.
ACC6 Figure a2. An example of auto-complete suggestions in search field

Examples of Poor Practice

1.1.1.b. Difficulty accessing a query suggestion

The transition of the interface from a desktop to a mobile environment may lead to inaccessibility when utilizing query suggestions. In ACC6 Figure b1, the search query suggestions (text with tooltip) A recommended query that predicts the rest of the search terms when keyed in.   are hidden under the digital collection display on mobile screen which is visible in the desktop environment as indicated in ACC6 Figure b2. “I am not finding it… I don’t know how to spell declaration so…Search. Or no, they didn’t. I’m gonna put just #2 is usually it’s where I like… Ohh the numeral number because they usually say World War Two, they have like not the number two they have. Ah… The challenges…was the inability to find things right away.” (IP15-LO)This image displays hidden query suggestions in a mobile environment. ACC6 Figure b1. Screenshot of difficulty accessing a query suggestion (Mobile)

This image displays the list of query suggestions in a desktop environment. ACC6 Figure b2. Screenshot of difficulty accessing a query suggestion (Desktop)

Resources

See also: