diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 0bec54b539..30792c6d64 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -132,7 +132,7 @@
       // backgrounds and box-shadows disappear, so we need to ensure there's a
       // transparent outline which will be set to a visible colour.
       outline: $govuk-focus-width solid transparent;
-      outline-offset: 0;
+      outline-offset: $govuk-focus-offset;
       color: $govuk-text-colour;
       // sass-lint:disable indentation
       box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour,
@@ -202,7 +202,7 @@
     // We also want to avoid styling when the secttion is pressed or `:active`
     // to avoid the different focus styles from flashing quickly while the user interacts with the section.
     .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {
-      @include govuk-focusable-text;
+      @include govuk-focused-text;
     }
 
     .govuk-accordion__controls {
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index ade3eac132..a0849a9e87 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -89,7 +89,7 @@
       // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
       @include govuk-not-ie8 {
         outline: $govuk-focus-width solid transparent;
-        outline-offset: 0;
+        outline-offset: $govuk-focus-offset;
       }
       // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
       @include govuk-if-ie8 {
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
index 224bce7c6f..eced90e2b1 100644
--- a/src/components/details/_details.scss
+++ b/src/components/details/_details.scss
@@ -32,7 +32,9 @@
       color: $govuk-link-hover-colour;
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
 
   // ...but only underline the text, not the arrow
diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
index e2faf59bb7..7270032115 100644
--- a/src/components/error-summary/_error-summary.scss
+++ b/src/components/error-summary/_error-summary.scss
@@ -10,9 +10,13 @@
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
-    @include govuk-focusable;
 
     border: $govuk-border-width solid $govuk-error-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
+    }
   }
 
   .govuk-error-summary__title {
@@ -38,7 +42,6 @@
   }
 
   .govuk-error-summary__list a {
-    @include govuk-focusable-text-link;
     @include govuk-typography-weight-bold;
 
     // Override default link styling to use error colour
@@ -49,10 +52,8 @@
       color: $govuk-error-colour;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
   }
 
diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss
index a3b3d419ae..36b34c7f8a 100644
--- a/src/components/file-upload/_file-upload.scss
+++ b/src/components/file-upload/_file-upload.scss
@@ -12,7 +12,6 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-focusable;
     padding-top: $component-padding;
     padding-bottom: $component-padding;
 
@@ -23,6 +22,8 @@
       margin-left: -$component-padding;
       padding-right: $component-padding;
       padding-left: $component-padding;
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
       // yellow focus state.
@@ -47,7 +48,7 @@
 
       // Emulate `govuk-focusable` mixin styles for this component in FF
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
+      outline-offset: $govuk-focus-offset;
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
index 4b4a7a1e05..875aaf518f 100644
--- a/src/components/footer/_footer.scss
+++ b/src/components/footer/_footer.scss
@@ -63,7 +63,9 @@
       }
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focused-text;
+    }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
     // designed to make unvisited links a slightly darker blue when focussed, so
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index f51b200c43..50a67b0a0a 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -76,12 +76,8 @@
       text-decoration: underline;
     }
 
-    @include govuk-focusable-text-link;
-
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -176,7 +172,9 @@
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-focusable;
+    &:focus {
+      @include govuk-focused-text;
+    }
 
     @include mq ($from: tablet) {
       top: govuk-spacing(3);
diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss
index fed27b00df..313f01a311 100644
--- a/src/components/input/_input.scss
+++ b/src/components/input/_input.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/input") {
   .govuk-input {
     @include govuk-font($size: 19);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     width: 100%;
@@ -26,6 +25,8 @@
     appearance: none;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
       // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
       // it will change the element size. Also, `outline` cannot be utilised
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index fcaa634b2b..c555d7c69c 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/select") {
   .govuk-select {
     @include govuk-font($size: 19, $line-height: 1.25);
-    @include govuk-focusable;
 
     box-sizing: border-box; // should this be global?
     max-width: 100%;
@@ -18,6 +17,8 @@
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.
diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss
index 3146effcac..4e21d729ec 100644
--- a/src/components/skip-link/_skip-link.scss
+++ b/src/components/skip-link/_skip-link.scss
@@ -6,7 +6,6 @@
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
     @include govuk-typography-common;
-    @include govuk-focusable-fill;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 
@@ -23,5 +22,11 @@
       padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
       padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
     }
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
+      background-color: $govuk-focus-colour;
+    }
   }
 }
diff --git a/src/components/textarea/_textarea.scss b/src/components/textarea/_textarea.scss
index 4214cfcbd1..e1d0b2f04c 100644
--- a/src/components/textarea/_textarea.scss
+++ b/src/components/textarea/_textarea.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/textarea") {
   .govuk-textarea {
     @include govuk-font($size: 19, $line-height: 1.25);
-    @include govuk-focusable;
 
     box-sizing: border-box; // should this be global?
     display: block;
@@ -26,6 +25,8 @@
     -webkit-appearance: none;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: $govuk-focus-offset;
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.
diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
index 68738f99cb..eb17e98b30 100644
--- a/src/helpers/_focusable.scss
+++ b/src/helpers/_focusable.scss
@@ -2,38 +2,7 @@
 /// @group helpers
 ////
 
-/// Focusable helper
-///
-/// Provides an additional outline to clearly indicate when the target element is
-/// focussed. Used for interactive elements which themselves have some background
-/// or border, such as most form elements.
-///
-/// @access public
-
-@mixin govuk-focusable {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-  }
-}
-
-/// Focusable with fill helper
-///
-/// Provides an additional outline and background colour to clearly indicate when
-/// the target element is focussed. Used for interactive text-based elements such
-/// as links.
-///
-/// @access public
-
-@mixin govuk-focusable-fill {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-    background-color: $govuk-focus-colour;
-  }
-}
-
-@mixin govuk-focusable-text {
+@mixin govuk-focused-text {
   // When colours are overridden, for example when users have a dark mode,
   // backgrounds and box-shadows disappear, so we need to ensure there's a
   // transparent outline which will be set to a visible colour.
@@ -41,7 +10,7 @@
   // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
   @include govuk-not-ie8 {
     outline: $govuk-focus-width solid transparent;
-    outline-offset: 0;
+    outline-offset: $govuk-focus-offset;
   }
   color: $govuk-text-colour;
   background-color: $govuk-focus-colour;
@@ -55,16 +24,3 @@
   // box shadow adds the "underline"
   text-decoration: none;
 }
-
-/// Focusable with box-shadow
-///
-/// Removes the visible outline and replace with box-shadow and background colour.
-/// Used for interactive text-based elements.
-///
-/// @access public
-
-@mixin govuk-focusable-text-link {
-  &:focus {
-    @include govuk-focusable-text;
-  }
-}
diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss
index a4d1d85caa..36668d29c4 100644
--- a/src/helpers/_links.scss
+++ b/src/helpers/_links.scss
@@ -10,7 +10,10 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
-  @include govuk-focusable-text-link;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 /// Default link style mixin
diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss
index bbbd73c7f1..9081232b75 100644
--- a/src/settings/_measurements.scss
+++ b/src/settings/_measurements.scss
@@ -98,6 +98,8 @@ $govuk-border-width-form-group-error: $govuk-border-width !default;
 
 $govuk-focus-width: 3px !default;
 
+$govuk-focus-offset: 0 !default;
+
 /// Hover width for form controls with a hover state
 ///
 /// @type Number