Added a skip to main content link (#276)

DFE-Digital · Jul 29, 2024 · c9dc586 · c9dc586
1 parent 5d1a4df
commit c9dc586
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/Dfe.EarlyYearsQualification.Web/Views/Shared/_Layout.cshtml b/src/Dfe.EarlyYearsQualification.Web/Views/Shared/_Layout.cshtml
@@ -14,9 +14,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>@ViewData["Title"] - Check an Early Years qualification</title>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
     <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.svg"/>
     @Html.GovUkFrontendStyleImports()
+    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
     @{
         if (GtmConfiguration.UseCookies && !string.IsNullOrEmpty(gtmTag))
         {
@@ -38,15 +38,15 @@
         <!-- End Google Tag Manager (noscript) -->
     }
 }
-
+<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
 @Html.GovUkFrontendJsEnabledScript()
 @{
     await Html.RenderPartialAsync("_Header");
 }
 
 <div class="govuk-width-container">
     @await RenderSectionAsync("BeforeMainContent", false)
-    <main class="govuk-main-wrapper" role="main" class="pb-3">
+    <main class="govuk-main-wrapper" role="main" class="pb-3" id="main-content">
         @RenderBody()
     </main>
 </div>

diff --git a/src/Dfe.EarlyYearsQualification.Web/wwwroot/css/site.css b/src/Dfe.EarlyYearsQualification.Web/wwwroot/css/site.css
@@ -53,4 +53,8 @@ body {
 
 .chevron-card__link:visited::after {
     border-color: #4C2C92;
+}
+
+.govuk-skip-link:focus {
+    margin-bottom: 0!important;
 }