如何使這個 javascript 應用程序可訪問？

Question

我正在制作一個 FTP 客戶端，它將在很大程度上依賴於 javascript。

瀏覽文件時，您可以使用箭頭鍵進行導航。 我將 class of.selected 添加到當前選定的文件名中，但是如何讓屏幕閱讀器清楚這一點？ 如何讓他們專注於當前文件名？

Would the best way be to make every filename an anchor, which will get the focus when the filename is selected? 而且，我在哪里可以找到關於 web 應用程序可訪問性的良好指南？ 我知道 W3C 有一個內容可訪問性清單，但其中的大部分內容不適用於 web 應用程序。

Answer 1

最簡單的方法可能是使用一系列復選框，每個復選框都有一個唯一的 ID，並與 label 配對：

<input id="chk01" type="checkbox"/><label for="chk01">File1.txt</label>

使用這種技術，輸入會為您顯示選定內容，而 label 負責將其與名稱相關聯：當焦點轉到復選框時，屏幕閱讀器將自動讀出相關的 label 文本。 都是普通的 HTML，沒有什么特別要求。 您當然可以在此之上添加選擇顏色 - 只要您將其與復選框 state 保持同步。

可以用 A 標簽做類似的事情； 您可以使用WAI-ARIA屬性在項目上適當設置 role="listitem" 和 aria-selected="true"/"false"，在父容器上設置 role="list"。 然后，屏幕閱讀器會將這些內容作為列表項而不是鏈接讀出。 然而，這種技術涉及更多，並且確實需要使用實際的屏幕閱讀器（例如 JAWS 或免費提供的 NVDA）進行測試，以確保其正常工作。

Answer 2

我建議您使用 javascript 框架來幫助與WAI-ARIA結合使用可訪問性有關可訪問性 jQuery 的示例，請參閱https://github.com/fnagel/可訪問性和可訪問性拖放示例WAI-ARIA 見http://dev.opera.com/articles/view/accessible-drag-and-drop/

Answer 3

首先 - 確保您的基礎知識已涵蓋。 Web 內容可訪問性指南 (WCAG) 沒有很好地涵蓋交互性，但它的許多要點仍然適用於 web 應用程序。

下一步 - 了解可訪問富 Internet 應用程序的 ARIA 標准。 這將涵蓋您正在嘗試的許多交互性。

一些相關鏈接：

• http://webaim.org/用於常見的可訪問性問題，以及一些關於屏幕閱讀器使用情況的寶貴調查
• http://www.w3.org/WAI/intro/wcag.php - WCAG 2.0 概述
• http://www.w3.org/WAI/intro/aria.php - ARIA 概述

有許多關於可訪問性的書籍，它們往往很快就會過時。 可悲的是，我不知道有任何關於 ARIA 的書籍長度的討論——它仍在開發中。 嘗試閱讀規格。

最后但並非最不重要的 - 獲取屏幕閱讀器並學習使用它。 對可訪問性標准的正式合規性很好，但沒有什么比真正的測試更好的了。 NVDA 是一款免費且功能齊全的屏幕閱讀器，對 ARIA 提供了不錯的支持： http://nvda-project.org/

希望這可以幫助。

Answer 4

瀏覽文件時，您可以使用箭頭鍵進行導航。

建立在忽略此功能的先前答案的基礎上，將整個小部件包裝在一個 div 中，其中角色=應用程序。 這會通知屏幕閱讀器 JavaScript 將被使用，並允許用戶在使用屏幕閱讀器時使用箭頭鍵導航小部件。 下面的摘錄詳細介紹了如何設計可訪問的小部件。 是的，這不是最簡單的解決方案，但它是最完整的。 任你選。

描述：一個允許用戶從選擇列表中選擇一個或多個項目的小部件。 （ listbox ）。 鍵盤交互：

• Tab ：當一個列表被選項卡到，select 第一項如果沒有其他已經被選中。 第二個選項卡會將用戶從小部件中帶到頁面上的下一個制表位。
• 向上/向下箭頭在列表中上下導航。
• Shift+向上箭頭和Shift+向下箭頭移動和擴展選擇。
• 鍵入字母或幾個字母進行導航（相同的字母轉到以該開頭的每個項目，不同的字母 go 到以整個字符串開頭的第一個項目）。
• Shift+F10 ：如果當前項目具有關聯的上下文菜單，則此組合鍵將啟動該菜單。
• 選擇
  • 復選框 -空格切換復選框，如果列表項是可檢查的
  • 可選列表項
    • 空格作為切換到 select 並取消選擇當前項目。 如果先前的項目已被選擇，它也會取消選擇它們並選擇當前項目。
    • Shift+Space選擇從最后一個選定項目到當前項目的連續項目。
    • Ctrl+箭頭移動而不選擇。
    • Ctrl+Space選擇不連續的項目並將當前選定的項目添加到所有先前選定的項目中。
    • Ctrl+A - 建議對 select 全部使用復選框、鏈接或其他方法。 Ctrl+A鍵可用於提供快捷鍵。

建議開發人員在列表未聚焦時使用不同的樣式進行選擇（提示：非活動選擇通常以較淺的背景顏色顯示）。

WAI-ARIA 角色、狀態和屬性：

• listbox 容器的作用是listbox 。
• 列表框中的每個條目都應該有一個角色option ，並且應該是listbox的 DOM 子項。
• 如果不是列表框的 DOM 子項，則它應該由aria-owns在列表框中引用。
• 如果列表框中的所有項目都不是列表框的 DOM 子項，則相應地設置它們的aria-setsize和aria-posinset ； 否則，用戶代理無法為上下文計算此信息。
• 如果列表框不是另一個小部件的一部分，那么它應該有一個可見的aria-label由aria-labelledby在列表框上引用。
• 每個選定的列表項都應具有aria-selected ="true"。

例子：

單 select 列表框

iframe 中的列表框

有關示例和更多信息，請參閱可訪問小部件的創作實踐。

Answer 5

據我了解，YUI 對 ARIA 有很大的支持。

看：

http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y

確保您的解決方案符合 ARIA：

http://www.w3.org/WAI/intro/aria.php

HTH