diff --git a/package.json b/package.json
index 020c3dd526..48cb5e739f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@craco/craco": "<7",
     "@formatjs/intl-pluralrules": "^5.2.3",
     "@openstax/event-capture-client": "^2.0.2",
-    "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.2",
+    "@openstax/highlighter": "https://github.com/openstax/highlighter#use-mark-dist-branch",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
     "@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",
diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index e35265bff3..2f2e5c16b6 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -321,19 +321,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.yellow.first.text.has-note:after {
+.c4 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.green {
@@ -368,19 +370,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.green.first.text.has-note:after {
+.c4 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.blue {
@@ -415,19 +419,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.blue.first.text.has-note:after {
+.c4 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.purple {
@@ -462,19 +468,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.purple.first.text.has-note:after {
+.c4 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.pink {
@@ -509,19 +517,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.pink.first.text.has-note:after {
+.c4 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .os-figure,
@@ -582,83 +592,106 @@ Array [
 }
 
 @media screen {
-  .c4 .highlight.yellow[aria-current] {
+  .c4 .highlight[data-start-message]::before,
+  .c4 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c4 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c4 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
+@media screen {
+  .c4 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.yellow[aria-current].block:after {
+  .c4 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c4 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c4 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.green[aria-current] {
+  .c4 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.green[aria-current].block:after {
+  .c4 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c4 .highlight.green[aria-current].first.text.has-note:after {
+  .c4 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.blue[aria-current] {
+  .c4 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.blue[aria-current].block:after {
+  .c4 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c4 .highlight.blue[aria-current].first.text.has-note:after {
+  .c4 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.purple[aria-current] {
+  .c4 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c4 .highlight.purple[aria-current].block:after {
+  .c4 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c4 .highlight.purple[aria-current].first.text.has-note:after {
+  .c4 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.pink[aria-current] {
+  .c4 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c4 .highlight.pink[aria-current].block:after {
+  .c4 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c4 .highlight.pink[aria-current].first.text.has-note:after {
+  .c4 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -673,13 +706,13 @@ Array [
     background-color: #ffea00;
   }
 
-  .c4 .search-highlight[aria-current],
-  .c4 .search-highlight[aria-current] .math {
+  .c4 .search-highlight.focus,
+  .c4 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c4 .search-highlight[aria-current] .search-highlight {
+  .c4 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index b780df1100..60246d0e7b 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -2,7 +2,7 @@ import Color from 'color';
 import styled, { css } from 'styled-components/macro';
 import MainContent from '../../../components/MainContent';
 import { MAIN_CONTENT_ID } from '../../../context/constants';
-import theme from '../../../theme';
+import theme, { screenreaderOnly } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
@@ -54,6 +54,21 @@ export default styled(MainContent)`
   .highlight {
     position: relative;
     z-index: 1;
+
+    @media screen {
+      &[data-start-message]::before,
+      &[data-end-message]::after {
+        ${screenreaderOnly}
+      }
+
+      &.first[data-start-message]::before {
+        content: attr(data-start-message);
+      }
+
+      &.last[data-end-message]::after {
+        content: attr(data-end-message);
+      }
+    }
   }
 
   /* stylelint-disable selector-class-pattern */
@@ -95,21 +110,27 @@ export default styled(MainContent)`
         }
       }
 
-      &.first.text.has-note:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        content: "";
-        width: 0;
-        height: 0;
-        opacity: 0.8;
-        border-left: ${highlightIndicatorSize}em solid ${style.focused};
-        border-top: ${highlightIndicatorSize}em solid transparent;
-        transform: rotate(90deg);
+      &.first.text.has-note {
+        &:not(.last)::before {
+          content: "";
+        }
+
+        padding-left: 0.5rem;
+
+        ::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          clip-path: initial;
+          clip: initial;
+          opacity: 0.8;
+          border-left: ${highlightIndicatorSize}em solid ${style.focused};
+          border-bottom: ${highlightIndicatorSize}em solid transparent;
+        }
       }
 
       @media screen {
-        &[aria-current] {
+        &.focus {
           background-color: ${style.focused};
           border-bottom: 0.2rem solid ${style.focusBorder};
           padding: 0.2rem 0 0;
@@ -138,7 +159,7 @@ export default styled(MainContent)`
         background-color: #ffea00;
       }
 
-      &[aria-current] {
+      &.focus {
         ${SELF_AND_CHILD_MATH_SELECTOR} {
           background-color: #ff9e4b;
           padding: 0.2rem 0;
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index da08515acd..7892d2eb65 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -741,19 +741,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -788,19 +790,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -835,19 +839,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -882,19 +888,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -929,19 +937,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -2253,83 +2263,106 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight.yellow[aria-current] {
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c78 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
+@media screen {
+  .c78 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.yellow[aria-current].block:after {
+  .c78 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c78 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c78 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.green[aria-current] {
+  .c78 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.green[aria-current].block:after {
+  .c78 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c78 .highlight.green[aria-current].first.text.has-note:after {
+  .c78 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.blue[aria-current] {
+  .c78 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.blue[aria-current].block:after {
+  .c78 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c78 .highlight.blue[aria-current].first.text.has-note:after {
+  .c78 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.purple[aria-current] {
+  .c78 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.purple[aria-current].block:after {
+  .c78 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c78 .highlight.purple[aria-current].first.text.has-note:after {
+  .c78 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.pink[aria-current] {
+  .c78 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.pink[aria-current].block:after {
+  .c78 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c78 .highlight.pink[aria-current].first.text.has-note:after {
+  .c78 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -2344,13 +2377,13 @@ li[aria-label="Current Page"] .c60 {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[aria-current],
-  .c78 .search-highlight[aria-current] .math {
+  .c78 .search-highlight.focus,
+  .c78 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c78 .search-highlight[aria-current] .search-highlight {
+  .c78 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }
@@ -5515,19 +5548,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -5562,19 +5597,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -5609,19 +5646,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -5656,19 +5695,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -5703,19 +5744,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -6874,83 +6917,106 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight.yellow[aria-current] {
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c78 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
+@media screen {
+  .c78 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.yellow[aria-current].block:after {
+  .c78 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c78 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c78 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.green[aria-current] {
+  .c78 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.green[aria-current].block:after {
+  .c78 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c78 .highlight.green[aria-current].first.text.has-note:after {
+  .c78 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.blue[aria-current] {
+  .c78 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.blue[aria-current].block:after {
+  .c78 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c78 .highlight.blue[aria-current].first.text.has-note:after {
+  .c78 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.purple[aria-current] {
+  .c78 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.purple[aria-current].block:after {
+  .c78 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c78 .highlight.purple[aria-current].first.text.has-note:after {
+  .c78 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.pink[aria-current] {
+  .c78 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.pink[aria-current].block:after {
+  .c78 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c78 .highlight.pink[aria-current].first.text.has-note:after {
+  .c78 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -6965,13 +7031,13 @@ li[aria-label="Current Page"] .c60 {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[aria-current],
-  .c78 .search-highlight[aria-current] .math {
+  .c78 .search-highlight.focus,
+  .c78 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c78 .search-highlight[aria-current] .search-highlight {
+  .c78 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }
diff --git a/src/app/theme.ts b/src/app/theme.ts
index a53b137f7e..9c0ed3de62 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -2,6 +2,16 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components/macro';
 // based on https://sketchviewer.com/sketches/59766aabb57e8900114c89ce/latest/
 
+export const screenreaderOnly = `
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+
 export interface ColorSet {
   base: string;
   foreground: string;
diff --git a/yarn.lock b/yarn.lock
index 5876231132..0291226639 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5083,9 +5083,9 @@
   dependencies:
     uuid "^8.3.2"
 
-"@openstax/highlighter@https://github.com/openstax/highlighter#v1.14.2":
-  version "1.14.1"
-  resolved "https://github.com/openstax/highlighter#fcd259e1642e243de6ed95771d0b97249ff2d162"
+"@openstax/highlighter@https://github.com/openstax/highlighter#use-mark-dist-branch":
+  version "1.14.0"
+  resolved "https://github.com/openstax/highlighter#0ef7228f54270372f7c67da80e716df58fbfc643"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"