From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 26 Jan 2023 03:53:47 +0000 (-0800)
Subject: Improve search input accessibility
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=a0eae5108e80894ba4d020336a2a58558692e8ee;p=ardislu.dev

Improve search input accessibility

Add visually hidden label instead of implying from icon
---

diff --git a/index.html b/index.html
index bb8ab5b..319b6a4 100644
--- 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 59d7417..216dba0 100644
--- 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;