diff --git a/public/analytics.js b/public/analytics.js
index 86c1d22d..d9376c5c 100644
--- a/public/analytics.js
+++ b/public/analytics.js
@@ -75,7 +75,7 @@
           <h2>📊 Mesh Analytics</h2>
           <p class="text-muted">Deep dive into your mesh network data</p>
           <div id="analyticsRegionFilter" class="region-filter-container"></div>
-          <div class="analytics-tabs" id="analyticsTabs">
+          <div class="analytics-tabs" id="analyticsTabs" role="tablist" aria-label="Analytics tabs">
             <button class="tab-btn active" data-tab="overview">Overview</button>
             <button class="tab-btn" data-tab="rf">RF / Signal</button>
             <button class="tab-btn" data-tab="topology">Topology</button>
@@ -90,7 +90,7 @@
             <button class="tab-btn" data-tab="prefix-tool">Prefix Tool</button>
           </div>
         </div>
-        <div id="analyticsContent" class="analytics-content">
+        <div id="analyticsContent" class="analytics-content" aria-live="polite">
           <div class="text-center text-muted" style="padding:40px">Loading analytics…</div>
         </div>
       </div>`;
diff --git a/public/app.js b/public/app.js
index 6323e47e..93310f85 100644
--- a/public/app.js
+++ b/public/app.js
@@ -472,6 +472,12 @@ function navigate() {
     const ms = performance.now() - t0;
     if (ms > 100) console.warn(`[SLOW PAGE] ${basePage} init took ${Math.round(ms)}ms`);
     app.classList.remove('page-enter'); void app.offsetWidth; app.classList.add('page-enter');
+    // #630-7: SPA focus management — move focus to first heading or main content
+    requestAnimationFrame(function() {
+      var heading = app.querySelector('h1, h2, h3, [role="heading"]');
+      if (heading) { heading.setAttribute('tabindex', '-1'); heading.focus({ preventScroll: true }); }
+      else { app.setAttribute('tabindex', '-1'); app.focus({ preventScroll: true }); }
+    });
   } else {
     app.innerHTML = `<div style="padding:40px;text-align:center;color:#6b7280"><h2>${route}</h2><p>Page not yet implemented.</p></div>`;
   }
diff --git a/public/live.js b/public/live.js
index 72d2cfea..80cc8024 100644
--- a/public/live.js
+++ b/public/live.js
@@ -754,7 +754,7 @@
             <label class="audio-slider-label">Vol <input type="range" id="audioVolSlider" min="0" max="100" value="30" class="audio-slider"><span id="audioVolVal">30</span></label>
           </div>
         </div>
-        <div class="live-overlay live-feed" id="liveFeed">
+        <div class="live-overlay live-feed" id="liveFeed" aria-live="polite" aria-relevant="additions" role="log">
           <button class="feed-hide-btn" id="feedHideBtn" title="Hide feed">✕</button>
         </div>
         <button class="feed-show-btn hidden" id="feedShowBtn" title="Show feed">📋</button>
@@ -1323,7 +1323,7 @@
       let html = `
         <div style="padding:16px;">
           <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
-            <span class="${statusDot}" style="font-size:18px">●</span>
+            <span class="${statusDot}" style="font-size:18px" aria-hidden="true">●</span>
             <h3 style="margin:0;font-size:16px;font-weight:700;">${escapeHtml(n.name || 'Unknown')}</h3>
           </div>
           <div style="margin-bottom:12px;">
diff --git a/public/nodes.js b/public/nodes.js
index 94de855f..bd557330 100644
--- a/public/nodes.js
+++ b/public/nodes.js
@@ -324,7 +324,7 @@
       </div>
       <div id="nodesRegionFilter" class="region-filter-container"></div>
       <div class="split-layout">
-        <div class="panel-left" id="nodesLeft"></div>
+        <div class="panel-left" id="nodesLeft" aria-live="polite" aria-relevant="additions removals"></div>
         <div class="panel-right empty" id="nodesRight"><span>Select a node to view details</span></div>
       </div>
     </div>`;
@@ -920,6 +920,17 @@
       }
     });
 
+    // #630: Close button for node detail panel (important for mobile full-screen overlay)
+    document.getElementById('nodesRight').addEventListener('click', function(e) {
+      if (e.target.closest('.panel-close-btn')) {
+        const panel = document.getElementById('nodesRight');
+        panel.classList.add('empty');
+        panel.innerHTML = '<span>Select a node to view details</span>';
+        selectedKey = null;
+        renderRows();
+      }
+    });
+
     renderRows();
   }
 
@@ -1007,6 +1018,7 @@
     const dupBadge = dupNameBadge(n.name, n.public_key, dupMap);
 
     panel.innerHTML = `
+      <button class="panel-close-btn" title="Close detail pane (Esc)">✕</button>
       <div class="node-detail">
         <div class="node-detail-name">${escapeHtml(n.name || '(unnamed)')}${dupBadge}</div>
         <div class="node-detail-role">${renderNodeBadges(n, roleColor)}
diff --git a/public/packets.js b/public/packets.js
index ae51174a..dac9314d 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -283,7 +283,7 @@
       }
     }
     app.innerHTML = `<div class="split-layout detail-collapsed">
-      <div class="panel-left" id="pktLeft"></div>
+      <div class="panel-left" id="pktLeft" aria-live="polite" aria-relevant="additions removals"></div>
       <div class="panel-right empty" id="pktRight" aria-live="polite">
         <div class="panel-resize-handle" id="pktResizeHandle"></div>
         ${PANEL_CLOSE_HTML}
diff --git a/public/style.css b/public/style.css
index 5fc62168..86d9bf08 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2165,3 +2165,77 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
   width: 100%;
 }
 .cc-picker-clear:hover { color: var(--text-primary, #e0e0e0); border-color: var(--text-primary, #e0e0e0); }
+
+/* === #630 — Mobile Accessibility Fixes === */
+
+/* #630-1: Touch targets — minimum 44px on touch devices */
+@media (pointer: coarse) {
+  .filter-bar .btn,
+  .filter-group .btn,
+  .tab-btn,
+  .filter-bar input,
+  .filter-bar select,
+  .nav-btn,
+  .region-pill,
+  .region-dropdown-trigger,
+  .multi-select-trigger,
+  .node-count-pill,
+  .analytics-time-range button,
+  .detail-back-btn,
+  .filter-toggle-btn {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  .filter-bar input,
+  .filter-bar select {
+    height: 44px;
+  }
+  .region-dropdown-trigger,
+  .multi-select-trigger {
+    height: 44px;
+  }
+}
+
+/* #630-3: Status text labels — visually hidden text for screen readers */
+.sr-status-label { font-size: 11px; margin-left: 4px; }
+
+/* #630-4: Detail panel as full-width overlay on mobile */
+@media (max-width: 640px) {
+  .split-layout .panel-right:not(.empty) {
+    display: block;
+    position: fixed;
+    top: 52px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    min-width: 0;
+    z-index: 150;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* #630-5: Analytics tabs — horizontal scroll on small screens */
+@media (max-width: 640px) {
+  .analytics-tabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    padding-bottom: 4px;
+  }
+  .analytics-tabs .tab-btn {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+
+/* #630-6: Tables — horizontal scroll wrapper */
+.table-scroll-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+@media (max-width: 640px) {
+  .data-table { min-width: 480px; }
+}