[Page Structure] Settings component lacks landmark and landmarks missing ARIA labels

[hxrshxz]

Title

Settings component lacks landmark and landmarks missing ARIA labels

Description

Related Issue - #928

The Settings component (language selector, accessibility options, search) is not contained in a semantic landmark, and existing landmarks (<nav>, <main>, <footer>) lack descriptive ARIA labels. This prevents screen reader users from efficiently navigating the page using landmark shortcuts.

Steps to Reproduce

1. Navigate to https://p5js.org
2. Use screen reader landmark navigation (NVDA: Insert+F7, VoiceOver: VO+U)
3. Observe:
   • Settings panel not listed in landmarks
   • Landmarks announced without descriptive labels ("navigation" instead of "Main navigation")

Element Locations:

• Settings: #settings-container in /src/components/Settings/index.astro (line 78)
• Nav: <nav> in /src/components/Nav/index.astro (line 28)
• Main: <main id="main-content"> in /src/layouts/BaseLayout.astro (line 119)
• Footer: <footer> in /src/components/Footer/index.astro (line 13)

Actual Behavior

• Settings component not reachable via landmark navigation
• Landmarks announce generically: "navigation", "main", "contentinfo"

Expected Behavior

• Settings wrapped in <aside aria-label="Settings">
• Landmarks labeled: "Main navigation", "Main content", "Site information"

Environments

No response

Suggested Fix

<!-- Settings/index.astro line 78 -->
<aside class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`} aria-label="Settings">

<!-- Nav/index.astro line 28 -->
<nav class={styles.container} aria-label="Main navigation">

<!-- BaseLayout.astro line 119 -->
<main id="main-content" class="relative" aria-label="Main content">

<!-- Footer/index.astro line 13 -->
<footer aria-label="Site information" class="text-body border-t border-black...">

Reference

No response

What is your operating system?

Linux

Web browser and version

No response