Semantic/a11y markup improvements
- 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.
This commit is contained in:
parent
76bc26d639
commit
f449fe8a32
3 changed files with 24 additions and 11 deletions
|
@ -113,6 +113,11 @@ h1 a {
|
|||
color: black;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<form action="/search">
|
||||
<h1>
|
||||
<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>
|
||||
|
@ -15,6 +15,7 @@
|
|||
name="q"
|
||||
placeholder="Search terms..."
|
||||
autofocus
|
||||
required
|
||||
value="{{.Query}}" />
|
||||
<button type="submit">Search</button>
|
||||
</div>
|
||||
|
|
|
@ -3,14 +3,21 @@
|
|||
{{template "form.html" .}}
|
||||
</header>
|
||||
<main>
|
||||
{{if .Results}}
|
||||
<p role="note">{{len .Results}} <span id="sr-label">search results</span> found</p>
|
||||
<ol aria-labelledby="sr-label">
|
||||
{{range .Results}}
|
||||
<div class="result">
|
||||
<a href="{{.Page.Url}}" rel="noopener nofollow" class="title">{{.Page.Title}}</a>
|
||||
<li class="result">
|
||||
<h2><a href="{{.Page.Url}}" rel="noopener nofollow" class="title">{{.Page.Title}}</a></h2>
|
||||
<a href="{{.Page.Url}}" rel="noopener nofollow" class="url"><small>{{.Page.Url}}</small></a>
|
||||
{{if .Page.Excerpt}}
|
||||
<p class="excerpt">{{.Page.Excerpt}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</li>
|
||||
{{end}}
|
||||
</ol>
|
||||
{{else}}
|
||||
<p role="note">No search results found</p>
|
||||
{{end}}
|
||||
</main>
|
||||
{{template "footer.html" .}}
|
||||
|
|
Loading…
Reference in a new issue