Accessibility and performance fixes

[delucis]

This is a bit of an omnibus PR tackling many small paper cuts around accessibility and performance on astro.build. That makes it a little tricky to review, but here are the changes broken down by where they were made. For the most part nothing has changed visually, or if it has, in very tiny ways I would expect no-one to notice — I’ve marked these with 👁️.

Miscellaneous

• Adds missing accessible labels to UI and images in the gallery components for individual theme pages, e.g. /themes/details/portfolio/
• Fixes heading levels in some pages that were jumping h1 => h3, e.g. /privacy/
• Fixes some card grid usage where the structure was ul > article. These are now ul > li > article, e.g. /press/
• Uses trailing slashes on some internal theme and showcase links to match canonical URLs (showcase pages were redirecting, so this change improves performance; theme pages were not so this improves SEO)

/db/ landing page

• Fixes use-case tabs on /db/ to address incorrect aria-* attributes (also reduces JS quite a bit because the custom element was managing a bunch of unnecessary attribute state).
• Fixes text contrast in /db/ features section. (👁️ This is a visual change that does make the illustrations impacted slightly less subtle, but text contrast requirements still need to be met.)
• Fixes accessible labelling of secondary navbar in /db/.
• Fixes miscellaneous misused elements and attributes in /db/ (e.g. <dl> used without <dt> and <dd>)

Homepage

• Uses div > section[role="tabpanel"] for the tabbed interfaces on the landing page instead of ul > li[role="tabpanel"]. The tabpanel role removes the list-item semantics from an li making it invalid to use inside a ul.
• Reduces the amount of blur used on background image in the hero section of the landing page. Safari in particular was really struggling to render the 64px blur over such a large area. Reducing the blur amount has minimal visual impact while fixing performance.
• Sets loading="lazy" on images below the fold on the landing page to improve page load performance.
• Uses an <img> instead of a background image for the background of the homepage hero element to prioritise its loading and improve perceived page performance.
  • 👁️ I also opted to change how the background works across viewports. Currently it is anchored to the left meaning when the viewport gets narrower only the black-to-blue portion of the image is used, which felt like a mistake. It now holds its position centrally so that the mobile view is a more evenly distributed texture similar to the desktop view.
• Reduces size of overly large images on homepage to match rendered size better.
• Uses inline SVGs for logos in islands performance chart instead of <img> elements.
• Fixes content shift from missing width and height attributes in “ecosystem” themes tabs on homepage.

Homepage headline numbers

	Before	After	Change
Initial page weight (uncompressed)*	1,902 kB	617 kB	-68%
Initial page weight (compressed)*	1,561 kB	275 kB	-82%
LCP (first visit, mobile, 4G)	2.4s	1.9s	-20%
LCP (repeat visit, mobile, 4G)	2.4s	1.6s	-33%
LCP (first visit, desktop, cable)	0.9s	0.8s	-11%
LCP (repeat visit, desktop, cable)	1s	0.6s	-40%
Visually complete (desktop, cable)†	2.8s	0.9s	-68%

^{* This is massively reduced thanks to lazy loading assets not needed for the initial view
† The visually complete metric matches when the hero background currently loads. While on a reasonably fast desktop connection LCP is not improved so much (still depends on font loading), the background image now loads way faster.}

Web vitals numbers are from WebPageTest.com. Full runs:

• Before: Mobile, 4G; Desktop, cable
• After: Mobile, 4G; Desktop, cable
• Comparison: Mobile, 4G; Desktop, cable

Here are side-by-side loading comparison for the before/after runs:

A-96ff3b917c1ff2fc1f0666ceab33a9a8a8b99efa.mp4

A-82357d9bddce7a24b80465fb38362f7479f9d52a.mp4

Browser Test Checklist

I have tested this PR on at least three of the following browsers:

• Chrome / Chromium
• Firefox
• Android Firefox (the /db/ page's performance is still diabolically awful here but that's not new to this PR)
• Safari
• iOS Safari

[netlify]

✅ Deploy Preview for astro-www-2 ready!

Name	Link
🔨 Latest commit	507045b
🔍 Latest deploy log	https://app.netlify.com/sites/astro-www-2/deploys/66c862c5d955900008cbce21
😎 Deploy Preview	https://deploy-preview-1228--astro-www-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[yanthomasdev]

Amazing work @delucis! Took a while to go through it all, but it's a massive all-around improvement 💜.