🔤 ⚡ Docs UI/UX

docs/layout/simplePage.html.js

@@ -7,9 +7,25 @@ import { prevNext } from "../components/pageUtils.html.js";
 /** @param {Pick<import("../types.d.ts").PageAttrs, "pkg" | "info">} attrs */
 export function simplePage({ pkg, info }){
 	return simulateSlots(el().append(
+		// Skip link for keyboard navigation
+		el("a", {
+			href: "#main-content",
+			className: "skip-link",
+			textContent: "Skip to main content"
+		}),
+
+		// Header with site information
 		el(header, { info, pkg }),
-		el("main").append(
+
+		// Main content area
+		el("main", { id: "main-content", role: "main" }).append(
+			// Page title as an h1
+			el("h1", { className: "page-title", textContent: info.title }),
+
+			// Main content from child elements
 			el("slot"),
+
+			// Navigation between pages
 			el(prevNext, info)
 		)
 	));