diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8526076c..78fe2fd0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
  - Added a `toast` component with plain-text or Markdown content, icons, colors, six screen placements, configurable auto-dismiss timing, optional manual dismissal, URL-fragment triggers, and automatic stacking of queued notifications.
  - `sqlpage.send_mail` now supports rich email bodies. Use `body_html` for a caller-provided HTML alternative, or `body_md` to render Markdown as HTML. Messages retain a plain-text alternative; `body` may be omitted when `body_md` is used, and `body_md` and `body_html` cannot be combined.
  - Form `options_source` URLs now preserve existing query parameters when adding the dynamic `search` parameter.
+ - Screen readers now announce the title of the modal component instead of an unnamed dialog.
 
 ## v0.45
 
diff --git a/sqlpage/templates/modal.handlebars b/sqlpage/templates/modal.handlebars
index 8b13ba2e..c2ce2a76 100644
--- a/sqlpage/templates/modal.handlebars
+++ b/sqlpage/templates/modal.handlebars
@@ -2,11 +2,11 @@
     id="{{id}}"
     tabindex="-1"
     aria-hidden="false"
-    aria-labelledby="{{title}}">
+    aria-labelledby="{{id}}-title">
     <div role="document" class="modal-dialog {{#if small}} modal-sm{{/if}}{{#if large}} modal-lg{{/if}}{{#if scrollable}} modal-dialog-scrollable{{/if}}">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">{{title}}</h5>
+                <h5 class="modal-title" id="{{id}}-title">{{title}}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{default close "close"}}"></button>
             </div>
             <div class="modal-body">
diff --git a/tests/end-to-end/official-site.spec.ts b/tests/end-to-end/official-site.spec.ts
index 68633e7c..d3a14de3 100644
--- a/tests/end-to-end/official-site.spec.ts
+++ b/tests/end-to-end/official-site.spec.ts
@@ -480,7 +480,7 @@ test("modal", async ({ page }) => {
   const openButton = page.getByRole("button", { name: "Open a simple modal" });
   await openButton.click();
 
-  const modal = page.getByRole("dialog", { label: "A modal box" });
+  const modal = page.getByRole("dialog", { name: "A modal box" });
   await expect(modal).toBeVisible();
 
   // close the modal
@@ -489,7 +489,7 @@ test("modal", async ({ page }) => {
 
   await openButton.click();
   await expect(modal).toBeVisible();
-  await modal.getByRole("button", { label: "Close" }).first().click();
+  await modal.getByRole("button", { name: "Close" }).first().click();
   await expect(modal).not.toBeVisible();
 });