Accessibility improvements

Pete-Fowler · Sep 29, 2024 · 17d5c6e · 17d5c6e
1 parent 1a3fd7a
commit 17d5c6e
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 10 deletions.
diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro
@@ -43,6 +43,7 @@ const { about } = Astro.props;
 
     p {
         max-width: 60ch;
+        line-height: 1.5;
     }
     .image-container {
         padding: 2rem;

diff --git a/src/components/MainSection.astro b/src/components/MainSection.astro
@@ -42,6 +42,7 @@ const { main } = Astro.props;
     p {
         margin-top: 2rem;
         max-width: 50ch;
+        line-height: 1.5;
     }
 
     h2.heading-light {

diff --git a/src/components/ui/ProjectCard.astro b/src/components/ui/ProjectCard.astro
@@ -20,7 +20,7 @@ const { post } = Astro.props;
                 })
             }
         </p>
-        <h4 class="title">{post.title}</h4>
+        <h3 class="title">{post.title}</h3>
         <p class="author">{post.author}</p>
     </article>
 </a>

diff --git a/src/components/ui/YouTubeEmbed.astro b/src/components/ui/YouTubeEmbed.astro
@@ -7,7 +7,8 @@ const { videoId, width = 560, height = 315 } = Astro.props;
 <div class="iframe-box">
     <iframe
       src={`https://www.youtube.com/embed/${videoId}`}
-      title="YouTube video player"
+      title="YouTube video demoing Dimension web portal"
+      aria-label="YouTube video demoing Dimension web portal"
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       referrerpolicy="strict-origin-when-cross-origin"

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -18,7 +18,6 @@ interface Props {
 
 const { site_title, site_description, email, socials } = Astro.props;
 
-// TODO: Add the left and right social, email menus (not on mobile)
 ---
 
 <!DOCTYPE html>
@@ -30,8 +29,12 @@ const { site_title, site_description, email, socials } = Astro.props;
 	</head>
 	<body class="dark">
 		<Navbar/>
-		<slot />
-		<SideFrameNav email={email} socials={socials}/>
+		<main>
+			<slot />
+		</main>
+		<nav>
+			<SideFrameNav email={email} socials={socials}/>
+		</nav>
 	</body>
 </html>
 

diff --git a/src/layouts/components/Footer.astro b/src/layouts/components/Footer.astro
@@ -1,7 +1,9 @@
-<small>
-    Forked, customized and built upon from 
-    <a href="https://github.com/skillaroo/build-your-web-dev-portfolio" target="_blank">this Astro theme</a>
-</small>
+<footer>
+    <small>
+        Forked, customized and built upon from
+        <a href="https://github.com/skillaroo/build-your-web-dev-portfolio" target="_blank">this Astro theme</a>
+    </small>
+</footer>
 <style>
 small {
     display: block;

diff --git a/src/layouts/components/ThemeIcon.astro b/src/layouts/components/ThemeIcon.astro
@@ -1,4 +1,4 @@
-<button id="themeToggle">
+<button id="themeToggle" aria-label="toggle light and dark theme">
     <svg width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
       <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>