site a11y: add missing h1s (#5715)

Author: geoffrich

site/src/routes/blog/index.svelte

@@ -18,6 +18,7 @@
 	<meta name="Description" content="Articles about Svelte and UI development">
 </svelte:head>
 
+<h1 class="visually-hidden">Blog</h1>
 <div class='posts stretch'>
 	{#each posts as post}
 		<article class='post' data-pubdate={post.metadata.dateString}>

site/src/routes/docs/index.svelte

@@ -19,4 +19,5 @@
 	<meta name="Description" content="Cybernetically enhanced web apps">
 </svelte:head>
 
+<h1 class="visually-hidden">API Docs</h1>
 <Docs {sections}/>

site/src/routes/examples/index.svelte

@@ -100,6 +100,7 @@
 	<meta name="Description" content="Interactive example Svelte apps">
 </svelte:head>
 
+<h1 class="visually-hidden">Examples</h1>
 <div class='examples-container' bind:clientWidth={width}>
 	<div class="viewport offset-{offset}">
 		<TableOfContents {sections} active_section={active_slug} {isLoading} />

site/src/routes/index.svelte

@@ -34,6 +34,7 @@
 	<meta name="Description" content="Cybernetically enhanced web apps">
 </svelte:head>
 
+<h1 class="visually-hidden">Svelte</h1>
 <Hero
 	title="Svelte"
 	tagline="Cybernetically enhanced web apps"

site/static/global.css

@@ -29,3 +29,16 @@ h5:hover .anchor,
 h6:hover .anchor {
 	opacity: 1;
 }
+
+/* visually hidden, but accessible to assistive tech */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}