Skip to content

Commit 6b95fd4

Browse files
rdharrdhar
authored
Enhance accessibility with structured tags (#16)
* Enhance accessibility with structured tags * Refactor skip link for improved accessibility and add main content ID for better navigation * Add tabindex to main content for improved accessibility * Update OpenGraph URL to use canonical URL and add Twitter metadata
1 parent 549f9f7 commit 6b95fd4

5 files changed

Lines changed: 35 additions & 22 deletions

File tree

‎src/components/BaseHead.astro‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,32 @@ interface Props {
1414
}
1515
1616
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
17-
1817
const { title, description, image = FallbackImage } = Astro.props;
1918
---
2019

2120
<!-- Global Metadata -->
2221
<meta charset="utf-8" />
2322
<meta name="viewport" content="width=device-width,initial-scale=1" />
23+
<meta name="description" content={description} />
24+
<title>{title}</title>
25+
<link rel="canonical" href={canonicalURL} />
2426
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
2527
<link rel="icon" href="/favicon.ico" />
2628
<link rel="sitemap" href="/sitemap-index.xml" />
2729
<link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={new URL("rss.xml", Astro.site)} />
28-
<meta name="generator" content={Astro.generator} />
2930

30-
<!-- Font -->
31+
<!-- Fonts -->
3132
<Font cssVariable="--font-atkinson" />
3233

33-
<!-- Canonical URL -->
34-
<link rel="canonical" href={canonicalURL} />
35-
36-
<!-- Primary Meta Tags -->
37-
<title>{title}</title>
38-
<meta name="title" content={title} />
39-
<meta name="description" content={description} />
40-
41-
<!-- Open Graph / Facebook -->
34+
<!-- OpenGraph -->
4235
<meta property="og:type" content="website" />
43-
<meta property="og:url" content={Astro.url} />
36+
<meta property="og:url" content={canonicalURL} />
4437
<meta property="og:title" content={title} />
4538
<meta property="og:description" content={description} />
4639
<meta property="og:image" content={new URL(image.src, Astro.url)} />
4740

4841
<!-- Twitter -->
49-
<meta property="twitter:card" content="summary_large_image" />
50-
<meta property="twitter:url" content={Astro.url} />
51-
<meta property="twitter:title" content={title} />
52-
<meta property="twitter:description" content={description} />
53-
<meta property="twitter:image" content={new URL(image.src, Astro.url)} />
42+
<meta name="twitter:card" content="summary_large_image" />
43+
<meta name="twitter:title" content={title} />
44+
<meta name="twitter:description" content={description} />
45+
<meta name="twitter:image" content={new URL(image.src, Astro.url)} />

‎src/components/Header.astro‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { SITE_NAME } from "../consts";
33
import HeaderLink from "./HeaderLink.astro";
44
---
55

6+
<a href="#main-content" class="skip-link">Skip to content</a>
67
<header>
7-
<nav>
8+
<nav aria-label="Primary">
89
<h2><a href="/">{SITE_NAME}</a></h2>
910
<div class="internal-links">
1011
<HeaderLink href="/">Home</HeaderLink>
@@ -67,4 +68,24 @@ import HeaderLink from "./HeaderLink.astro";
6768
display: none;
6869
}
6970
}
71+
.skip-link {
72+
position: absolute;
73+
top: 0;
74+
left: 0;
75+
z-index: 100;
76+
padding: 0.5em 1em;
77+
background: white;
78+
color: var(--black);
79+
text-decoration: none;
80+
font-size: 0.875em;
81+
clip-path: inset(50%);
82+
white-space: nowrap;
83+
overflow: hidden;
84+
}
85+
.skip-link:focus-visible {
86+
clip-path: none;
87+
overflow: visible;
88+
outline: 2px solid var(--accent);
89+
outline-offset: 2px;
90+
}
7091
</style>

‎src/layouts/BlogPost.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
5757

5858
<body>
5959
<Header />
60-
<main>
60+
<main id="main-content" tabindex="-1">
6161
<article>
6262
<div class="hero-image">
6363
{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}

‎src/pages/blog/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const posts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueO
8686
</head>
8787
<body>
8888
<Header />
89-
<main>
89+
<main id="main-content" tabindex="-1">
9090
<section>
9191
<ul>
9292
{

‎src/pages/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
1212
</head>
1313
<body>
1414
<Header />
15-
<main>
15+
<main id="main-content" tabindex="-1">
1616
<h1>🧑‍🚀 Hello, Astronaut!</h1>
1717
<p>
1818
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This template serves as a lightweight, minimally-styled starting point for anyone looking to build a personal website, blog, or portfolio with Astro.

0 commit comments

Comments
 (0)