Accessibility UI Guidelines: Search

Search

3.2 Search

Search functionality is a critical component of web applications, enabling users to find information quickly and efficiently. Ensuring that search features are accessible is vital for creating an inclusive experience for all users, including those with disabilities or using assistive technologies.

3.2.1 Accessible Search Field

Search fields should be implemented using semantic HTML and include appropriate labels for screen readers. This ensures that the purpose of the field is clear to all users.

<!-- Accessible Search Field -->
<form action="/search" method="get" role="search">
    <label for="searchField" class="sr-only">Search the site</label>
    <input type="text" id="searchField" name="q" placeholder="Search the site" aria-label="Search the site">
    <button type="submit" aria-label="Submit search">Search</button>
</form>

3.2.2 Keyboard Accessibility

Ensure that users can interact with the search field and submit the search using only the keyboard. The Tab key should navigate to the search field, and the Enter key should submit the form.

<!-- Example Search Form -->
<form action="/search" method="get">
    <input type="text" id="searchField" name="q" placeholder="Search the site">
    <button type="submit">Search</button>
</form>

// Handle keyboard events for custom search interactions (if applicable)
document.getElementById('searchField').addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        // Custom logic if necessary
    }
});

3.2.3 Placeholder Text and Labels

Do not rely solely on placeholder text as a label for the search field, as it may not be accessible to all users. Always provide a visible or screen reader-friendly label.

<!-- Correct: Accessible Label with Placeholder -->
<form action="/search" method="get">
    <label for="searchField">Search</label>
    <input type="text" id="searchField" name="q" placeholder="Enter keywords">
    <button type="submit">Search</button>
</form>

<!-- Incorrect: Placeholder Used as Label -->
<form action="/search" method="get">
    <input type="text" id="searchField" name="q" placeholder="Search the site">
    <button type="submit">Search</button>
</form>

3.2.4 ARIA Roles and Attributes

Use ARIA roles and attributes to enhance the accessibility of custom search components. For example, you can use role="search" to define the search region.

<!-- Example with ARIA Attributes -->
<form action="/search" method="get" role="search" aria-label="Site search">
    <input type="text" id="searchField" name="q" placeholder="Search the site">
    <button type="submit">Search</button>
</form>

3.2.5 Clear Search Button

Include a clear search button that allows users to reset the search field easily. This is particularly useful for users with motor impairments or those relying on screen readers.

<!-- Search Form with Clear Button -->
<form action="/search" method="get">
    <input type="text" id="searchField" name="q" placeholder="Search the site">
    <button type="submit">Search</button>
    <button type="button" aria-label="Clear search" onclick="document.getElementById('searchField').value = '';">Clear</button>
</form>

3.2.6 Responsive Design

Ensure that the search field and buttons are responsive and work well on devices of all sizes, including mobile and touch screens.

/* Responsive Search Field */
form[role="search"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

form[role="search"] input[type="text"] {
    flex: 1 1 auto;
    min-width: 200px;
    padding: 0.8rem;
    font-size: 1rem;
}

form[role="search"] button {
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    margin-left: 0.5rem;
}

3.2.7 Search Suggestions

Provide accessible search suggestions to help users refine their queries. Ensure that suggestions are keyboard navigable and properly announced by screen readers.

<!-- Search Field with Suggestions -->
<form action="/search" method="get" role="search">
    <input type="text" id="searchField" name="q" placeholder="Search the site" aria-autocomplete="list" aria-controls="suggestions">
    <ul id="suggestions" role="listbox" aria-label="Search suggestions">
        <li role="option">Suggestion 1</li>
        <li role="option">Suggestion 2</li>
        <li role="option">Suggestion 3</li>
    </ul>
    <button type="submit">Search</button>
</form>

// Handle search suggestion interactions
document.getElementById('searchField').addEventListener('input', (e) => {
    // Show or update suggestions based on input
});