diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2301c6c7..c0f4fd25 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Removed `:focus` styles and replaced with `:focus-visible`
+
 ### Deprecated
 ### Removed
 ### Fixed
diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
index 2787f11c..88ce3302 100644
--- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
+++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -7,9 +7,9 @@
   padding-top: spacing.space(1);
   padding-bottom: spacing.space(1);
 
-  &:focus {
-    outline: none !important;
-  }
+  // &:focus {
+  //   outline: none !important;
+  // }
 
   &__list {
     margin: 0;
diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
index 4c38fa33..771c1370 100644
--- a/src/nationalarchives/components/cookie-banner/cookie-banner.scss
+++ b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
@@ -15,9 +15,9 @@
   }
 
   &__message {
-    &:focus {
-      outline: none !important;
-    }
+    // &:focus {
+    //   outline: none !important;
+    // }
 
     &--prompt {
     }
diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss
index 702fe529..4f19bf77 100644
--- a/src/nationalarchives/components/error-summary/error-summary.scss
+++ b/src/nationalarchives/components/error-summary/error-summary.scss
@@ -1,3 +1,4 @@
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
@@ -12,9 +13,10 @@
   @include colour.colour-background("background");
 
   @include colour.colour-border("form-error-border", 0.3125rem, solid);
+  border-radius: 0.1px;
 
   &:focus {
-    outline: none;
+    @include a11y.focus-outline;
   }
 
   &__list {
diff --git a/src/nationalarchives/components/gallery/gallery.mjs b/src/nationalarchives/components/gallery/gallery.mjs
index d7692248..f3f73e26 100644
--- a/src/nationalarchives/components/gallery/gallery.mjs
+++ b/src/nationalarchives/components/gallery/gallery.mjs
@@ -70,7 +70,7 @@ export class Gallery {
         this.$itemsContainer.focus();
       });
     });
-    this.$module.setAttribute("tabindex", "0");
+    // this.$module.setAttribute("tabindex", "0");
     this.$module.addEventListener("keydown", (e) => {
       let preventDefaultKeyAction = false;
       switch (e.key) {
diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
index e448d0aa..fa2839e5 100644
--- a/src/nationalarchives/components/gallery/gallery.scss
+++ b/src/nationalarchives/components/gallery/gallery.scss
@@ -15,10 +15,6 @@
 
   border-radius: 0.1px;
 
-  &:active {
-    @include a11y.no-active-outline;
-  }
-
   &__header {
     padding: spacing.space(1);
 
diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
index bd8e5d3f..2a2184c6 100644
--- a/src/nationalarchives/components/picture/picture.scss
+++ b/src/nationalarchives/components/picture/picture.scss
@@ -42,7 +42,7 @@
 
     padding: spacing.space(1.5);
 
-    @include a11y.no-focus-outline-on-click;
+    // @include a11y.no-focus-outline-on-click;
   }
 
   &__caption {
diff --git a/src/nationalarchives/components/sidebar/sidebar.scss b/src/nationalarchives/components/sidebar/sidebar.scss
index caa072e9..8660ed72 100644
--- a/src/nationalarchives/components/sidebar/sidebar.scss
+++ b/src/nationalarchives/components/sidebar/sidebar.scss
@@ -24,9 +24,9 @@
   &__items {
     padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding});
 
-    &:focus {
-      outline: none;
-    }
+    // &:focus {
+    //   outline: none;
+    // }
   }
 
   &__item {
diff --git a/src/nationalarchives/components/tabs/tabs.mjs b/src/nationalarchives/components/tabs/tabs.mjs
index 73d2a4b2..0b05788a 100644
--- a/src/nationalarchives/components/tabs/tabs.mjs
+++ b/src/nationalarchives/components/tabs/tabs.mjs
@@ -98,7 +98,6 @@ export class Tabs {
 
   switchTabByIndex(newIndex, switchFocus = false) {
     this.currentTabIndex = newIndex;
-
     this.$tabListItemLinks.forEach(($tabListItemLink, index) => {
       if (index === this.currentTabIndex) {
         $tabListItemLink.setAttribute("aria-selected", true);
@@ -111,7 +110,6 @@ export class Tabs {
         $tabListItemLink.setAttribute("tabindex", "-1");
       }
     });
-
     this.$tabItems.forEach(($tabItem, index) => {
       if (index === this.currentTabIndex) {
         $tabItem.removeAttribute("hidden");
diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss
index dbb2e6b3..10e32dd4 100644
--- a/src/nationalarchives/components/tabs/tabs.scss
+++ b/src/nationalarchives/components/tabs/tabs.scss
@@ -108,7 +108,7 @@
 
   &__item {
     border-radius: 0.1px;
-    @include a11y.no-focus-outline-on-click;
+    // @include a11y.no-focus-outline-on-click;
 
     &:focus {
       outline-offset: -#{a11yVariables.$focus-outline-width};
diff --git a/src/nationalarchives/tools/_a11y.scss b/src/nationalarchives/tools/_a11y.scss
index 77d21de5..bb179d6c 100644
--- a/src/nationalarchives/tools/_a11y.scss
+++ b/src/nationalarchives/tools/_a11y.scss
@@ -14,10 +14,6 @@
   outline-offset: 0;
 }
 
-@mixin no-active-outline {
-  outline-offset: a11y.$focus-outline-offset;
-}
-
 @mixin no-focus-outline-on-click {
   .tna-template--clicked &:focus {
     outline: none;
diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
index 1a7e104a..883534bd 100644
--- a/src/nationalarchives/tools/_colour.scss
+++ b/src/nationalarchives/tools/_colour.scss
@@ -181,10 +181,13 @@
 
 // Use light theme colours (except for "form-error-border")
 %always-light {
-  @include colour-css-vars("form-error-border");
+  @include colour-css-vars("form-error-border", "focus-outline");
 
   @media (prefers-contrast: more) {
-    @include colour-css-vars-high-contrast("form-error-border");
+    @include colour-css-vars-high-contrast(
+      "form-error-border",
+      "focus-outline"
+    );
   }
 }
 
diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss
index ed3aad03..581d2ff5 100644
--- a/src/nationalarchives/utilities/_a11y.scss
+++ b/src/nationalarchives/utilities/_a11y.scss
@@ -26,25 +26,19 @@
   // }
 }
 
-*:focus {
+*:focus-visible {
   z-index: 9;
 
   @include a11y.focus-outline;
 }
 
-// *:focus-visible {
-//   z-index: 9;
+@supports not selector(:focus-visible) {
+  *:focus {
+    z-index: 9;
 
-//   @include a11y.focus-outline;
-// }
-
-// @supports not selector(:focus-visible) {
-//   *:focus {
-//     z-index: 9;
-
-//     @include a11y.focus-outline;
-//   }
-// }
+    @include a11y.focus-outline;
+  }
+}
 
 *:active {
   @include a11y.active-outline;