Merge pull request #181 from reuters-graphics/header-fixes

minor tweaks to site header for a11y

.changeset/few-pets-notice.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Adds a skip link to the header component

src/components/Article/Article.svelte

@@ -42,7 +42,7 @@
   };
 </script>
 
-<main>
+<main id="main-content">
   <article {id} class:embedded {role} use:cssVariables="{columnWidthVars}">
     <!-- Article content -->
     <slot />

src/components/SiteHeader/SiteHeader.svelte

@@ -49,13 +49,14 @@
     --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
+  <a href="#main-content" class="skip-link"> Skip to main content </a>
   <div class="nav-container show-nav">
     <div class="scroll-container">
       <div class="inner">
         <div class="main-bar">
           <div class="logo-container">
             <div class="logo">
-              <a href="https://www.reuters.com">
+              <a href="https://www.reuters.com" aria-label="Reuters home">
                 <ReutersLogo
                   logoColour="var(--nav-accent)"
                   textColour="var(--nav-primary)"
@@ -248,4 +249,20 @@
       }
     }
   }
+
+  //Skip link styling. More about what a skip-link is and why we have it: https://www.w3schools.com/accessibility/accessibility_skip_links.php#:~:text=The%20HTML%20of%20a%20skip,to%20it%20with%20an%20anchor.
+  .skip-link {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  .skip-link:focus {
+    position: static;
+    width: auto;
+    height: auto;
+  }
 </style>