fix accessibilty issues

MaryOJob · Feb 13, 2019 · 555fe73 · 555fe73
1 parent e6c45ef
commit 555fe73
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="57x57" href="/images/favicon.ico/apple-icon-57x57.png">
@@ -66,7 +66,8 @@ <h1>An <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open
 
             <div class="searchbar">
                 <div class="select">
-                    <select name="Categories">
+                    <label for="Categories" class="visuallyhidden"><span>Categories</span></label>
+                    <select name="Categories" id="Categories">
                         <option value="All Categories">All Categories</option>
                         <option value="Banking / Financial Services">Banking / Financial Services</option>
                         <option value="Ecommerce / Construction / Real Estate">Ecommerce / Construction / Real Estate</option>
@@ -75,9 +76,10 @@ <h1>An <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open
                     </select>
                 </div>
                 <div class="search">
-                    <label>
-                        <input type="text" name="search" placeholder="search for a company"> 
+                    <label for="search" class="visuallyhidden">
+                        <span>Search</span>
                     </label>
+                    <input type="text" name="search" id="search" placeholder="search for a company"> 
                     <div class="results">All Results</div>
                 </div>
             </div>

diff --git a/scss/layout/_header.scss b/scss/layout/_header.scss
@@ -125,4 +125,13 @@ header {
             }
         }
     }
+    .visuallyhidden{
+        position: absolute;
+        clip: rect(1px, 1px, 1px, 1px);
+        padding: 0;
+        border: 0;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+    }
 }