diff --git a/components/ScreenReaderOnly/ScreenReaderOnly.js b/components/ScreenReaderOnly/ScreenReaderOnly.js
index a227494eb..96043b8de 100644
--- a/components/ScreenReaderOnly/ScreenReaderOnly.js
+++ b/components/ScreenReaderOnly/ScreenReaderOnly.js
@@ -1,6 +1,5 @@
 import { node } from 'prop-types';
 import { SCREEN_READER_ONLY } from 'common/constants/testIDs';
-import styles from './ScreenReaderOnly.module.css';
 
 export const toggleMessages = {
   open: 'Show more',
@@ -13,7 +12,7 @@ ScreenReaderOnly.propTypes = {
 
 function ScreenReaderOnly({ children }) {
   return (
-    <span className={styles.ScreenReaderOnly} data-testid={SCREEN_READER_ONLY}>
+    <span className="sr-only" data-testid={SCREEN_READER_ONLY}>
       {children}
     </span>
   );
diff --git a/components/ScreenReaderOnly/ScreenReaderOnly.module.css b/components/ScreenReaderOnly/ScreenReaderOnly.module.css
deleted file mode 100644
index bad0dfb7b..000000000
--- a/components/ScreenReaderOnly/ScreenReaderOnly.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.ScreenReaderOnly {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
diff --git a/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap b/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap
index bd0ceb1b1..ba56fd364 100644
--- a/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap
+++ b/components/ScreenReaderOnly/__tests__/__snapshots__/ScreenReaderOnly.test.js.snap
@@ -6,7 +6,7 @@ Array [
     Content never displayed, but it is rendered
   </span>,
   <span
-    className="ScreenReaderOnly"
+    className="sr-only"
     data-testid="SCREEN_READER_ONLY"
   >
     ScreenReader content