From e711668556ab5230af7af611c941f59014d27a1b Mon Sep 17 00:00:00 2001
From: Brian Hinton <accounts@mrbrianhinton.com>
Date: Wed, 16 Jun 2021 17:19:23 -0400
Subject: [PATCH] Improvement/accessibility blog example (#475)

* improvements: updated heading tag order, removed repeat alt values, added aria-labels

* chore: added changeset
---
 .changeset/odd-pianos-argue.md                 | 5 +++++
 examples/blog/src/components/MainHead.astro    | 4 ++--
 examples/blog/src/components/Nav.astro         | 3 ++-
 examples/blog/src/components/Pagination.astro  | 4 ++--
 examples/blog/src/components/PostPreview.astro | 6 +++---
 examples/blog/src/layouts/post.astro           | 6 +++---
 examples/blog/src/pages/$author.astro          | 6 +++---
 examples/blog/src/pages/$posts.astro           | 2 +-
 examples/blog/src/pages/about.astro            | 6 ++++--
 9 files changed, 25 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/odd-pianos-argue.md

diff --git a/.changeset/odd-pianos-argue.md b/.changeset/odd-pianos-argue.md
new file mode 100644
index 000000000..c359ae911
--- /dev/null
+++ b/.changeset/odd-pianos-argue.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/example-blog': patch
+---
+
+Improved accessibility of the example blog
diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro
index 86f750ddc..dfc47fc01 100644
--- a/examples/blog/src/components/MainHead.astro
+++ b/examples/blog/src/components/MainHead.astro
@@ -23,8 +23,8 @@ export let canonicalURL: string | undefined;
 
 <!-- SEO -->
 <link rel="canonical" href={canonicalURL}>
-{next && <link rel="next" href={new URL(next, canonicalURL).href}>}
-{prev && <link rel="prev" href={new URL(prev, canonicalURL).href}>}
+{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
+{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>}
 
 <!-- OpenGraph -->
 <meta property="og:title" content={title}>
diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro
index 5949adb0d..5c435b737 100644
--- a/examples/blog/src/components/Nav.astro
+++ b/examples/blog/src/components/Nav.astro
@@ -51,9 +51,10 @@ a {
 <nav class="header">
   <h1 class="title">Don’s Blog</h1>
   <ul class="nav">
+    <li><a href="/">Home</a></li>
     <li><a href="/posts">All Posts</a></li>
     <li><a href="/author/don">Author: Don</a></li>
     <li><a href="/author/sancho">Author: Sancho</a></li>
     <li><a href="/about">About</a></li>
   </ul>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro
index 7b01e59b5..0294e1707 100644
--- a/examples/blog/src/components/Pagination.astro
+++ b/examples/blog/src/components/Pagination.astro
@@ -34,7 +34,7 @@ export let nextUrl: string;
 
 <div class="wrapper">
   <nav class="nav">
-    <a class="prev" href={prevUrl || '#'}>Prev</a>
-    <a class="next" href={nextUrl || '#'}>Next</a>
+    <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
+    <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
   </nav>
 </div>
diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro
index 59c54e8fa..d02a23fe6 100644
--- a/examples/blog/src/components/PostPreview.astro
+++ b/examples/blog/src/components/PostPreview.astro
@@ -33,7 +33,7 @@ function formatDate(date) {
   margin-left: 1em;
 }
 
-h1 {
+h2 {
   font-weight: 700;
   font-size: 2.75em;
   line-height: 1;
@@ -52,12 +52,12 @@ time {
 <article class="post">
 
   <div class="data">
-    <h1>{post.title}</h1>
+    <h2>{post.title}</h2>
     <a class="author" href={`/author/${post.author}`}>{author.name}</a>
     <time class="date" datetime={post.date}>{formatDate(post.date)}</time>
     <p class="description">
       {post.description}
-      <a class="link" href={post.url}>Read</a>
+      <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a>
     </p>
   </div>
 </article>
diff --git a/examples/blog/src/layouts/post.astro b/examples/blog/src/layouts/post.astro
index 5149528a0..3379bd2dc 100644
--- a/examples/blog/src/layouts/post.astro
+++ b/examples/blog/src/layouts/post.astro
@@ -62,9 +62,9 @@ import authorData from '../data/authors.json';
     <Nav />
 
     <main class="wrapper">
-      <h1 class="title">{content.title}</h1>
-      <h3 class="description">{content.description}</h3>
-      <img class="img" src={content.image} alt={content.title}>
+      <h2 class="title">{content.title}</h2>
+      <p class="description">{content.description}</p>
+      <img class="img" src={content.image} alt="">
       <article class="article">
         <slot />
       </article>
diff --git a/examples/blog/src/pages/$author.astro b/examples/blog/src/pages/$author.astro
index 6f4b0fceb..687cabb42 100644
--- a/examples/blog/src/pages/$author.astro
+++ b/examples/blog/src/pages/$author.astro
@@ -93,10 +93,10 @@ export async function createCollection() {
     <Nav title={title} />
 
     <main class="wrapper">
-      <h1 class="title">
-        <div class="avatar"><img class="avatar-img" src={author.image} alt={author.name}></div>
+      <h2 class="title">
+        <div class="avatar"><img class="avatar-img" src={author.image} alt=""}></div>
         {author.name}
-      </h1>
+      </h2>
       <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
       {collection.data.map((post) => <PostPreview post={post} author={author} />)}
     </main>
diff --git a/examples/blog/src/pages/$posts.astro b/examples/blog/src/pages/$posts.astro
index 8ca4214a1..688ec734d 100644
--- a/examples/blog/src/pages/$posts.astro
+++ b/examples/blog/src/pages/$posts.astro
@@ -71,7 +71,7 @@ export async function createCollection() {
     <Nav title={title} />
 
     <main class="wrapper">
-      <h1 class="title">All Posts</h1>
+      <h2 class="title">All Posts</h2>
       <small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
       {collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
     </main>
diff --git a/examples/blog/src/pages/about.astro b/examples/blog/src/pages/about.astro
index 11ae980c7..d7a219057 100644
--- a/examples/blog/src/pages/about.astro
+++ b/examples/blog/src/pages/about.astro
@@ -49,8 +49,10 @@ let title = "About";
     <Nav title={title} />
 
     <main class="wrapper">
-      <h1 class="title">{title}</h1>
-      <figure class="hero"><img class="hero-img" src="/images/chapter-01.jpg"></figure>
+      <h2 class="title">{title}</h2>
+      <div class="hero">
+        <img class="hero-img" src="/images/chapter-01.jpg" alt="">
+      </div>
       <div class="text">
         <p>The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections from Motteaux.”</p>
         <p>See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these woodcuts and steel engravings well match Quixote’s dreams.</p>