From b86cc474bddb9a57a76e76965001536c7d6e1c9e Mon Sep 17 00:00:00 2001
From: Abdul Khalid <mezmerizingbeats2004@gmail.com>
Date: Sun, 6 Aug 2023 19:24:44 +0530
Subject: [PATCH 1/2] styles: add screen reader only styles to hide labels
 visually

---
 assets/css/enquiry-form.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/css/enquiry-form.css b/assets/css/enquiry-form.css
index eee5944..822a62b 100644
--- a/assets/css/enquiry-form.css
+++ b/assets/css/enquiry-form.css
@@ -55,7 +55,7 @@
 
 .enquiry-form .spandiv small {
     color: #e74c3c;
-  }
+ }
   
 .enquiry-form button{
     padding: 15px;
@@ -70,4 +70,13 @@
     border-radius: 10px;
 }
 
-
+.sr-only-labels {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

From 2023b7155a9e51ddb7f7e0128d788c141e949dcc Mon Sep 17 00:00:00 2001
From: Abdul Khalid <mezmerizingbeats2004@gmail.com>
Date: Sun, 6 Aug 2023 19:31:18 +0530
Subject: [PATCH 2/2] feat: make contact us form accessible

---
 index.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 09b3126..715ebff 100644
--- a/index.html
+++ b/index.html
@@ -427,7 +427,8 @@ <h2>Contact Us</h2>
               <div class="title">GET IN TOUCH</div>
               <div>
                 <div class="inputContainer">
-                  <input type="text" id="name" placeholder="Your Name" class="" pattern='[a-zA-Z]+' required aria-required="true"
+                  <label for="name" class="sr-only-labels">Enter Your Name: </label>
+                  <input type="text" name="name" id="name" placeholder="Your Name" class="" pattern='[a-zA-Z]+' required aria-required="true"
                     aria-label="Enter you name" aria-describedby="nameerr" />
                   <i class="fa fa-user"></i>
                 </div>
@@ -436,7 +437,8 @@ <h2>Contact Us</h2>
               
             <div>
               <div class="inputContainer">
-                <input type="email" id="email" class="" placeholder="Email id" pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
+                <label for="email" class="sr-only-labels">Enter Your Mail: </label>
+                <input type="email" name="email" id="email" class="" placeholder="Email id" pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
                   required aria-required="true" aria-label="Enter you email" aria-describedby="mailerr" />
                 <i class="fa fa-envelope"></i>
               </div>
@@ -445,7 +447,8 @@ <h2>Contact Us</h2>
               
              <div>
               <div class="inputContainer">
-                <input type="tel" id="phone" class="" placeholder="Phone no." pattern="[0-9]{10}$" required aria-required="true" aria-label="Enter you phone number" aria-describedby="phoneerr"/>
+                 <label for="phone" class="sr-only-labels">Enter Your Phone Number: </label>
+                <input type="tel" name="phone" id="phone" class="" placeholder="Phone no." pattern="[0-9]{10}$" required aria-required="true" aria-label="Enter you phone number" aria-describedby="phoneerr"/>
                <i class="fa fa-phone"></i>
               </div>
               <div class="spandiv"><small class="small" id="phoneerr" role="alert"></small></div>
@@ -453,14 +456,15 @@ <h2>Contact Us</h2>
             
               <div>
                 <div class="inputContainer">
-                  <textarea id="message" row="5" class="" placeholder="How can we help you?" required aria-required="true" aria-label="Enter you message" aria-describedby="msgerr"></textarea>
+                  <label for="message" class="sr-only-labels">How can we help you? </label>
+                  <textarea id="message" name="message" row="5" class="" placeholder="How can we help you?" required aria-required="true" aria-label="Enter you message" aria-describedby="msgerr"></textarea>
                   <i class="fa fa-comment"></i>
                 </div>
                 <div class="spandiv"><small class="small" id="msgerr" role="alert"></small></div>
               </div>
              
 
-              <button type="submit" onclick="sendMail()" class="hoverchanger">
+              <button type="submit" role="button" aria-describedby="Submit button" onclick="sendMail()" class="hoverchanger">
                 Send
               </button>
             </form>