diff --git a/application/helpers/hlp_header_helper.php b/application/helpers/hlp_header_helper.php
index 14f7ed338..af8a32807 100644
--- a/application/helpers/hlp_header_helper.php
+++ b/application/helpers/hlp_header_helper.php
@@ -227,3 +227,13 @@ function generateBackwardCompatibleJSMsIe($js)
echo "\n";
}
+/**
+ * Constructs an accessibility skipLink https://www.w3schools.com/accessibility/accessibility_skip_links.php
+ */
+function generateSkipLink($skipID)
+{
+ $toPrint = '';
+ echo $toPrint;
+}
diff --git a/application/views/CisRouterView/CisRouterView.php b/application/views/CisRouterView/CisRouterView.php
index c03330c7a..75ea0313e 100644
--- a/application/views/CisRouterView/CisRouterView.php
+++ b/application/views/CisRouterView/CisRouterView.php
@@ -8,6 +8,7 @@ $includesArray = array(
'tabulator5' => true, // TODO: upgrade to 6 when available
'vue3' => true,
'primevue3' => true,
+ 'skipID' => '#fhccontent',
'vuedatepicker11' => true,
'customCSSs' => array(
'public/css/components/verticalsplit.css',
diff --git a/application/views/templates/FHC-Header.php b/application/views/templates/FHC-Header.php
index 8e813916e..7779bb823 100644
--- a/application/views/templates/FHC-Header.php
+++ b/application/views/templates/FHC-Header.php
@@ -9,12 +9,15 @@
$title = isset($title) ? $title : null;
$refresh = isset($refresh) ? $refresh : null;
$customCSSs = isset($customCSSs) ? $customCSSs : null;
+ $skipID = isset($skipID) ? $skipID : null;
?>
+
+
<?php printPageTitle($title); ?>
diff --git a/public/css/Fhc.css b/public/css/Fhc.css
index 376206f6e..6e6a25200 100644
--- a/public/css/Fhc.css
+++ b/public/css/Fhc.css
@@ -98,3 +98,41 @@
padding-right: .375rem;
background-image: none;
}
+
+
+.fhcSkipLink {
+ position: absolute;
+ left: -10px;
+ top: -10px;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+}
+
+.fhcSkipLink::before {
+ content: "Skip to main content"
+ }
+
+.fhcSkipLink:focus {
+ position: absolute;
+ z-index: 9999999;
+ top: var(--fhc-cis-header-height);
+ left: var(--fhc-cis-menu-width);
+ height: 100px;
+ width: 800px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #0044cc;
+ background-color: #ffeb3b;
+ text-decoration: none;
+ padding: 12px 18px;
+ border-radius: 6px;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+ transition: all 0.2s ease-in-out;
+}
+
+fhcSkipLink:hover {
+ background-color: #ffcc00;
+ color: #002b80;
+ transform: scale(1.05);
+}
diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index 6a46c5999..a41cbb3f0 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -227,7 +227,8 @@ const app = Vue.createApp({
},
handleClick(event) {
const target = event.target.closest('a');
-
+
+ if(target?.id == 'skiplink') return
if (target && this.isInternalRoute(target.href)) {
const url = new URL(target.href)