Improvement/accessibility blog example (#475)
* improvements: updated heading tag order, removed repeat alt values, added aria-labels * chore: added changeset
This commit is contained in:
parent
5c01526731
commit
e711668556
9 changed files with 25 additions and 17 deletions
5
.changeset/odd-pianos-argue.md
Normal file
5
.changeset/odd-pianos-argue.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@astrojs/example-blog': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Improved accessibility of the example blog
|
|
@ -23,8 +23,8 @@ export let canonicalURL: string | undefined;
|
||||||
|
|
||||||
<!-- SEO -->
|
<!-- SEO -->
|
||||||
<link rel="canonical" href={canonicalURL}>
|
<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 -->
|
<!-- OpenGraph -->
|
||||||
<meta property="og:title" content={title}>
|
<meta property="og:title" content={title}>
|
||||||
|
|
|
@ -51,9 +51,10 @@ a {
|
||||||
<nav class="header">
|
<nav class="header">
|
||||||
<h1 class="title">Don’s Blog</h1>
|
<h1 class="title">Don’s Blog</h1>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="/posts">All Posts</a></li>
|
<li><a href="/posts">All Posts</a></li>
|
||||||
<li><a href="/author/don">Author: Don</a></li>
|
<li><a href="/author/don">Author: Don</a></li>
|
||||||
<li><a href="/author/sancho">Author: Sancho</a></li>
|
<li><a href="/author/sancho">Author: Sancho</a></li>
|
||||||
<li><a href="/about">About</a></li>
|
<li><a href="/about">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
|
@ -34,7 +34,7 @@ export let nextUrl: string;
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<nav class="nav">
|
<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>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,7 +33,7 @@ function formatDate(date) {
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h2 {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 2.75em;
|
font-size: 2.75em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -52,12 +52,12 @@ time {
|
||||||
<article class="post">
|
<article class="post">
|
||||||
|
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<h1>{post.title}</h1>
|
<h2>{post.title}</h2>
|
||||||
<a class="author" href={`/author/${post.author}`}>{author.name}</a>
|
<a class="author" href={`/author/${post.author}`}>{author.name}</a>
|
||||||
<time class="date" datetime={post.date}>{formatDate(post.date)}</time>
|
<time class="date" datetime={post.date}>{formatDate(post.date)}</time>
|
||||||
<p class="description">
|
<p class="description">
|
||||||
{post.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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -62,9 +62,9 @@ import authorData from '../data/authors.json';
|
||||||
<Nav />
|
<Nav />
|
||||||
|
|
||||||
<main class="wrapper">
|
<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">
|
<article class="article">
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -93,10 +93,10 @@ export async function createCollection() {
|
||||||
<Nav title={title} />
|
<Nav title={title} />
|
||||||
|
|
||||||
<main class="wrapper">
|
<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}
|
{author.name}
|
||||||
</h1>
|
</h2>
|
||||||
<small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
|
<small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
|
||||||
{collection.data.map((post) => <PostPreview post={post} author={author} />)}
|
{collection.data.map((post) => <PostPreview post={post} author={author} />)}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -71,7 +71,7 @@ export async function createCollection() {
|
||||||
<Nav title={title} />
|
<Nav title={title} />
|
||||||
|
|
||||||
<main class="wrapper">
|
<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>
|
<small class="count">{collection.start + 1}–{collection.end + 1} of {collection.total}</small>
|
||||||
{collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
|
{collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -49,8 +49,10 @@ let title = "About";
|
||||||
<Nav title={title} />
|
<Nav title={title} />
|
||||||
|
|
||||||
<main class="wrapper">
|
<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">
|
<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>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>
|
<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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue