From 3ddb9047b1392be3deb4cdf65181dfec1f7e13bb Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Mon, 23 Nov 2020 14:41:37 -0800
Subject: [PATCH] site a11y: add missing h1s

---
 site/src/routes/blog/index.svelte     |  1 +
 site/src/routes/docs/index.svelte     |  1 +
 site/src/routes/examples/index.svelte |  1 +
 site/src/routes/index.svelte          |  1 +
 site/static/global.css                | 13 +++++++++++++
 5 files changed, 17 insertions(+)

diff --git a/site/src/routes/blog/index.svelte b/site/src/routes/blog/index.svelte
index 92fc5ce96d..9f4192975a 100644
--- a/site/src/routes/blog/index.svelte
+++ b/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}>
diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte
index 7f6fad92d3..a276b0edb7 100644
--- a/site/src/routes/docs/index.svelte
+++ b/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}/>
diff --git a/site/src/routes/examples/index.svelte b/site/src/routes/examples/index.svelte
index 9fd783f950..070f12b1ac 100644
--- a/site/src/routes/examples/index.svelte
+++ b/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} />
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index 73fbffbc6a..af8afefbb7 100644
--- a/site/src/routes/index.svelte
+++ b/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"
diff --git a/site/static/global.css b/site/static/global.css
index 7aa0715a98..329a811545 100644
--- a/site/static/global.css
+++ b/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;
+}