♿ Aria: [UX improvement] Accessible Canvas Focus & Live Region

index.html

@@ -887,7 +887,8 @@ <h2 id="playlist-title"><span aria-hidden="true">🎵</span> Jukebox</h2>
         </button>
     </div>
 
-    <canvas id="glCanvas" role="img" aria-label="Game World: Use mouse and keyboard to navigate"></canvas>
+    <canvas id="glCanvas" role="img" aria-label="Immersive pastel candy forest world with glowing mushrooms, floating clouds, and music-reactive elements" tabindex="0" aria-live="polite" aria-describedby="world-status"></canvas>
+    <div id="world-status" aria-live="polite" class="visually-hidden">Loading candy world...</div>
     <script type="module" src="src/main.ts"></script>
 </body>
 

src/core/main.ts

@@ -286,6 +286,7 @@ console.log(`[Startup] Camera positioned at ground height: y=${camera.position.y
 
 // --- START BUTTON + MAP GENERATION (unchanged UX) ---
 const startButton = document.getElementById('startButton') as HTMLButtonElement | null;
+const statusEl = document.getElementById('world-status');
 
 if (startButton) {
     startButton.disabled = false;
@@ -451,6 +452,11 @@ if (startButton) {
                 const baseLabel = label ?? getGenerationLabel(requestedMode);
                 const progressLabel = entityType ? `${baseLabel} · ${entityType}` : baseLabel;
                 loadingScreen.updateProgress(percent, progressLabel);
+
+                if (statusEl) {
+                    statusEl.textContent = progressLabel;
+                }
+
                 startButton.style.background = requestedMode === 'CORE'
                     ? `linear-gradient(90deg, #FF9ECD ${percent}%, #FFD4E3 ${percent}%)`
                     : `linear-gradient(90deg, #FF6B6B ${percent}%, #FFB6C1 ${percent}%)`;
@@ -478,6 +484,10 @@ if (startButton) {
             loadingScreen.completePhase('map-generation');
             loadingScreen.hide();
 
+            if (statusEl) {
+                statusEl.textContent = 'World generated. Welcome to Candy World.';
+            }
+
             // ♿ Aria: Announce that the game is fully loaded and exploration has started
             import('../ui/announcer.ts').then(({ announce }) => {
                 announce('World generated. Welcome to Candy World.', 'assertive');

style.css

@@ -629,3 +629,22 @@ button.keyboard-active,
     transform: scale(0.95);
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
+
+
+/* ♿ Aria: Canvas focus visible state */
+#glCanvas:focus-visible {
+    outline: 3px solid rgba(255, 182, 255, 0.8);
+    box-shadow: 0 0 20px rgba(180, 255, 200, 0.6);
+}
+
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}