f449fe8a32
- Make search results an <ol> with an ARIA label. If more elements are erver present on the SERP (e.g. settings), the <ol> should be placed inside a <section> and its label should move to that section too. - Remove list-style and padding from the <ol> in the stylesheet - Add the "search" ARIA role to the search form. - Make search result titles headings. This is established convention that assistive-technology users are already familiar with from other engines. - Add an indicator for "N search results found". This is where the list label comes from. - Exclude the brand name from machine translation.
22 lines
687 B
HTML
22 lines
687 B
HTML
<form action="/search" role="search">
|
|
<h1 translate="no">
|
|
<a href="/">
|
|
<span class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path></svg>
|
|
</span>
|
|
<span>searchhut</span>
|
|
</a>
|
|
</h1>
|
|
<div class="input-group">
|
|
<label for="q">Search terms</label>
|
|
<input
|
|
type="text"
|
|
id="q"
|
|
name="q"
|
|
placeholder="Search terms..."
|
|
autofocus
|
|
required
|
|
value="{{.Query}}" />
|
|
<button type="submit">Search</button>
|
|
</div>
|
|
</form>
|