Improvement/accessibility blog example (#475)

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

* chore: added changeset

4 files changed, 9 insertions, 8 deletions

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>