Improve search input accessibility

Add visually hidden label instead of implying from icon

diff --git a/index.html b/index.html
index bb8ab5bf83f31cef1d3d6c761b5b07b223ed11aa..319b6a49d02fbbd91e016b2f92998695386b224f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -42,10 +42,11 @@
     </a>
 
     <form role="search">
-      <input type="search" name="query">
+      <label for="query" class="visually-hidden">Search this site</label>
+      <input type="search" name="query" id="query">
       <button>
         <svg role="img" aria-labelledby="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <title id="search-icon">Search this site</title>
+          <title id="search-icon">Search</title>
           <circle cx="9" cy="9" r="7" stroke="#000" />
           <line x1="14" y1="14" x2="22" y2="22" stroke="#000" stroke-linecap="round" />
         </svg>

diff --git a/style.css b/style.css
index 59d74171499c9caa0de28b3a4deef6c3a39865ac..216dba0fb43141299ce6a7809e96d64b7008866d 100644 (file)
--- a/style.css
+++ b/style.css
@@ -62,6 +62,17 @@ header * {
   gap: 4px;
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
 input {
   min-block-size: 20px;
   font-size: 16px;