diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
index 7a7ad88c751..abd8fc5774c 100644
--- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
+++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
@@ -316,10 +316,13 @@ export class IRDetailOnDemand extends IRElement {
     }
     toHTML(key?: React.Key): React.ReactElement {
         return (
-            <span key={key}>
-                <a className="dod-span" data-id={this.term}>
-                    {this.children.map((child, i) => child.toHTML(i))}
-                </a>
+            <span
+                key={key}
+                className="dod-span"
+                data-id={this.term}
+                tabIndex={0}
+            >
+                {this.children.map((child, i) => child.toHTML(i))}
             </span>
         )
     }
diff --git a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
index a1a7b412072..b36a879b917 100644
--- a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
+++ b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
@@ -24,9 +24,11 @@ function transformDodLinks() {
                     // to capture the term
                     const match = node.properties.href.match(/#dod:(?<term>.+)/)
                     if (match) {
+                        node.tagName = "span"
                         node.properties.class = "dod-span"
                         node.properties["data-id"] = match.groups?.term
                         node.properties["aria-expanded"] = "false"
+                        node.properties["tabindex"] = 0
                         delete node.properties.href
                     }
                     //node.children.push(
diff --git a/packages/@ourworldindata/components/src/styles/mixins.scss b/packages/@ourworldindata/components/src/styles/mixins.scss
index bfaf828bfac..f49ab6940ec 100644
--- a/packages/@ourworldindata/components/src/styles/mixins.scss
+++ b/packages/@ourworldindata/components/src/styles/mixins.scss
@@ -36,6 +36,15 @@
     }
 }
 
+@mixin dod-span {
+    border-bottom: 1px dotted $blue-90;
+    cursor: help;
+
+    span {
+        pointer-events: none;
+    }
+}
+
 @mixin info {
     font-size: 0.875rem;
 
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 9e81f0228cc..901f986381b 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -243,12 +243,7 @@ $zindex-controls-drawer: 150;
         margin-bottom: 2px;
     }
 
-    a.dod-span {
-        border-bottom: 1px dotted #666;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: none;
-        }
+    .dod-span {
+        @include dod-span;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.scss b/packages/@ourworldindata/grapher/src/footer/Footer.scss
index 9be159e3d13..9ce64211793 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.scss
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.scss
@@ -18,7 +18,7 @@
     }
 
     .sources a.learn-more-about-data,
-    .note a:not(.dod-span) {
+    .note a {
         text-decoration: underline;
 
         &:hover {
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
index f702cf84d80..6d71c6ee03b 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
@@ -31,11 +31,6 @@
         color: inherit;
         text-decoration: underline;
 
-        // DoD spans should be dotted via the border, not underlined
-        &.dod-span {
-            text-decoration: none;
-        }
-
         &:hover {
             text-decoration: none;
         }
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
index a6e100e5d5b..2c5f99f235b 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -142,11 +142,6 @@
             &:hover {
                 text-decoration: none;
             }
-
-            // DoD spans should be dotted via the border, not underlined
-            &.dod-span {
-                text-decoration: none;
-            }
         }
 
         .heading {
diff --git a/site/KeyDataTable.scss b/site/KeyDataTable.scss
index 116c018caa6..81b2d745548 100644
--- a/site/KeyDataTable.scss
+++ b/site/KeyDataTable.scss
@@ -8,11 +8,6 @@
     a {
         @include owid-link-90;
         color: inherit;
-
-        // DoD spans should be dotted via the border, not underlined
-        &.dod-span {
-            text-decoration: none;
-        }
     }
 }
 
diff --git a/site/detailsOnDemand.scss b/site/detailsOnDemand.scss
index c7847556304..c001d0f0e3d 100644
--- a/site/detailsOnDemand.scss
+++ b/site/detailsOnDemand.scss
@@ -16,12 +16,7 @@
 }
 
 .dod-span {
-    color: inherit;
-    border-bottom: 1px dotted #1d3d63;
-
-    span {
-        pointer-events: none;
-    }
+    @include dod-span;
 }
 
 // Specificity trump to overwrite the Grapher styles when inside a dod
diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.tsx
index 9216a89fe0e..3a63277a14c 100644
--- a/site/gdocs/utils.tsx
+++ b/site/gdocs/utils.tsx
@@ -203,14 +203,13 @@ export function renderSpan(
             )
         )
         .with({ spanType: "span-dod" }, (span) => (
-            <span key={key}>
-                {shouldRenderLinks ? (
-                    <a data-id={`${span.id}`} className="dod-span">
-                        {renderSpans(span.children)}
-                    </a>
-                ) : (
-                    <span>{renderSpans(span.children)}</span>
-                )}
+            <span
+                key={key}
+                className="dod-span"
+                data-id={`${span.id}`}
+                tabIndex={0}
+            >
+                {renderSpans(span.children)}
             </span>
         ))
         .with({ spanType: "span-newline" }, () => <br key={key} />)