加載數據時的可訪問性

Question

我正在研究可訪問性問題。 我有一個棘手的/加載器，它在加載數據時出現在屏幕上。

<spinny aria-live="polite" role="alert" aria-label="Loading Page">

因此，當屏幕上出現細線時，屏幕閱讀器會提醒我細線已加載。 現在，我希望當棘手的物體離開屏幕時，我希望屏幕閱讀器提供諸如已加載數據之類的消息。

我嘗試了與詠嘆調相關的，詠嘆調原子的等，但是似乎沒有任何效果。

Answer 1

首先，您的代碼示例指定了沖突的信息。 使用role="alert"給您一個隱式的aria-live="assertive"但您也要指定aria-live="polite" 。 我建議刪除 role="alert" 。 擁有aria-live="polite"就足夠了。

但是，如果您從<spinny>刪除角色（我猜這是自定義html標簽？），那么您的aria-label可能就不兌現，因為帶有aria標簽的東西通常除了標簽之外還需要一個角色為了讓屏幕閱讀器讀取標簽。 請參閱“ 實踐支持：aria標簽，aria標簽由和aria描述由 ”

但是，我認為您可能仍然會錯誤地使用aria標簽。 您的居住區域應類似於：

<div aria-live="polite" class="sr-only" id="myspinny"></div>

（請參閱Bootstrap 3中的什么是sr-only？有關“僅sr”類的信息。它將在視覺上“隱藏” <div>以便您看到的所有文本對於可見的用戶而言都是不可見的，但仍然可以屏幕閱讀器用戶可用。）

加載數據時，應將文本（通過javascript）注入“ myspinny ”中，使其看起來像：

<div aria-live="polite" class="sr-only" id="myspinny">Loading Page</div>

由於<div>是實時區域，因此將宣布文本（“加載頁面”）。

當數據加載完成並且您想要刪除微調器時，將新文本插入“ myspinny ”中，如下所示：

<div aria-live="polite" class="sr-only" id="myspinny">Data Loaded</div>

屏幕閱讀器將顯示“數據已加載”。