如何讓使用屏幕閱讀器的人可以訪問我的進度欄？

我在我的網站上有一個進度條，它在視覺上告訴用戶他們在哪個過程的哪一點。有3個步驟，他們需要完成每一步，才能完成。如何讓使用屏幕閱讀器的人可以訪問我的進度欄？

有進度條上方的標頭，說輸入詳細信息（3步驟1）或確認信息（步驟3之2）或重建完成（步驟3 3）

說你在第一步，屏幕閱讀器讀出標題，然後進度條的文本，然後將下面的頭，像這樣：

輸入詳細信息（第3步驟1）輸入詳細確認細節重建完整輸入您的詳細所有標有（*）的文件需要

我並不認爲進度條有助於向屏幕閱讀器的用戶指出他們當前在進程中的哪一點以及他們需要做多少（這是進程的整體目的吧！）是否有人認爲向進度條添加文本，然後將其隱藏在視覺上會是件好事？我想這樣做是這樣的：

Enter details <span class="hidden">Active</span> Confirm details<span class="hidden">Incomplete</span> Renewal complete<span class="hidden">Incomplete</span>

，然後加在CSS

.hidden { text-indent:-3000px; 
or 
    font-size:0px; }

或者你認爲第一個標題是所有使用屏幕閱讀器的人需要聽到和進度條的添加只是令人困惑，我應該將它隱藏起來？在這種情況下，我該怎麼做？

預先感謝任何幫助

來源

2011-11-23 H Carlisle

使用WAI-ARIA屬性。 Progressbar role似乎正是你需要的。屏幕閱讀器然後可以使用這些屬性來準確地表示您的意圖。

來源

2011-11-23 13:10:54 socha23

這有點棘手; ARIA的進度欄角色通常用於桌面風格的進度條，這是您在Windows文件複製對話框中看到的排序，隨着操作完成（並指示系統進度 - 而不是用戶進度），這種排序會被填滿。 OP所描述的有點不同，它更像是一個麪包屑酒吧，描述了所取得的進展和尚待完成的進展 - 在進行交易（如購買書籍或預訂航班）的網站上，這些內容相當普遍。在視覺上，他們看起來並不像進度條，所以使用該角色可能會混淆用戶... – BrendanMcK

這裏的部分問題是ARIA的詞彙表基於桌面成語，所以它沒有任何完美的角色適合這個習慣用法，這對於HTML/web來說是特定的。您可能可以在此處獲得進度欄角色;把它放在圍繞整個事物的div上;並使用aria-valuetext屬性來指示當前項目。需要用一些屏幕閱讀器來測試它，看看它的工作效果如何 - 特別是他們是否也讀取了欄內的文本內容以及欄本身。 – BrendanMcK

如何讓使用屏幕閱讀器的人可以訪問我的進度欄？

回答

相關問題