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.
23 lines
651 B
HTML
23 lines
651 B
HTML
{{template "head.html" .}}
|
|
<header>
|
|
{{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}}
|
|
<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}}
|
|
</li>
|
|
{{end}}
|
|
</ol>
|
|
{{else}}
|
|
<p role="note">No search results found</p>
|
|
{{end}}
|
|
</main>
|
|
{{template "footer.html" .}}
|