diff --git a/lang/ui.en.json b/lang/ui.en.json
index 8fbd14540..40d8fcd1d 100644
--- a/lang/ui.en.json
+++ b/lang/ui.en.json
@@ -1,7 +1,7 @@
 {
   "about": {
     "defaultMessage": "About",
-    "description": "About action"
+    "description": "About action; also the accessible name of the about dialog"
   },
   "about-comic": {
     "defaultMessage": "Three panel comic titled \"MicroPython Rocks\" by Mike Rowbit. A cartoon snake introduces Damien, saying \"Meet Damien... He created MicroPython.\". Two snakes discuss MicroPython. The yellow snake says \"MicroPython is designed to work on very small computers.\" \"Like your BBC micro:bit\" the purple snake replies.\" The yellows snake continues \"But Python can run anywhere.\". The purple snake agrees, saying \"Like on this rack of servers that run huge websites\". The background behind the snakes shows a server rack.",
@@ -281,7 +281,7 @@
   },
   "feedback": {
     "defaultMessage": "Feedback",
-    "description": "Feedback action"
+    "description": "Feedback action; also the accessible name of the feedback dialog"
   },
   "file-actions": {
     "defaultMessage": "{name} file actions",
diff --git a/src/common/DialogHeading.tsx b/src/common/DialogHeading.tsx
new file mode 100644
index 000000000..b444fcc23
--- /dev/null
+++ b/src/common/DialogHeading.tsx
@@ -0,0 +1,25 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode } from "react";
+import { Heading } from "react-aria-components";
+import { css } from "styled-system/css";
+
+const dialogHeadingClass = css({
+  fontSize: "xl",
+  fontWeight: "semibold",
+});
+
+/**
+ * Semantic heading that uses the RAC Dialog's `title` slot, for headings
+ * rendered in the dialog body rather than via ModalHeader.
+ */
+const DialogHeading = ({ children }: { children: ReactNode }) => (
+  <Heading slot="title" className={dialogHeadingClass}>
+    {children}
+  </Heading>
+);
+
+export default DialogHeading;
diff --git a/src/common/MultipleFilesDialog.tsx b/src/common/MultipleFilesDialog.tsx
index e1b1333e9..09e2e8cb2 100644
--- a/src/common/MultipleFilesDialog.tsx
+++ b/src/common/MultipleFilesDialog.tsx
@@ -7,6 +7,7 @@ import { Text } from "@microbit/ui";
 import { VStack } from "styled-system/jsx";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
+import DialogHeading from "../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../common/GenericDialog";
 import { useProject } from "../project/project-hooks";
 
@@ -55,9 +56,9 @@ const MultipleFilesDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="multiple-files-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage
           id="multiple-files-message-one"
diff --git a/src/common/PostSaveDialog.tsx b/src/common/PostSaveDialog.tsx
index 84cac5b49..53cdc2127 100644
--- a/src/common/PostSaveDialog.tsx
+++ b/src/common/PostSaveDialog.tsx
@@ -7,6 +7,7 @@ import { Link, Text } from "@microbit/ui";
 import { VStack } from "styled-system/jsx";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
+import DialogHeading from "../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../common/GenericDialog";
 import { useProject } from "../project/project-hooks";
 import { FinalFocusRef } from "../project/project-actions";
@@ -77,9 +78,9 @@ const PostSaveDialogBody = ({
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="post-save-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage
           id="post-save-message-one"
diff --git a/src/workbench/AboutDialog/AboutDialog.tsx b/src/workbench/AboutDialog/AboutDialog.tsx
index e7c992d23..bc528e176 100644
--- a/src/workbench/AboutDialog/AboutDialog.tsx
+++ b/src/workbench/AboutDialog/AboutDialog.tsx
@@ -80,8 +80,8 @@ const AboutDialog = ({ isOpen, onClose, finalFocusRef }: AboutDialogProps) => {
       finalFocusRef={finalFocusRef}
       aria-label={intl.formatMessage({ id: "about" })}
     >
+      <ModalCloseButton />
       <ModalBody>
-        <ModalCloseButton />
         <VStack gap="8" pl="5" pr="5" pt="5">
           <HStack gap="4">
             {deployment.horizontalLogo && (
diff --git a/src/workbench/WelcomeDialog.tsx b/src/workbench/WelcomeDialog.tsx
index af687c13d..6fd04966c 100644
--- a/src/workbench/WelcomeDialog.tsx
+++ b/src/workbench/WelcomeDialog.tsx
@@ -17,6 +17,7 @@ import { ReactNode } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { HStack, Stack, VStack } from "styled-system/jsx";
+import DialogHeading from "../common/DialogHeading";
 import YoutubeVideoEmbed from "../common/YoutubeVideoEmbed";
 import { useDeployment } from "../deployment";
 
@@ -31,12 +32,7 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
   const intl = useIntl();
   const welcomeVideoAltText = intl.formatMessage({ id: "welcome-video-alt" });
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      size="2xl"
-      aria-label={intl.formatMessage({ id: "welcome-title" })}
-    >
+    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
       <ModalCloseButton />
       <ModalBody>
         <VStack
@@ -49,9 +45,9 @@ const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
           alignItems="stretch"
         >
           <Stack gap="3">
-            <Text as="h2" fontSize="xl" fontWeight="semibold">
+            <DialogHeading>
               <FormattedMessage id="welcome-title" />
-            </Text>
+            </DialogHeading>
             <YoutubeVideoEmbed
               youtubeId={youtubeId}
               alt={welcomeVideoAltText}
diff --git a/src/workbench/connect-dialogs/ConnectCableDialog.tsx b/src/workbench/connect-dialogs/ConnectCableDialog.tsx
index e25a62989..c38661d90 100644
--- a/src/workbench/connect-dialogs/ConnectCableDialog.tsx
+++ b/src/workbench/connect-dialogs/ConnectCableDialog.tsx
@@ -3,9 +3,10 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Image, Text } from "@microbit/ui";
+import { Image } from "@microbit/ui";
 import { FormattedMessage } from "react-intl";
 import { Flex, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import connectCable from "./connect-cable.gif";
 
 const ConnectCableDialogBody = () => {
@@ -19,9 +20,9 @@ const ConnectCableDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="connect-cable-title" />
-      </Text>
+      </DialogHeading>
 
       <Flex justifyContent="center" width="100%">
         <Image height="372px" width="400px" src={connectCable} alt="" />
diff --git a/src/workbench/connect-dialogs/ConnectHelpDialog.tsx b/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
index f1fd8264e..436776c32 100644
--- a/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
+++ b/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
@@ -13,6 +13,7 @@ import {
 } from "@microbit/ui";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Box, Flex, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import selectMicrobit from "./select-microbit.png";
 
 const ConnectHelpDialogBody = () => {
@@ -29,9 +30,9 @@ const ConnectHelpDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="connect-help-title" />
-      </Text>
+      </DialogHeading>
       <Box
         position="relative"
         width={isDesktop ? "100%" : "auto"}
diff --git a/src/workbench/connect-dialogs/FirmwareDialog.tsx b/src/workbench/connect-dialogs/FirmwareDialog.tsx
index 03c01579d..d1b61d98e 100644
--- a/src/workbench/connect-dialogs/FirmwareDialog.tsx
+++ b/src/workbench/connect-dialogs/FirmwareDialog.tsx
@@ -8,6 +8,7 @@ import { ReactNode, useCallback } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import firmwareUpgrade from "./firmware-upgrade.svg";
 import { FinalFocusRef } from "../../project/project-actions";
@@ -53,9 +54,9 @@ const FirmwareDialogBody = () => {
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="firmware-update-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="firmware-update-message" />
       </Text>
diff --git a/src/workbench/connect-dialogs/NotFoundDialog.tsx b/src/workbench/connect-dialogs/NotFoundDialog.tsx
index 6518f1ee2..c81d96141 100644
--- a/src/workbench/connect-dialogs/NotFoundDialog.tsx
+++ b/src/workbench/connect-dialogs/NotFoundDialog.tsx
@@ -8,6 +8,7 @@ import { ReactNode, useCallback } from "react";
 import { RiDownload2Line, RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { Box, Flex, HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import SaveButton from "../../project/SaveButton";
 import { ConnectErrorChoice } from "./FirmwareDialog";
@@ -71,9 +72,9 @@ const NotFoundDialogBody = ({
       gap="5"
       alignItems="flex-start"
     >
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="not-found-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="not-found-message" />
       </Text>
diff --git a/src/workbench/connect-dialogs/TransferHexDialog.tsx b/src/workbench/connect-dialogs/TransferHexDialog.tsx
index 1c042793f..c7c9213dc 100644
--- a/src/workbench/connect-dialogs/TransferHexDialog.tsx
+++ b/src/workbench/connect-dialogs/TransferHexDialog.tsx
@@ -8,6 +8,7 @@ import { ReactNode } from "react";
 import { RiInformationLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
 import { Flex, HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog, GenericDialogFooter } from "../../common/GenericDialog";
 import transferHexMac from "./transfer-hex-mac.gif";
 import transferHexWin from "./transfer-hex-win.gif";
@@ -64,9 +65,9 @@ const TransferHexDialogBody = () => {
       alignItems="flex-start"
     >
       <VStack alignItems="flex-start">
-        <Text as="h2" fontSize="xl" fontWeight="semibold">
+        <DialogHeading>
           <FormattedMessage id="transfer-hex-title" />
-        </Text>
+        </DialogHeading>
         <Text>
           <FormattedMessage
             id="transfer-hex-message-one"
diff --git a/src/workbench/connect-dialogs/WebUSBDialog.tsx b/src/workbench/connect-dialogs/WebUSBDialog.tsx
index 6a1a1dcd8..9f5a4ccd0 100644
--- a/src/workbench/connect-dialogs/WebUSBDialog.tsx
+++ b/src/workbench/connect-dialogs/WebUSBDialog.tsx
@@ -7,6 +7,7 @@ import { Button, Image, Text } from "@microbit/ui";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { Flex, HStack, Stack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import chromeOSErrorImage from "./chrome-os-105-error.png";
 import { FinalFocusRef } from "../../project/project-actions";
@@ -60,9 +61,9 @@ const DialogBodyWrapper = ({ children }: { children: ReactNode }) => (
 const NotSupportedErrorBody = () => {
   return (
     <DialogBodyWrapper>
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         <FormattedMessage id="webusb-not-supported-title" />
-      </Text>
+      </DialogHeading>
       <Text>
         <FormattedMessage id="webusb-not-supported" />
       </Text>
@@ -76,9 +77,9 @@ const NotSupportedErrorBody = () => {
 const Chrome105ErrorBody = () => {
   return (
     <DialogBodyWrapper>
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
+      <DialogHeading>
         There is an issue with Chrome OS version 105 and WebUSB*
-      </Text>
+      </DialogHeading>
       <HStack gap="5">
         <Stack>
           <Text>
diff --git a/src/workbench/connect-dialogs/WebUSBErrorDialog.tsx b/src/workbench/connect-dialogs/WebUSBErrorDialog.tsx
index 84abfa5d5..f79860a41 100644
--- a/src/workbench/connect-dialogs/WebUSBErrorDialog.tsx
+++ b/src/workbench/connect-dialogs/WebUSBErrorDialog.tsx
@@ -7,6 +7,7 @@ import { Button, Text } from "@microbit/ui";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { HStack, VStack } from "styled-system/jsx";
+import DialogHeading from "../../common/DialogHeading";
 import { GenericDialog } from "../../common/GenericDialog";
 import { FinalFocusRef } from "../../project/project-actions";
 
@@ -52,13 +53,7 @@ const WebUSBErrorBody = ({ title, description }: WebUSBErrorBodyProps) => (
     gap="5"
     alignItems="flex-start"
   >
-    {typeof title === "string" ? (
-      <Text as="h2" fontSize="xl" fontWeight="semibold">
-        {title}
-      </Text>
-    ) : (
-      title
-    )}
+    <DialogHeading>{title}</DialogHeading>
     {typeof description === "string" ? <Text>{description}</Text> : description}
   </VStack>
 );