fix: adjust caption rendering

Author: serhalp

app/pages/blog/release/0.8.md

@@ -37,7 +37,7 @@ npmx now has a rich command palette for efficient, keyboard-driven access to eve
   >
     <source src="/blog/release/0.8/cmd-palette-demo.mp4" type="video/mp4" />
   </video>
-  <figcaption>
+  <figcaption class="sr-only">
     A screen recording demonstrating npmx's command palette. The video shows: the npmx home page in dark mode; opening the command palette with Cmd+K to reveal navigation, connections, and settings sections; using the palette to toggle to light mode, then back to dark mode; using the palette to switch the interface language to Vietnamese and back to English; navigating to the Vue package page and using the palette to access package actions like "download tarball" and "copy package name"; browsing into the package's source files in the built-in code viewer; using the palette to switch between Vue versions from a list filtered by a semantic versioning specifier; and finally typing "tinyexec" into the palette to search for a different package. Throughout, individual key presses are shown in an on-screen overlay.
   </figcaption>
 </figure>
@@ -71,16 +71,17 @@ four!), with an aggregate measure of traction (downloads, freshness, likes) on t
 
 <figure>
   <img src="/blog/release/0.8/quadrant-graph-example.png" alt="Scatter plot of package traction vs. ergonomics, with delineated quadrants, showing seven UI component packages" />
-  <figcaption>
-    Dark-themed scatter plot titled ‘Package traction vs ergonomics.’ The vertical axis is labeled ‘Ergonomics’ (increasing upward), and the horizontal axis is labeled ‘Traction’ (increasing to the right). The chart is divided into four labeled regions: top left ‘Hidden gems,’ top right ‘Solid picks,’ bottom right ‘Popular with tradeoffs,’ and bottom left ‘Avoid.’ Several UI component libraries are plotted as colored dots:
-    - ‘emotion’ appears near the top center, indicating high ergonomics with moderate traction.
-    - ‘bootstrap’ is in the upper right quadrant, showing strong traction and relatively high ergonomics.
-    - ‘reka-ui’ and ‘radix-ui’ are on the right side near the horizontal midline, indicating high traction with moderate ergonomics.
-    - ‘@chakra-ui/react’ is in the lower right quadrant, suggesting high traction but lower ergonomics.
-    - ‘@material/web’ is near the bottom center, indicating low ergonomics and moderate traction.
-    - ‘solid-ui’ is on the far left near the horizontal midline, indicating low traction with moderate ergonomics.
-
-    Faint concentric rounded rectangles in the background suggest scoring tiers, and axis lines intersect at the center of the chart.
+  <figcaption class="sr-only">
+Dark-themed scatter plot titled ‘Package traction vs ergonomics.’ The vertical axis is labeled ‘Ergonomics’ (increasing upward), and the horizontal axis is labeled ‘Traction’ (increasing to the right). The chart is divided into four labeled regions: top left ‘Hidden gems,’ top right ‘Solid picks,’ bottom right ‘Popular with tradeoffs,’ and bottom left ‘Avoid.’ Several UI component libraries are plotted as colored dots:
+
+  - ‘emotion’ appears near the top center, indicating high ergonomics with moderate traction.
+  - ‘bootstrap’ is in the upper right quadrant, showing strong traction and relatively high ergonomics.
+  - ‘reka-ui’ and ‘radix-ui’ are on the right side near the horizontal midline, indicating high traction with moderate ergonomics.
+  - ‘@chakra-ui/react’ is in the lower right quadrant, suggesting high traction but lower ergonomics.
+  - ‘@material/web’ is near the bottom center, indicating low ergonomics and moderate traction.
+  - ‘solid-ui’ is on the far left near the horizontal midline, indicating low traction with moderate ergonomics.
+
+Faint concentric rounded rectangles in the background suggest scoring tiers, and axis lines intersect at the center of the chart.
 
   </figcaption>
 </figure>