♿ live region

static/css/style.css

@@ -65,6 +65,19 @@ body {
     background-color: var(--color-background);
 }
 
+/* Screen reader only content - visually hidden but accessible to assistive technologies */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
 /* Focus indicators for accessibility */
 a:focus,
 button:focus,

static/js/comic-nav.js

@@ -32,6 +32,12 @@
         const title = comic.title || `#${comic.number}`;
         currentComicNumber = comic.number;
 
+        // Announce comic change to screen readers
+        const announcer = document.getElementById('comic-announcer');
+        if (announcer) {
+            announcer.textContent = `Loaded comic ${title}, dated ${comic.formatted_date || comic.date}`;
+        }
+
         // Update container class for full-width option
         const container = document.querySelector('.comic-container');
         if (comic.full_width) {
@@ -244,12 +250,16 @@
             return;
         }
 
+        const announcer = document.getElementById('comic-announcer');
+
         switch(event.key) {
             case 'ArrowLeft':
                 // Previous comic
                 if (currentComicNumber > 1) {
                     event.preventDefault();
                     loadComic(currentComicNumber - 1);
+                } else if (announcer) {
+                    announcer.textContent = 'Already at the first comic';
                 }
                 break;
             case 'ArrowRight':
@@ -257,6 +267,8 @@
                 if (currentComicNumber < totalComics) {
                     event.preventDefault();
                     loadComic(currentComicNumber + 1);
+                } else if (announcer) {
+                    announcer.textContent = 'Already at the latest comic';
                 }
                 break;
             case 'Home':
@@ -264,6 +276,8 @@
                 if (currentComicNumber > 1) {
                     event.preventDefault();
                     loadComic(1);
+                } else if (announcer) {
+                    announcer.textContent = 'Already at the first comic';
                 }
                 break;
             case 'End':
@@ -271,6 +285,8 @@
                 if (currentComicNumber < totalComics) {
                     event.preventDefault();
                     loadComic(totalComics);
+                } else if (announcer) {
+                    announcer.textContent = 'Already at the latest comic';
                 }
                 break;
         }