文件：ariaNotify() 方法
非標準：此特性未標準化。我們不建議在生產環境中使用非標準特性，因為它們瀏覽器支援有限，並且可能會更改或被移除。但是，在沒有標準選項的特定情況下，它們可以是合適的替代方案。
Document 介面的 ariaNotify() 方法指定一段給定的文字字串應由螢幕閱讀器朗讀（如果螢幕閱讀器可用且已啟用）。
語法
ariaNotify(announcement)
ariaNotify(announcement, options)
引數
通知-
指定要朗讀的文字字串。
options可選-
一個包含以下屬性的選項物件
返回值
無（undefined）。
描述
ariaNotify() 方法可用於以程式設計方式觸發螢幕閱讀器通知。此方法提供與ARIA 即時區域類似的功能，並具有一些優勢：
- 即時區域只能在 DOM 更改後進行通知，而
ariaNotify()通知可以隨時進行。 - 即時區域通知涉及朗讀已更改的 DOM 節點的更新內容，而
ariaNotify()通知內容可以獨立於 DOM 內容定義。
開發人員通常透過使用設定了即時區域的隱藏 DOM 節點來規避即時區域的限制，這些節點的內容會隨著要通知的內容而更新。這效率低下且容易出錯，而 ariaNotify() 提供了一種避免此類問題的方法。
一些螢幕閱讀器會按順序朗讀多個 ariaNotify() 通知，但這不能在所有螢幕閱讀器和平臺上得到保證。通常，只朗讀最新的通知。將多個通知合併為一個更可靠。
例如，以下呼叫
document.ariaNotify("Hello there.");
document.ariaNotify("The time is now 8 o'clock.");
最好合並
document.ariaNotify("Hello there. The time is now 8 o'clock.");
ariaNotify() 通知不需要瞬時啟用；您應該注意不要用過多的通知來騷擾螢幕閱讀器使用者，因為這可能會造成糟糕的使用者體驗。
通知優先順序
設定了 priority: high 的 ariaNotify() 通知會在設定了 priority: normal 的 ariaNotify() 通知之前朗讀。
ariaNotify() 通知大致相當於 ARIA 即時區域通知，如下所示：
ariaNotify()priority: high：aria-live="assertive"。ariaNotify()priority: normal：aria-live="polite"。
但是，aria-live 通知將優先於 ariaNotify() 通知。
語言選擇
螢幕閱讀器根據 <html> 元素的 lang 屬性中指定的語言，或如果未設定 lang 屬性，則根據使用者代理的預設語言，選擇合適的語音（在口音、發音等方面）來朗讀 ariaNotify() 通知。
許可權策略整合
文件或 <iframe> 中 ariaNotify() 的使用可以透過 aria-notify 許可權策略進行控制。
具體來說，如果定義的策略阻止了使用，則任何使用 ariaNotify() 建立的公告都將靜默失敗（它們將不會被髮送）。
示例
基本的 ariaNotify() 用法
此示例包含一個 <button>，單擊時會觸發螢幕閱讀器通知。
<button>Press</button>
document.querySelector("button").addEventListener("click", () => {
document.ariaNotify("Hi there, I'm Ed Winchester.");
});
結果
輸出如下：
嘗試啟用螢幕閱讀器，然後按下按鈕。您應該會聽到螢幕閱讀器朗讀“你好，我是埃德·溫徹斯特。”
無障礙購物清單示例
此示例是一個購物清單，您可以新增和刪除商品，並跟蹤所有商品的總成本。當新增或刪除商品時，螢幕閱讀器會朗讀通知，告知新增/刪除了什麼商品，以及更新後的總價是多少。
HTML
我們的 HTML 包含一個 <form>，其中包含兩個 <input> 元素——一個 text 輸入用於輸入商品名稱，一個 number 輸入用於輸入價格。兩個輸入都是 required，並且 number 輸入的 step 值為 0.01，以防止輸入非價格值（如大小數）。
在表單下方，我們有一個無序列表用於渲染新增的商品，以及一個 <p> 元素用於顯示總成本。
<h1><code>ariaNotify</code> demo: shopping list</h1>
<form>
<div>
<label for="item">Enter item name</label>
<input type="text" name="item" id="item" required />
</div>
<div>
<label for="price">Enter item price</label>
<input type="number" name="price" id="price" step="0.01" required />
</div>
<div>
<button>Submit</button>
</div>
</form>
<hr />
<ul></ul>
<p>Total: £0.00</p>
JavaScript
我們的指令碼從幾個常量定義開始，用於儲存對 <form>、我們的兩個 <input> 元素以及我們的 <ul> 和 <p> 元素的引用。我們還包含一個 total 變數來儲存所有商品的總價。
const form = document.querySelector("form");
const item = document.querySelector("input[type='text']");
const price = document.querySelector("input[type='number']");
const priceList = document.querySelector("ul");
const totalOutput = document.querySelector("p");
let total = 0;
在我們的下一個程式碼塊中，我們定義了一個名為 updateTotal() 的函式，它只有一個作用——它更新 <p> 元素中顯示的價格，使其等於 total 變數的當前值。
function updateTotal() {
totalOutput.textContent = `Total: £${Number(total).toFixed(2)}`;
}
接下來，我們定義一個名為 addItemToList() 的函式。在函式體內部，我們首先建立一個 <li> 元素來儲存新新增的商品。我們將商品名稱和價格儲存在元素上的 data-* 屬性中，並將其文字內容設定為包含商品和價格的字串。我們還建立一個 <button> 元素，文字為“Remove <item-name>”，然後將列表項附加到無序列表，並將按鈕附加到列表項。
函式體的第二個主要部分是按鈕上的 click 事件監聽器定義。當按鈕被點選時，我們首先獲取按鈕父節點（即它所在的列表項）的引用。然後，我們將列表項的 data-price 屬性中包含的數字從 total 變數中減去，呼叫 updateTotal() 函式更新顯示的總價，然後呼叫 ariaNotify() 宣佈已刪除的商品以及新的總價。最後，我們從 DOM 中刪除列表項。
function addItemToList(item, price) {
const listItem = document.createElement("li");
listItem.setAttribute("data-item", item);
listItem.setAttribute("data-price", price);
listItem.textContent = `${item}: £${Number(price).toFixed(2)}`;
const btn = document.createElement("button");
btn.textContent = `Remove ${item}`;
priceList.appendChild(listItem);
listItem.appendChild(btn);
btn.addEventListener("click", (e) => {
const listItem = e.target.parentNode;
total -= Number(listItem.getAttribute("data-price"));
updateTotal();
document.ariaNotify(
`${listItem.getAttribute(
"data-item",
)} removed. Total is now £${total.toFixed(2)}.`,
{
priority: "high",
},
);
listItem.remove();
});
}
我們的最後一個程式碼塊向 <form> 添加了一個 submit 事件監聽器。在處理函式內部，我們首先在事件物件上呼叫 preventDefault() 以阻止表單提交。然後，我們呼叫 addItemToList() 在列表中顯示新商品及其價格，將價格新增到 total 變數，呼叫 updateTotal() 更新顯示的總價，然後呼叫 ariaNotify() 宣佈已新增的商品以及新的總價。最後，我們清空當前輸入欄位值，以便新增下一個商品。
form.addEventListener("submit", (e) => {
e.preventDefault();
addItemToList(item.value, price.value);
total += Number(price.value);
updateTotal();
document.ariaNotify(
`Item ${item.value}, price £${
price.value
}, added to list. Total is now £${total.toFixed(2)}.`,
{
priority: "high",
},
);
item.value = "";
price.value = "";
});
結果
輸出如下：
嘗試啟用螢幕閱讀器，然後新增和刪除一些專案。您應該會聽到螢幕閱讀器朗讀它們。
規範
此特性似乎未在任何規範中定義。瀏覽器相容性
載入中…