diff --git a/src/components/dev-only/HeadingCheck.tsx b/src/components/dev-only/HeadingCheck.tsx
new file mode 100644
index 0000000..dae9e51
--- /dev/null
+++ b/src/components/dev-only/HeadingCheck.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { ErrorMessageNotification } from "../userMessage/ErrorMessageNotification";
+
+/**
+ * This is for development purposes. It displays an error message when a page is missing an h1 element or has
+ * one that is configured incorrectly. We will see the error if we create a page that has this issue.
+ */
+export const HeadingCheck = () => {
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        const heading1 = document.querySelector("h1");
+
+        if (heading1 === null) {
+            setError("This page is missing an h1 element - please add one with `tabindex=-1`");
+        } else {
+            const missingTabIndex = !(heading1.hasAttribute("tabindex"));
+            const wrongTabindex = heading1.tabIndex !== -1;
+
+            if (missingTabIndex || wrongTabindex) {
+                setError("This page's h1 element has a bad `tabindex` - please specify `tabindex=-1`");
+            }
+        }
+    }, []);
+
+    return (<>
+        {error && process.env.NODE_ENV !== "production" && <ErrorMessageNotification message={error}/>}
+    </>);
+};
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 94f7bf9..82fb099 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { ChildrenProps } from "../utilities/children-props";
-import { ErrorMessageNotification } from "../components/userMessage/ErrorMessageNotification";
 import { DocumentStateContext } from "../contexts/DocumentStateContext";
 import { useFocusHashOrMainHeading } from "../hooks/focus/useFocusHashOrMainHeading";
 import "./Pages.css";
+import { HeadingCheck } from "../components/dev-only/HeadingCheck";
 
 type PageProps = {
     title: string
@@ -32,30 +32,3 @@ export const Page = ({ title, children }: PageProps) => {
         </div>
     </>);
 };
-
-/**
- * This is for development purposes. It displays an error message when a page is missing an h1 element or has
- * one that is configured incorrectly. We will see the error if we create a page that has this issue.
- */
-const HeadingCheck = () => {
-    const [error, setError] = useState("");
-
-    useEffect(() => {
-        const heading1 = document.querySelector("h1");
-
-        if (heading1 === null) {
-            setError("This page is missing an h1 element - please add one with `tabindex=-1`");
-        } else {
-            const missingTabIndex = !(heading1.hasAttribute("tabindex"));
-            const wrongTabindex = heading1.tabIndex !== -1;
-
-            if (missingTabIndex || wrongTabindex) {
-                setError("This page's h1 element has a bad `tabindex` - please specify `tabindex=-1`");
-            }
-        }
-    }, []);
-
-    return (<>
-        {error && process.env.NODE_ENV !== "production" && <ErrorMessageNotification message={error}/>}
-    </>);
-};