diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10cb34b2..45f69db9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- `tna-visually-hidden` changed to `tna-!--visually-hidden`
+- `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future)
 - Changed Node version from `lts/hydrogen` to `lts/iron`
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
 
diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs b/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs
index de6f6050..13d0c3d3 100644
--- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs
+++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs
@@ -32,7 +32,7 @@ export class Breadcrumbs {
       const $expandButton = document.createElement("button");
       $expandButton.classList.add("tna-breadcrumbs__link");
       $expandButton.innerHTML =
-        "<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;";
+        "<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;";
       $expandButton.setAttribute("aria-expanded", "false");
       $expandButton.setAttribute("aria-controls", uniqueId);
       $expandButton.addEventListener("click", () => {
diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk
index b7a4b9ad..508d690c 100644
--- a/src/nationalarchives/components/footer/template.njk
+++ b/src/nationalarchives/components/footer/template.njk
@@ -31,7 +31,7 @@
                   {%- else -%}
                   <i class="fa-solid fa-{{ item.icon }}"></i>
                   {%- endif -%}
-                <span class="tna-footer__social-item-link-text tna-visually-hidden">
+                <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                   {{ item.text }}
                 </span>
                 {%- else -%}
diff --git a/src/nationalarchives/components/index-grid/template.njk b/src/nationalarchives/components/index-grid/template.njk
index 8b3d4d0e..6fcf0b5e 100644
--- a/src/nationalarchives/components/index-grid/template.njk
+++ b/src/nationalarchives/components/index-grid/template.njk
@@ -46,7 +46,7 @@
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
           {%- if item.label -%}
-          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-visually-hidden">:</span></span>
+          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-!--visually-hidden">:</span></span>
           {%- endif -%}
           {%- if item.subtitle -%}
           <br>
diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss
index c03b4c86..bb41b624 100644
--- a/src/nationalarchives/utilities/_a11y.scss
+++ b/src/nationalarchives/utilities/_a11y.scss
@@ -1,5 +1,6 @@
 @use "../tools/colour";
 
+.tna-visually-hidden,
 .tna-\!--visually-hidden {
   width: 1px !important;
   height: 1px !important;