fix(ui): accessibility, responsive, polish pass

templates/index.html

@@ -204,7 +204,7 @@
 
   {# --- Video Preview --- #}
   <div class="video-preview" id="video-preview">
-    <video id="preview-video" controls muted></video>
+    <video id="preview-video" controls muted aria-label="Video preview"></video>
   </div>
 
   {# --- File Info --- #}
@@ -229,7 +229,7 @@
     </div>
 
     {% if models %}
-    <div class="model-grid" id="model-grid">
+    <div class="model-grid" id="model-grid" role="group" aria-label="Available detection models">
       {% for model in models %}
       <label class="model-card" id="card-{{ loop.index }}">
         <div class="model-card-header">

templates/status.html

@@ -13,12 +13,14 @@
     <h2 class="job-id" id="job-title">Job {{ job.job_id[:8] }}...</h2>
   </div>
 
-  <div class="progress-section card" id="progress-section">
+  <div id="status-announcer" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
+
+  <div class="progress-section card" id="progress-section" aria-live="polite" aria-busy="false">
     <div class="progress-header">
       <span class="progress-label">Processing Progress</span>
       <span class="progress-pct" id="progress-pct">{{ "%.0f"|format(job.progress * 100) }}%</span>
     </div>
-    <div class="progress-track">
+    <div class="progress-track" role="progressbar" aria-valuenow="{{ "%.0f"|format(job.progress * 100) }}" aria-valuemin="0" aria-valuemax="100" aria-label="Processing progress">
       <div class="progress-fill" id="progress-fill" style="width: {{ "%.0f"|format(job.progress * 100) }}%"></div>
     </div>
     {% if job.current_model %}
@@ -32,7 +34,7 @@
   <div class="live-preview-section card" id="live-preview-section" style="display: block">
     <h3 class="section-title">Live Preview</h3>
     <div class="live-preview-wrap">
-      <img id="live-preview-img" class="live-preview-img" alt="Annotated frame from processing" />
+      <img id="live-preview-img" class="live-preview-img" alt="Annotated frame from video processing" />
       <div class="preview-placeholder" id="preview-placeholder">Waiting for first frame...</div>
     </div>
   </div>
@@ -40,7 +42,7 @@
   <div class="video-thumb-section card" id="video-thumb-section">
     <h3 class="section-title">Source Video</h3>
     <div class="video-thumb-wrap">
-      <video id="video-thumb" class="video-thumb" muted preload="metadata"></video>
+      <video id="video-thumb" class="video-thumb" muted preload="metadata" aria-label="Source video preview"></video>
       <div class="video-fallback" id="video-fallback">
         <span class="video-fallback-icon">🎬</span>
         <span>Video preview unavailable</span>
@@ -74,7 +76,7 @@
           <span class="meta-item"><strong>Duration:</strong> {{ "%.1f"|format(r.duration_seconds) }}s</span>
         </div>
         {% if r.output_path %}
-        <a href="/download/{{ job.job_id }}/{{ r.output_path | basename }}" class="btn btn-primary result-download">Download</a>
+        <a href="/download/{{ job.job_id }}/{{ r.output_path | basename }}" class="btn btn-primary result-download" aria-label="Download result for {{ r.model_name }}">Download</a>
         {% endif %}
       </div>
       {% endfor %}