如何使屏幕閱讀器可以訪問自定義輸入文本框？

我有一個插件jQuery Terminal，我想讓它可供屏幕閱讀器訪問。我應該怎麼做才能使文本輸入可用？如何使屏幕閱讀器可以訪問自定義輸入文本框？

生成的HTML看起來像這樣：

<div class="cmd" style="width: 100%; visibility: visible;"> 
    <span class="prompt"> 
     <span>&gt;&nbsp;</span> 
    </span> 
    <span>Before curosr</span> 
    <span class="cursor">&nbsp;</span> 
    <span>after cursor</span> 
    <textarea autocapitalize="off" spellcheck="false" class="clipboard"> 
    </textarea> 
</div>

據我可以告訴文本區域始終處於焦點中輸入文本（我有它的移動，但隨後打開它在所有瀏覽器）時。

來源

2017-04-19 jcubic

基本上你不能。屏幕閱讀器，我上次檢查時，不解析也不執行JavaScript。所以你的動態添加的「終端」根本就不存在。 – gforce301

@ gforce301所以我唯一可以做的就是在div中添加描述，將終端和刪除它在JavaScript中，我是嗎？ – jcubic

@ gforce301這是錯誤的。屏幕閱讀器不會執行JS，但瀏覽器將會和屏幕閱讀器根據標記讀取瀏覽器呈現的內容。 – zero298

我在jQuery Terminal測試頁面上使用NVDA進行測試。有一個<div class="terminal-output">我添加了role="alert"屬性，我的屏幕閱讀器正在讀取添加到terminal-output的所有文本內容。

但是，它確實取決於您實際想要通過可訪問性實現的目標。你想讓屏幕閱讀器實際閱讀什麼？您需要嘗試一下，但是請看看詠歎調角色和方式來標註您希望讀者閱讀並呈現給用戶的內容。

見我的屏幕閱讀器的日誌，什麼是包含在「控制檯」窗口，它是如何讀出：

來源

2017-04-19 19:40:23 zero298

謝謝，需要做一些測試，太糟糕了NVDA僅適用於windows。 – jcubic

如何使屏幕閱讀器可以訪問自定義輸入文本框？

回答

相關問題