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

@@ -0,0 +1,5 @@
+---
+'@astrojs/example-blog': patch
+---
+
+Improved accessibility of the example blog

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}>}
+{next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
-{prev && <link rel="prev" href={new URL(prev, canonicalURL).href}>}
+{prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>}
 
 <!-- OpenGraph -->
 <meta property="og:title" content={title}>

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>

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="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
-    <a class="next" href={nextUrl || '#'}>Next</a>
+    <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
   </nav>
 </div>

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>

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>
+      <h2 class="title">{content.title}</h2>
-      <h3 class="description">{content.description}</h3>
+      <p class="description">{content.description}</p>
-      <img class="img" src={content.image} alt={content.title}>
+      <img class="img" src={content.image} alt="">
       <article class="article">
         <slot />
       </article>

examples/blog/src/pages/$author.astro

@@ -93,10 +93,10 @@ export async function createCollection() {
     <Nav title={title} />
 
     <main class="wrapper">
-      <h1 class="title">
+      <h2 class="title">
-        <div class="avatar"><img class="avatar-img" src={author.image} alt={author.name}></div>
+        <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>

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>

examples/blog/src/pages/about.astro

@@ -49,8 +49,10 @@ let title = "About";
     <Nav title={title} />
 
     <main class="wrapper">
-      <h1 class="title">{title}</h1>
+      <h2 class="title">{title}</h2>
-      <figure class="hero"><img class="hero-img" src="/images/chapter-01.jpg"></figure>
+      <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>