[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

[hxrshxz]

@perminder-17 I would like to work on this issue, could you please assign? if this issue is apt

[perminder-17]

Tagging @coseeian for the input. I have not worked much with the website?

[coseeian]

1. Regarding “Settings component not reachable via landmark navigation”, I agree this should be fixed. As also discussed in issue [Page Structure] Ensure all page content is contained within landmarks #928, every major section should ideally be contained within one of the semantic landmarks such as <header>, <main>, <aside>, or <footer>.
2. About the missing ARIA labels on <main>, <nav>, and <footer> landmarks — ARIA labels are mainly required when there are multiple landmarks of the same type on a page, so that users can distinguish between them. Since in this case there’s only one of each, I think adding aria-label is optional rather than required.