SEO and accessibility

Vatsim-Scandinavia · Jul 12, 2024 · 2eab817 · 2eab817
1 parent d0c7d14
commit 2eab817
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 12 deletions.
diff --git a/src/components/Events.astro b/src/components/Events.astro
@@ -46,7 +46,7 @@ import CardButton from "../components/ui/CardButton.astro";
 </div>
 
 <h2 class="font-semibold text-lg text-secondary mt-8 mb-2 dark:text-white p-2">Upcoming</h2>
-<div class="flex flex-row gap-2 overflow-x-scroll p-4">
+<div class="flex flex-row gap-2 overflow-x-scroll p-4" tabindex="0">
     <img
     src="/img/events/procdctreg.png"
     alt=""

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,4 +1,4 @@
-<div class="w-full h-40 text-xs md:text-medium bg-secondary flex flex-col justify-center items-center p-2 gap-4 text-white">
+<footer class="w-full h-40 text-xs md:text-medium bg-secondary flex flex-col justify-center items-center p-2 gap-4 text-white">
     <div class="text-sm md:text-medium text-center">
         <ul class="flex gap-4">
             <li><a class="text-white hover:text-primary hover:no-underline" href="https://wiki.vatsim-scandinavia.org/books/privacy-policies" target="_blank">Privacy Policy</a></li>
@@ -10,4 +10,4 @@
     <div class="flex flex-col text-center break-words">
         <p class="whitespace-break-spaces">© VATSIM Scandinavia - FOR FLIGHT SIMULATION USE ONLY. All rights reserved</p>
     </div>
-</div>
+</footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -8,19 +8,19 @@ import Navigation from "./Navigation";
         <div class="w-[1300px] flex flex-col lg:flex-row justify-between items-center">
             <div class="flex w-screen lg:w-auto items-center justify-between">
                 <a href="/">
-                    <img width="150px" src="/img/logos/negative.svg">
+                    <img width="150" src="/img/logos/negative.svg" alt="VATSIM Scandinavia logo">
                 </a>
                 <div class="block lg:hidden">
                     <MenuIcon class="w-8 h-8 text-gray-200" />
                 </div>
             </div>
             <MenuItems class="hidden w-screen px-8 lg:w-auto mt-2 lg:flex lg:mt-0 text-xl ">
-                <ul class="flex flex-col lg:flex-row lg:gap-3 items-center">
+                <div class="flex flex-col lg:flex-row lg:gap-3 items-center">
                     <Navigation client:visible/>
                     <div class="w-full justify-start py-4 lg:hidden">
                         <ThemeToggle client:only/>
                     </div>
-                </ul>
+                </div>
             </MenuItems>
             <div class="hidden lg:block">
                 <ThemeToggle client:only/>

diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
@@ -17,7 +17,7 @@ export default function ThemeToggle() {
     }, [theme]);
 
     return (
-        <button className="text-xl" onClick={handleClick}>
+        <button className="text-xl" onClick={handleClick} aria-label="Toggle between dark and light mode">
         {
             theme === "light" 
             ? 

diff --git a/src/layout/Layout.astro b/src/layout/Layout.astro
@@ -10,9 +10,22 @@ import '../globals.css'
 
 <html lang="en" class="scroll-smooth">
 <head>
+    <title>{SiteTitle}</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{SiteTitle}</title>
+
+    <meta name="author" content="VATSIM Scandinavia">
+    <meta name="keywords" content="VATSIM, Scandinavia, vACC, Virtual, Air, Traffic, Simulation, Network, Denmark, Finland, Iceland, Norway, Sweden">
+    <meta name="theme-color" content="#1a4860">
+
+    <meta name="description" content="Home vACC of Denmark, Finland, Iceland, Norway & Sweden on the VATSIM Network">
+    <meta property="og:description" content="Home vACC of Denmark, Finland, Iceland, Norway & Sweden on the VATSIM Network">
+    <meta property="og:url" content="https://vatsim-scandinavia.org">
+    <meta property="og:title" content="Home">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="VATSIM Scandinavia">
+    <meta property="og:locale" content="en_GB">
+
     <link rel="shortcut icon" href="/Arrow.svg" type="image/x-icon">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -13,7 +13,7 @@ allAnnouncements.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.dat
 ---
 
 <Layout SiteTitle="VATSIM Scandinavia">
-    <div class="w-full h-full flex flex-col items-center -mt-20">
+    <main class="w-full h-full flex flex-col items-center -mt-20">
 
         <div class="w-full h-[calc(50vh)] flex justify-center mt-[150px]" >
             <div class="max-w-[1300px] w-full h-full flex">
@@ -26,12 +26,12 @@ allAnnouncements.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.dat
                     </p>
                     <div class="flex gap-4 pt-4 w-full">
                         <HeroButton href="https://wiki.vatsim-scandinavia.org/books/getting-started-AVr/chapter/joining-vatsim-scandinavia" text="Join VATSIM Scandinavia" color="bg-success"/>
-                        <HeroButton href="http://discord.vatsim-scandinavia.org" text="Join our Discord" color="bg-[#8397ee] dark:bg-[#5c6aa7]"/>
+                        <HeroButton href="http://discord.vatsim-scandinavia.org" text="Join our Discord" color="bg-[#6172bd] dark:bg-[#5c6aa7]"/>
                     </div>
                 </div>
                 <div class="w-full hidden xl:block">
                     <div class="w-full h-full flex items-center justify-center">
-                        <img src="/img/euroscope.svg" class="w-full"/>
+                        <img src="/img/euroscope.svg" alt="Person sitting in front of computer and microphone controlling airplanes" class="w-full"/>
                     </div>
                 </div>
             </div>
@@ -92,5 +92,5 @@ allAnnouncements.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.dat
                 </div>                    
             </div>
         </div>
-        </div>
+    </main>
 </Layout>