Yahoo!用戶界面博客（YUIBlog）

搜索直接訪問

Caridy帕蒂諾，2011年8月8日下午09:44 | 輔助功能 ， 發展 | 6評論

幾個月前，我們推出了直接搜索的第一個beta版本。 這種新產品，探討了實時反饋的概念，即刻交付用戶每次擊鍵的答案。 由於雅虎的受眾的多樣性，我們希望使搜索盡可能方便直接。 最初，我們相信，這將是一件容易的事，因為這種產品將在3 YUI的JavaScript庫，將其DNA出爐的無障礙。 作為一名工程師，我的期望相反，這個任務竟然是比我們預期的更困難。

搜索直接介紹

雖然搜索直接從地面建成使用YUI的組件基礎設施，其最明顯的突出的界面是基於YUI自動完成構件右出框，其中包括許多輔助功能。 一個特定的查詢有關的建議，顯示在此自動完成實施。 搜索直接還設有一個內容面板，又名豐富的面板 ，在有關建議的內容顯示。 豐富的面板的意圖是從自動完成清單的建議，被選中時向用戶提供一個直接的答案。

一套新的建議顯示在名單上的每一個按鍵，默認情況下選中的第一個建議。 這個默認選擇被稱為軟選擇 。 軟選擇和後續交互的建議名單，決定，內容豐富的面板呈現。 在現實中，事情是一個比較複雜的（性能優化，額外的緩存層等），但為簡單起見，我們可以假設，這是常見的工作流程。

輔助功能

在搜索直接訪問的追求，我們期待在執行搜索助理，技術，雅虎開創了一個幾年前，以及銳本地的輔助功能。

本次調查結束後，三個主要的輔助功能提出直接搜索：

• 使用YUI國際化的實用服務本地化的內容。
• 設置內自動完成構件的元素，需要確定和屏幕閱讀器處理的role和aria-*屬性。
• 使用一個隱藏的div ，表示現場地區（ aria-live ）事情發生時通知用戶。 例如，提供建議，選定的建議等;

該計劃是通知用戶直接在搜索界面的任何變化，並提供一組鍵盤快捷鍵來瀏覽以下的可視化組件：

• 搜索框
• 提交按鈕
• 建議列表
• 豐富的面板

像微風的聲音，對不對？ 那麼，讓我們退後一步。

問題

我們這裡有兩個異步的過程-其中一個更新的建議集和檢索相應答案的另外一個-他們都非常快。 我們談論250ms的端到端。 由於接口改變，在這樣一個快速的步伐，保持跟踪的一切是很困難的一個屏幕閱讀器的用戶。 它得到了一個數量級更複雜的異步更新發生時，近實時的方式。 因為屏幕閱讀器被通知在接口的每一個變化，由此產生的顫很難理解發生了什麼事情。

由於缺乏一個可以接受的解決方案，我們就開始與合作，雅虎的居民無障礙大師，：維克多Tsaran（ @ vick08 ）嘗試，並拿出一些更好。

我們第一次觀看維克多與搜索直接交互，我馬上就明白了，他的重點，大部分的建議名單，而不是豐富的面板上。 這對我來說是一個驚喜，因為我們被視為“真理之源”的名單。 在我們的會議之一，我們的運氣，當我們發生了禁用列表中的所有輔助功能。 盡快搜索列表介紹了噪聲削減，直接開始使維克多的意義！

屏幕閱讀器的用戶如何看待搜索直接

意識到我們正試圖解決錯誤的問題後，我們又回到原來的用戶的故事：“作為一個用戶，我可以得到一個答案，因為我鍵入”。 獲取用戶的答案是當務之急。 重新定義的問題後，我們集中我們的輔助屏幕閱讀器的建議名單優先於豐富的面板內容的實施工作。

例如，如果用戶類型"miami wea"屏幕閱讀器會告訴他們兩件事：

• 10項建議。
• 天氣邁阿密，佛羅里達州。 今天，零星雷暴​​，89華氏度77°F。 明天，局部地區性雷暴，90華氏度74華氏度...

然後，它會繼續讀出豐富的面板內容的其餘部分。 用戶並不需要預先知道的所有10項建議，每次名單更新。 如果他們想知道的信息是易於通過鍵盤導航。

為了確保我們的建議名單，增值的經驗，確保第一句，在豐富的面板密切相關，其相應的建議。 例如，基於前面的例子， "weather miami"是在豐富的建議面板的第一句：“邁阿密的天氣”。

雅虎無障礙實驗室，維克多Tsaran，說明如何在Firefox與NVDA屏幕閱讀器：

屏幕閱讀器的經驗為我們的應用程序更容易遵循，因為我們現在只集中在以下兩個可視化組件：

• 搜索框
• 豐富的面板

作為一個整體的自動完成列表的變化，不再跟踪，並提交按鈕被忽略，因為用戶可以隨時打當前查詢輸入或使用鍵盤快捷鍵（蒂爾達訪問鍵： [control, alt or shift] + ~輸入元素和豐富的面板之間切換。 這些鍵盤導航選項時，搜索框被承認的屏幕閱讀器的用戶透露。

從工程的角度來看，這種變化極大地簡化了的事情。 DOM操作中最活躍的組成部分的金額大大減少，提高整體性能直接搜索。 下面是一個執行的例子：

函數SDAAria（）{
     VAR節點= this._liveRegion = Y.Node.create（“<div role="status" class="off-screen" aria-live="assertive"> </ DIV>”）;
     / /創建的ARIA活區...
     y.one（'身體'）追加（節點）;
     / /聽詠嘆調：實時信息更新現場區域
     this.on（詠嘆調：活'，this._handlerMsg，本）;
     / /聽八卦：刷新公佈的許多建議如何
     this.on（“閒話：this._handleGossipRefresh，這刷新”，）;
 }
 SDAAria.ATTRS = {
     字符串：{
          valueFn：函數（）{
             返回Y.Intl.get（“SD-ARIA”）;
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay：功能（stringId，潛艇）{
         VAR消息= this.get（“字符串”+ stringId）| |';
         this._liveRegion.setContent（潛艇Y.Lang.sub（消息，潛艇）：消息）;
     }，
     _handlerMsg：功能（E）{
        如果（e.id）{
             this._ariaSay（e.id，e.subs）;
         }
     }，
     _handleGossipRefresh：函數（）{
        尺寸大小（）。= this.get（'建議'）;
         this._ariaSay（（> 0的建議“：”NO_SUGGESTIONS'）{
             N：大小
         }）;
     }
 };

吸取的經驗教訓

當創建一個訪問接口，重要的是要提出正確的問題。 使每一點你的應用程序訪問，未必是正確的做法。

屏幕閱讀器的用戶，從早期的反饋要求 - 不假設你有你的基地覆蓋，直到你得到一些用戶的反饋。 利用各種工具和功能，在您的處置，可能沒有預期的效果。

屏幕閱讀器的用戶可能會遇到困難，跟踪實時更新，尤其是當屏幕閱讀器的通知轟炸。 在這些情況下，少可以成多。 什麼是重要的，而不是試圖複製的屏幕閱讀器的應用程序的原始經驗的用戶識別和集中。

作者簡介：雅虎搜索直接首席前端Caridy帕蒂諾，。 他一直是一個長期的YUI所提供和鼓泡庫YUI的擴展，以及旅客在YUIBlog.com博客分享一些他建立廣泛的高性能Web應用程序的經驗的作者。 載入策略，事件驅動的架構和SSJS一些其中Caridy花費他的大部分時間，這些天的主題。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！