diff --git a/static/script.js b/static/script.js
index aebc9225..905e7119 100644
--- a/static/script.js
+++ b/static/script.js
@@ -31,6 +31,8 @@ var isDetailPage = typeof PROJECT_ID !== "undefined";
     // classList.toggle returns true if class was added, false if removed
     var isOpen = menu.classList.toggle("open");
     toggle.classList.toggle("open", isOpen);
+    // Keep aria-expanded in sync so screen readers announce state changes
+    toggle.setAttribute("aria-expanded", String(isOpen));
     // Keep aria-expanded in sync so screen readers know if menu is open or closed
     toggle.setAttribute("aria-expanded", isOpen);
   });
@@ -40,8 +42,19 @@ var isDetailPage = typeof PROJECT_ID !== "undefined";
     link.addEventListener("click", function () {
       menu.classList.remove("open");
       toggle.classList.remove("open");
+      toggle.setAttribute("aria-expanded", "false");
     });
   });
+
+  // Also close the menu when Escape is pressed
+  document.addEventListener("keydown", function (evt) {
+    if (evt.key === "Escape" && menu.classList.contains("open")) {
+      menu.classList.remove("open");
+      toggle.classList.remove("open");
+      toggle.setAttribute("aria-expanded", "false");
+      toggle.focus();
+    }
+  });
 })();
 
 
@@ -245,6 +258,7 @@ if (isIndexPage) {
     }
   });
 
