---
title: "讓報讀軟體開口說話：用 ariaNotify() 取代 aria-live - Neil 的作品集"
description: "以前要讓報讀軟體唸出「已加入購物車」，只能藏一個 aria-live 區塊再塞文字，而且常常不唸。ariaNotify() 讓你直接請報讀軟體說話。這篇從我自己網站的 aria-live 問題開始，整理寫法、元素版與語言、priority 的限制，以及不支援時退回 live region 的降級寫法。"
canonical_url: "https://neillin.com/blog/aria-notify/"
last_updated: 2026-10-09
meta:
author: Neil
keywords: "無障礙網頁, 設計管理, 資料視覺化, UI, UX, 切版"
"og:description": "以前要讓報讀軟體唸出「已加入購物車」，只能藏一個 aria-live 區塊再塞文字，而且常常不唸。ariaNotify() 讓你直接請報讀軟體說話。這篇從我自己網站的 aria-live 問題開始，整理寫法、元素版與語言、priority 的限制，以及不支援時退回 live region 的降級寫法。"
"og:image": "https://neillin.com/_og/s/o_2e11f49d8573895a.png"
"og:image:height": "600"
"og:image:type": image/png
"og:image:width": "1200"
"og:title": "讓報讀軟體開口說話：用 ariaNotify() 取代 aria-live - Neil 的作品集"
"twitter:image": "https://neillin.com/_og/s/o_2e11f49d8573895a.png"
---
> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)
:::
# 讓報讀軟體開口說話：用 ariaNotify() 取代 aria-live
2026年10月9日
[前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")JavaScriptHTML前端開發無障礙瀏覽器支援
> 話說在前頭：`ariaNotify()` 的效果是「聲音」，畫面上看不到。文中的 API 行為我在 Chromium 上實測過，但報讀軟體實際怎麼唸、唸不唸，會因為瀏覽器和報讀軟體的組合而不同，最準的還是你自己打開報讀軟體聽一次。有講錯的地方歡迎指正。
## 前言
這篇的起因是我自己的網站。
我的 [作品頁](https://neillin.com/products)可以依角色、平台篩選和排序。當初為了讓報讀軟體使用者知道「內容變了」，我把整個作品列表包在 `aria-live="polite"` 裡。看起來很合理，但其實是個常見的反模式：條件一換，整個列表的內容都變了，報讀軟體可能會把一整排作品卡片從頭唸到尾。使用者真正需要知道的，只有一句「顯示 8 個項目」。
剛好 [CSS 與 HTML 技巧清單](https://neillin.com/blog/css-techniques-checklist)裡的 `ariaNotify()` 就是在解決這件事，所以這次邊修自己的網站邊整理。
先看一下你的瀏覽器支援度：
你的瀏覽器支援度
- `ariaNotify()`偵測中（需要 JavaScript）
## 一、以前的做法：aria-live 與它的坑
要讓報讀軟體唸出「已儲存」「找到 8 筆結果」這種狀態訊息，以前只能這樣：
```
```
```
status.textContent = "已加入購物車";
```
這招大家都用，但也是出了名的不穩定：
| 坑 | 說明 |
| --- | --- |
| 區塊要先存在 | 動態插入的 live region，第一次放進去的內容常常不會被唸 |
| 不能真的藏起來 | 用 `display: none` 或 `hidden` 藏起來就失效，只能用 visually-hidden |
| 同樣的字不會重唸 | 連按兩次「加入購物車」，文字沒變，第二次可能就不唸了 |
| 被 modal 擋住 | 打開 modal 後背景是 inert，放在背景的 live region 就沒反應了 |
| 範圍太大會很吵 | 就是我網站的狀況，整個列表包起來，一更新就整段唸 |
## 二、ariaNotify() 的寫法
`ariaNotify()` 讓你直接請報讀軟體唸出一段話，不需要在頁面上放任何元素：
```
document.ariaNotify("已儲存變更");
```
也可以從某個元素發出：
```
saveButton.ariaNotify("已儲存變更");
```
還有一個 `priority` 選項：
```
form.ariaNotify("付款失敗，請重新確認卡號", { priority: "high" });
```
| `priority` | 效果 | 大約對應 |
| --- | --- | --- |
| `normal`（預設） | 等目前在唸的內容唸完再唸 | `aria-live="polite"` |
| `high` | 盡量插隊先唸 | `aria-live="assertive"` |
我在 Chromium 實測，`priority` 只接受這兩個值，寫錯會直接丟出錯誤，不會默默失敗。
## 三、動手試試
這個範例有四種情境：連續加入購物車、高優先的錯誤訊息、從 `lang="en"` 區塊發出的英文通知，以及在 modal 裡的通知。也可以勾選「強制改用 aria-live 後備」，比較兩種方式：
互動範例：打開報讀軟體（Mac 的 VoiceOver 是 ⌘+F5）再按按鈕，下方紀錄會列出送出了什麼
強制改用 aria-live 後備（模擬不支援 ariaNotify 的瀏覽器）
購物車：0 件（連按幾次，每次都應該被唸出來）
### 分享連結
按「複製連結」後，就算焦點沒有移動，報讀軟體也會唸出「已複製」。
通知紀錄（最新在最上面）
1. 還沒有事件。按上面的按鈕試試。
此處為互動範例，請在網頁上操作。
如果你看得到畫面，下方的通知紀錄會列出每次送出了什麼、走的是 `ariaNotify` 還是 live region。真正的效果還是要打開報讀軟體聽，Mac 按 ⌘+F5 就能開 VoiceOver。
## 四、元素版和 document 版：差在語言
這是我覺得最容易被忽略、但對雙語網站很重要的一點：
- `document.ariaNotify()`：用整頁的語言唸。
- `element.ariaNotify()`：用這個元素**最近一個祖先的 `lang`** 唸。
我的網站是中英雙語，如果在中文頁面的英文區塊裡發出英文通知，用元素版，報讀軟體才會切換成英文發音。範例裡的「Add to wishlist」按鈕外層就是 `lang="en"`。
所以我的習慣是**優先用元素版**，從觸發通知的那個按鈕或區塊發出，語言跟著內容走。
## 五、不支援的時候：降級寫法
`ariaNotify()` 從 Chrome 141、Firefox 150 開始支援；Safari 的資料我查到的互相矛盾，請以實測為準。不支援的瀏覽器還是要退回 live region，下面是我網站和範例實際在用的寫法：
```
const REGION_ATTR = "data-announcer";
function getRegion(host, priority) {
// modal 打開時背景是 inert，live region 要放進對話框裡才會被唸
const container = host.closest("dialog[open]") ?? document.body;
let region = container.querySelector(`:scope > [${REGION_ATTR}="${priority}"]`);
if (!region) {
region = document.createElement("div");
region.setAttribute(REGION_ATTR, priority);
region.setAttribute("aria-live", priority === "high" ? "assertive" : "polite");
region.className = "visually-hidden";
container.append(region);
}
return region;
}
function announce(host, message, priority = "normal") {
if (typeof host.ariaNotify === "function") {
host.ariaNotify(message, { priority });
return;
}
const region = getRegion(host, priority);
// 先清空再填：內容一樣時，報讀軟體才會再唸一次
region.textContent = "";
// 剛建立的 live region 立刻填內容常常不會被唸，等一下再填
setTimeout(() => {
region.textContent = message;
}, 100);
}
```
這段後備把第一節的坑都處理了一遍：
- **區塊要先存在**：除了延遲填入，我也會在頁面載入時先呼叫一次 `getRegion()`，讓 live region 提早出現在頁面上。
- **同樣的字不會重唸**：先清空再填。
- **被 modal 擋住**：有打開的 `