From 448043e3a9ab27c75d01023a806cbdfb7b6ca6fc Mon Sep 17 00:00:00 2001
From: Carsen Gafford <carsengafford2@gmail.com>
Date: Tue, 31 Mar 2026 12:07:07 -0600
Subject: [PATCH] Improve form accessibility

Add ARIA attributes to improve screen-reader support on the form.
---
 templates/index.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index b4533b9..5338a4a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -260,11 +260,13 @@ <h2 class="section-title">Find Your Next Project</h2>
                   id="skills-input"
                   placeholder="Type a skill and press Enter..."
                   autocomplete="off"
+                  aria-required="true"
+                  aria-describedby="skills-hint skills-error"
                 />
               </div>
               <!-- Hidden field holds the final comma-separated value -->
               <input type="hidden" id="skills" name="skills" />
-              <span class="form-hint">Or click a popular skill below to add it</span>
+              <span id="skills-hint" class="form-hint">Or click a popular skill below to add it</span>
               <div class="form-error-msg" id="skills-error"></div>
             </div>
 
@@ -285,7 +287,7 @@ <h2 class="section-title">Find Your Next Project</h2>
               <div class="form-group">
                 <label for="level">Experience Level</label>
                 <div class="select-wrap">
-                  <select id="level" name="level">
+                  <select id="level" name="level" aria-required="true" aria-describedby="level-error">
                     <option value="" disabled selected>Select level</option>
                     <option value="Beginner">Beginner</option>
                     <option value="Intermediate">Intermediate</option>
@@ -298,7 +300,7 @@ <h2 class="section-title">Find Your Next Project</h2>
               <div class="form-group">
                 <label for="interest">Area of Interest</label>
                 <div class="select-wrap">
-                  <select id="interest" name="interest">
+                  <select id="interest" name="interest" aria-required="true" aria-describedby="interest-error">
                     <option value="" disabled selected>Select interest</option>
                     <option value="Web">Web Development</option>
                     <option value="Data">Data and Analytics</option>
@@ -315,7 +317,7 @@ <h2 class="section-title">Find Your Next Project</h2>
             <div class="form-group">
               <label for="time">Time Availability</label>
               <div class="select-wrap">
-                <select id="time" name="time">
+                <select id="time" name="time" aria-required="true" aria-describedby="time-error">
                   <option value="" disabled selected>How much time can you commit?</option>
                   <option value="Low">Low — a few hours total</option>
                   <option value="Medium">Medium — across a weekend</option>