Search Form with Accessible Label

<form role="search" action="/search">
    <label for="site-search" class="visually-hidden">Search</label>
    <input
        type="search"
        id="site-search"
        name="q"
        placeholder="Search…"
        autocomplete="off"
        autocapitalize="off"
        spellcheck="false"
        required>
    <button type="submit" aria-label="Submit search">
        <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M21 21l-4.35-4.35M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"
                  stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
    </button>
</form>

<style>
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
</style>