+  // Add skill on quick-pick chip click; also support Space/Enter for keyboard users
   // Add/toggle skill on quick-pick chip click
   quickPickChips.forEach(function (chip) {
     chip.addEventListener("click", function () {
@@ -290,6 +304,23 @@ if (isIndexPage) {
     });
   }
 
+  // Add skill on quick-pick chip click
+  quickPickChips.forEach(function (chip) {
+    chip.addEventListener("click", function () {
+      addSkill(chip.getAttribute("data-skill"));
+      hideSuggestions();
+      skillsTextInput.value = "";
+    });
+    // Keyboard users expect buttons to respond to Enter and Space by default
+    // (they already do because these are <button> elements, but make sure)
+    chip.addEventListener("keydown", function (evt) {
+      if (evt.key === "Enter" || evt.key === " ") {
+        evt.preventDefault();
+        addSkill(chip.getAttribute("data-skill"));
+        chip.classList.add("active");
+      }
+    });
+  });
 
   document.addEventListener("click", function (evt) {
     if (skillWrap && !skillWrap.contains(evt.target)) {
@@ -567,6 +598,20 @@ if (isIndexPage) {
     return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
   }
 
+  // Wire up the "Try Different Inputs" button (onclick removed from HTML)
+  var btnTryAgain = document.getElementById("btn-try-again");
+  if (btnTryAgain) {
+    btnTryAgain.addEventListener("click", function () {
+      var target = document.getElementById("find-project");
+      if (target) target.scrollIntoView({ behavior: "smooth" });
+      // Move focus to the skills input so keyboard users land in the form
+      setTimeout(function () {
+        var skillsInput = document.getElementById("skills-input");
+        if (skillsInput) skillsInput.focus();
+      }, 400);
+    });
+  }
+
 } // end isIndexPage
 
 
@@ -586,6 +631,8 @@ if (isDetailPage) {
   // Cache flag so code is only fetched once per page load
   var codeFetched = false;
 
+  // Tracks which element triggered the panel so focus can return on close
+  var panelTrigger = null;
   function openCodePanel() {
     // Panel element might not exist on every detail page, so check first
     if (!codePanel) return;
@@ -606,6 +653,7 @@ if (isDetailPage) {
     document.body.style.overflow = "";
   }
 
+  // Fetch the starter code from the server (only once per page load)
   function fetchStarterCode() {
     // Show a loading message while we wait for the API response
     if (codeContentEl) codeContentEl.textContent = "Loading starter code...";
@@ -629,20 +677,99 @@ if (isDetailPage) {
       });
   }
 
+  // Collect all focusable elements inside the panel for the focus trap
+  function getFocusableInPanel() {
+    return Array.from(
+      codePanel.querySelectorAll(
+        'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter(function (el) { return !el.hidden && el.offsetParent !== null; });
+  }
   // Attach open/close handlers
   if (btnViewCode) btnViewCode.addEventListener("click", openCodePanel);
   if (btnViewCodeSm) btnViewCodeSm.addEventListener("click", openCodePanel);
   if (btnClosePanel) btnClosePanel.addEventListener("click", closeCodePanel);
 
-  if (codePanelOverlay) {
-    codePanelOverlay.addEventListener("click", closeCodePanel);
+  function openCodePanel(triggerEl) {
+    if (!codePanel) return;
+    panelTrigger = triggerEl || document.activeElement;
+    codePanel.classList.add("active");
+    if (codePanelOverlay) codePanelOverlay.classList.add("active");
+    document.body.style.overflow = "hidden";
+
+    // Update aria-expanded on both trigger buttons
+    if (btnViewCode)   btnViewCode.setAttribute("aria-expanded", "true");
+    if (btnViewCodeSm) btnViewCodeSm.setAttribute("aria-expanded", "true");
+
+    if (!codeFetched) fetchStarterCode();
+
+    // Move focus to the close button so keyboard users are immediately inside
+    // the panel's focus trap
+    setTimeout(function () {
+      var focusable = getFocusableInPanel();
+      if (focusable.length) focusable[0].focus();
+    }, 60);
   }
 
+  function closeCodePanel() {
+    if (!codePanel) return;
+    codePanel.classList.remove("active");
+    if (codePanelOverlay) codePanelOverlay.classList.remove("active");
+    document.body.style.overflow = "";
+
+    // Update aria-expanded on both trigger buttons
+    if (btnViewCode)   btnViewCode.setAttribute("aria-expanded", "false");
+    if (btnViewCodeSm) btnViewCodeSm.setAttribute("aria-expanded", "false");
+
+    // Return focus to whichever button opened the panel
+    if (panelTrigger && typeof panelTrigger.focus === "function") {
+      panelTrigger.focus();
+    }
+    panelTrigger = null;
+  }
+
+  // Focus trap: while the panel is open, Tab/Shift+Tab must stay inside it
   // Let keyboard users close the panel with Escape — important for accessibility
   document.addEventListener("keydown", function (evt) {
-    if (evt.key === "Escape") closeCodePanel();
+    if (!codePanel || !codePanel.classList.contains("active")) return;
+
+    if (evt.key === "Escape") {
+      closeCodePanel();
+      return;
+    }
+
+    if (evt.key !== "Tab") return;
+
+    var focusable = getFocusableInPanel();
+    if (!focusable.length) { evt.preventDefault(); return; }
+
+    var first = focusable[0];
+    var last  = focusable[focusable.length - 1];
+
+    if (evt.shiftKey) {
+      // Shift+Tab: if focus is on the first element, wrap to last
+      if (document.activeElement === first) {
+        evt.preventDefault();
+        last.focus();
+      }
+    } else {
+      // Tab: if focus is on the last element, wrap to first
+      if (document.activeElement === last) {
+        evt.preventDefault();
+        first.focus();
+      }
+    }
   });
 
+  // Attach open/close handlers — pass the trigger element so focus returns correctly
+  if (btnViewCode)   btnViewCode.addEventListener("click", function () { openCodePanel(btnViewCode); });
+  if (btnViewCodeSm) btnViewCodeSm.addEventListener("click", function () { openCodePanel(btnViewCodeSm); });
+  if (btnClosePanel) btnClosePanel.addEventListener("click", closeCodePanel);
+
+  if (codePanelOverlay) {
+    codePanelOverlay.addEventListener("click", closeCodePanel);
+  }
+
   // ----------------------------------------------------------
   // Copy Code button
   // ----------------------------------------------------------
diff --git a/static/style.css b/static/style.css
index cb63af27..a5561dd5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -90,6 +90,193 @@ a { color: var(--indigo-500); text-decoration: none; }
 a:hover { text-decoration: underline; }
 ul, ol { list-style: none; }
 
+/* ---- Skip Navigation Link --------------------------------- */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 24px;
+  background: var(--indigo-700);
+  color: var(--white);
+  font-family: var(--font-display);
+  font-size: 0.9rem;
+  font-weight: 700;
+  border-radius: 0 0 var(--r-sm) var(--r-sm);
+  z-index: 9999;
+  text-decoration: none;
+  transition: top 0.15s ease;
+}
+.skip-link:focus {
+  top: 0;
+  outline: 3px solid var(--yellow-400);
+  outline-offset: 2px;
+}
+
+/* ---- Global Focus-Visible Ring ----------------------------- */
+/*
+ * We suppress the default browser outline on all elements globally
+ * and re-apply a polished custom ring only when navigating via
+ * keyboard (`:focus-visible`). This keeps the UI clean for mouse
+ * users while fully satisfying WCAG 2.1 SC 2.4.7 (Focus Visible).
+ */
+*:focus { outline: none; }
+
+*:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+/* Dark-background contexts — use a lighter, high-contrast ring */
+.navbar *:focus-visible,
+.hero *:focus-visible,
+.detail-hero *:focus-visible,
+.cta-section *:focus-visible,
+.footer *:focus-visible,
+.code-panel *:focus-visible {
+  outline-color: var(--yellow-400);
+}
+
+/* ---- Per-component Focus Overrides ------------------------ */
+/* These extend the ring for elements that need rounded outlines */
+
+.nav-logo:focus-visible,
+.nav-link:focus-visible,
+.nav-btn-outline:focus-visible,
+.nav-mobile-link:focus-visible {
+  border-radius: var(--r-full);
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 3px;
+}
+
+.btn-hero-primary:focus-visible,
+.btn-hero-ghost:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 3px;
+  border-radius: var(--r-full);
+}
+
+.skill-chip:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-full);
+}
+
+.skill-chip-remove:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: 50%;
+}
+
+.feature-card-link:focus-visible {
+  outline: 2.5px solid var(--indigo-600);
+  outline-offset: 2px;
+  border-radius: var(--r-full);
+}
+
+.btn-submit:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 3px;
+  border-radius: var(--r-sm);
+  box-shadow: 0 0 0 5px rgba(79, 110, 247, 0.2), 0 4px 20px rgba(35, 53, 194, 0.35);
+}
+
+.btn-try-again:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-full);
+}
+
+.btn-details:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+  background: var(--indigo-600);
+  color: var(--white);
+}
+
+.btn-cta:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 3px;
+  border-radius: var(--r-full);
+}
+
+.btn-download:focus-visible,
+.btn-view-code:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 3px;
+  border-radius: var(--r-xs);
+}
+
+.btn-view-code-sm:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+  background: var(--indigo-600);
+  color: var(--white);
+}
+
+.btn-download-sm:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+}
+
+.resource-link:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+  background: var(--indigo-100);
+}
+
+.code-panel-download:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 2px;
+  border-radius: var(--r-full);
+}
+
+.code-panel-close:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+  background: rgba(255,255,255,0.18);
+}
+
+.btn-copy-code:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 2px;
+  border-radius: var(--r-xs);
+}
+
+.nav-mobile-toggle:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 3px;
+  border-radius: var(--r-xs);
+}
+
+select:focus-visible {
+  outline: 2.5px solid var(--indigo-500);
+  outline-offset: 0;
+  border-color: var(--indigo-500);
+  box-shadow: 0 0 0 4px rgba(79, 110, 247, 0.15);
+}
+
+.breadcrumb a:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 2px;
+  border-radius: 3px;
+  color: var(--white);
+}
+
+.footer-links-list a:focus-visible,
+.footer-bottom-links a:focus-visible {
+  outline: 2.5px solid var(--yellow-400);
+  outline-offset: 2px;
+  border-radius: 3px;
+  color: var(--white);
+}
+
 /* ---- Shared utilities -------------------------------------- */
 .container {
   max-width: 1140px;
diff --git a/templates/index.html b/templates/index.html
index 49556f7d..b710bc48 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -15,6 +15,10 @@
 </head>
 
 <body>
+  <!-- Skip to main content for keyboard users -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+
   <!-- ============================================================
        Navigation
        ============================================================ -->
@@ -28,12 +32,15 @@
         <a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
       </div>
       <!-- Mobile hamburger toggle -->
-      <button class="nav-mobile-toggle" id="nav-mobile-toggle" aria-label="Toggle navigation">
-        <span></span><span></span><span></span>
+      <button class="nav-mobile-toggle" id="nav-mobile-toggle"
+              aria-label="Toggle navigation menu"
+              aria-expanded="false"
+              aria-controls="nav-mobile-menu">
+        <span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
       </button>
     </div>
     <!-- Mobile menu -->
-    <div class="nav-mobile-menu" id="nav-mobile-menu">
+    <div class="nav-mobile-menu" id="nav-mobile-menu" role="navigation" aria-label="Mobile navigation">
       <a href="#how-it-works" class="nav-mobile-link">How It Works</a>
       <a href="#features" class="nav-mobile-link">Features</a>
       <a href="#find-project" class="nav-mobile-link">Find Project</a>
@@ -44,6 +51,7 @@
   <!-- ============================================================
        Hero Section
        ============================================================ -->
+  <main id="main-content">
   <section class="hero" id="home">
     <div class="hero-inner">
       <!-- Left: copy -->
@@ -336,7 +344,7 @@ <h2 class="section-title">Find Your Next Project</h2>
 
       <div class="form-card-outer">
         <div class="form-card" id="form-section">
-          <form id="recommend-form" novalidate>
+          <form id="recommend-form" novalidate aria-label="Find your project form">
 
             <!-- Skills input with chip selector -->
             <div class="form-group">
@@ -355,6 +363,8 @@ <h2 class="section-title">Find Your Next Project</h2>
                   id="skills-input"
                   placeholder="Type a skill and press Enter..."
                   autocomplete="off"
+                  aria-label="Type a skill and press Enter to add it"
+                  aria-describedby="skills-hint skills-error"
                   aria-haspopup="listbox"
                   aria-expanded="false"
                   aria-controls="skills-suggestions"
@@ -363,6 +373,8 @@ <h2 class="section-title">Find Your Next Project</h2>
               </div>
               <!-- Hidden field holds the final comma-separated value -->
               <input type="hidden" id="skills" name="skills" />
+              <span class="form-hint" id="skills-hint">Or click a popular skill below to add it</span>
+              <div class="form-error-msg" id="skills-error" role="alert" aria-live="polite"></div>
               <span class="form-hint">
                 Add one or more skills you are comfortable with. Example: Python, React, SQL, Git.
               </span>
@@ -394,14 +406,14 @@ <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-describedby="level-error" aria-required="true">
                     <option value="" disabled selected>Select level</option>
                     <option value="Beginner">Beginner</option>
                     <option value="Intermediate">Intermediate</option>
                     <option value="Advanced">Advanced</option>
                   </select>
                 </div>
-                <div class="form-error-msg" id="level-error"></div>
+                <div class="form-error-msg" id="level-error" role="alert" aria-live="polite"></div>
               </div>
 
               <div class="form-group">
@@ -413,7 +425,7 @@ <h2 class="section-title">Find Your Next Project</h2>
                   </span>
                 </label>
                 <div class="select-wrap">
-                  <select id="interest" name="interest">
+                  <select id="interest" name="interest" aria-describedby="interest-error" aria-required="true">
                     <option value="" disabled selected>Select interest</option>
                     <option value="Web">Web Development</option>
                     <option value="Data">Data and Analytics</option>
@@ -422,6 +434,22 @@ <h2 class="section-title">Find Your Next Project</h2>
                     <option value="Games">Games</option>
                   </select>
                 </div>
+                <div class="form-error-msg" id="interest-error" role="alert" aria-live="polite"></div>
+              </div>
+            </div>
+
+            <!-- Time availability -->
+            <div class="form-group">
+              <label for="time">Time Availability</label>
+              <div class="select-wrap">
+                <select id="time" name="time" aria-describedby="time-error" aria-required="true">
+                  <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>
+                  <option value="High">High — a week or more</option>
+                </select>
+              </div>
+              <div class="form-error-msg" id="time-error" role="alert" aria-live="polite"></div>
              
 
               <span class="form-hint">
@@ -454,6 +482,14 @@ <h2 class="section-title">Find Your Next Project</h2>
           <div class="form-error-msg" id="time-error"></div>
         </div>
 
+            <!-- General error (shown above the button) -->
+            <p class="form-error-general" id="form-error-general" role="alert" aria-live="assertive"></p>
+
+            <!-- Submit button -->
+            <button type="submit" class="btn-submit" id="submit-btn" aria-describedby="form-error-general">
+              <span id="btn-label">Generate My Projects</span>
+              <span id="btn-loading" style="display:none;" aria-live="polite">Finding matches...</span>
+            </button>
         <!-- General error (shown above the button) -->
         <p class="form-error-general" id="form-error-general"></p>
 
@@ -472,7 +508,9 @@ <h2 class="section-title">Find Your Next Project</h2>
   <!-- ============================================================
        Results Section
        ============================================================ -->
-  <section class="results-section" id="results-section" style="display:none;">
+  </main>
+
+  <section class="results-section" id="results-section" style="display:none;" aria-label="Recommended projects" aria-live="polite">
     <div class="container">
       <div class="section-eyebrow">Your Matches</div>
       <h2 class="section-title">Recommended Projects</h2>
@@ -498,6 +536,7 @@ <h2 class="section-title">Recommended Projects</h2>
           </div>
           <h3>No Projects Found</h3>
           <p id="empty-message">Try adjusting your skills or selecting a different interest area.</p>
+          <button class="btn-try-again" id="btn-try-again">Try Different Inputs</button>
           <button class="btn-try-again"
             onclick="document.getElementById('find-project').scrollIntoView({behavior:'smooth'})">Try Different
             Inputs</button>
diff --git a/templates/project.html b/templates/project.html
index f33a973f..2f78095d 100644
--- a/templates/project.html
+++ b/templates/project.html
@@ -10,11 +10,14 @@
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 </head>
 <body class="detail-page">
+  <!-- Skip to main content for keyboard users -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
 
   <!-- ============================================================
        Navigation
        ============================================================ -->
-  <nav class="navbar">
+  <nav class="navbar" aria-label="Primary navigation">
     <div class="nav-inner">
       <a href="/" class="nav-logo">DevPath</a>
       <div class="nav-links">
@@ -27,10 +30,11 @@
   <!-- ============================================================
        Project Hero Banner
        ============================================================ -->
+  <main id="main-content">
   <div class="detail-hero">
     <div class="container">
       <!-- Breadcrumb trail -->
-      <nav class="breadcrumb" aria-label="breadcrumb">
+      <nav class="breadcrumb" aria-label="Breadcrumb">
         <a href="/">Home</a>
         <span class="breadcrumb-sep">&#8250;</span>
         <span>{{ project.title }}</span>
@@ -51,11 +55,11 @@ <h1 class="detail-title">{{ project.title }}</h1>
 
         <!-- Quick-action buttons in the hero -->
         <div class="detail-hero-actions">
-          <a href="/project/{{ project.id }}/download" class="btn-download">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <a href="/project/{{ project.id }}/download" class="btn-download" aria-label="Download starter code for {{ project.title }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
             Download Starter Code
           </a>
-          <button class="btn-view-code" id="btn-view-code">
+          <button class="btn-view-code" id="btn-view-code" aria-expanded="false" aria-controls="code-panel">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
             View Code
           </button>
@@ -201,8 +205,8 @@ <h3 class="sidebar-card-title">
             </h3>
             <p class="sidebar-card-desc">A working template to kick off this project without starting from scratch.</p>
             <div class="sidebar-code-actions">
-              <button class="btn-view-code-sm" id="btn-view-code-sm">View Code</button>
-              <a href="/project/{{ project.id }}/download" class="btn-download-sm">Download</a>
+              <button class="btn-view-code-sm" id="btn-view-code-sm" aria-expanded="false" aria-controls="code-panel">View Code</button>
+              <a href="/project/{{ project.id }}/download" class="btn-download-sm" aria-label="Download starter code for {{ project.title }}">Download</a>
             </div>
           </div>
 
@@ -210,24 +214,25 @@ <h3 class="sidebar-card-title">
       </div>
     </div>
   </div>
+  </main>
 
   <!-- ============================================================
        Starter Code Viewer Panel (slides in from bottom)
        ============================================================ -->
-  <div class="code-panel" id="code-panel">
+  <div class="code-panel" id="code-panel" role="dialog" aria-modal="true" aria-label="Starter code viewer">
     <div class="code-panel-header">
       <div class="code-panel-title">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
         <span id="code-panel-filename">starter_code</span>
       </div>
       <div class="code-panel-actions">
-        <a href="/project/{{ project.id }}/download" class="code-panel-download">Download file</a>
+        <a href="/project/{{ project.id }}/download" class="code-panel-download" aria-label="Download starter code file">Download file</a>
         <button class="btn-copy-code" id="btn-copy-code" aria-label="Copy code to clipboard">
-          <svg class="copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:none"><polyline points="20 6 9 17 4 12"/></svg>
+          <svg class="copy-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          <svg class="check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:none" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
           <span class="copy-btn-label">Copy Code</span>
         </button>
-        <button class="code-panel-close" id="code-panel-close">Close</button>
+        <button class="code-panel-close" id="code-panel-close" aria-label="Close code panel">Close</button>
       </div>
     </div>
     <!-- Code is injected here by script.js -->