Yahoo!用戶界面博客（YUIBlog）

ARIA的製造更容易銳3

在我的談話中提到， 發展一個可訪問的Web 2.0 Widget框架 ， 3 YUI的目標之一是，使其更容易為開發人員建立可訪問的用戶界面。 為此，我們已經考慮到無障礙建設從一開始就同時銳3，最近的YUI 3.0.0 Beta 1版本介紹幾個，使開發人員更容易建立新的唱腔 ，功能部件的增加。

ARIA的屬性支持添加到節點

節點的效用是3的銳與DOM交互的主要界面，它不僅提供了一個抽象的模型，但內置的支持CSS選擇器查詢訪問HTML元素的一種手段。 ARIA的屬性的支持已被添加到Node接口在YUI 3.0.0 Beta 1版本，讓開發人員可以使用CSS選擇器查詢的表達能力，應用和管理元素的ARIA的角色和狀態和屬性 。

通過節點的申請的ARIA屬性set方法。 例如，應用的role toolbar的<div> role到<div> <div> “工具欄”的id：

YUI().use('node', function(Y) { var node = Y.get('#toolbar').set('role', 'toolbar'); });
YUI().use('node', function(Y) { var node = Y.get('#toolbar').set('role', 'toolbar'); }); 

除了節點的內置支持CSS選擇器查詢，它也支持鏈接和能力，在單個節點上設置多個屬性。 一起使用時，節點的這些特點使得它特別容易申請ARIA的角色，州，和屬性時，建設一個大型子樹的DHTML部件。

例如，當建立一個菜單部件，它是要申請一個role menubar根DOM元素包含菜單欄，和的role根DOM元素包含每個子菜單的menu 。 此外，由於每個子菜單是默認隱藏的， aria-hidden狀態將需要被應用到每個子菜單。 Node接口，使得它可以做到所有這一切都在一行代碼：

YUI().use('node', function(Y) { Y.get('#rootmenu').set('role', 'menubar').queryAll('.menu').setAttrs({ role: 'menu', 'aria-hidden': true }); });
YUI().use('node', function(Y) { Y.get('#rootmenu').set('role', 'menubar').queryAll('.menu').setAttrs({ role: 'menu', 'aria-hidden': true }); }); 

新焦點管理器“節點插件的鍵盤支持

工作，唱腔要求開發商提供鍵盤部件的訪問，因為鍵盤上的屏幕閱讀器的用戶來瀏覽網站和應用程序。 正如在ARIA規範和相應的最佳實踐文檔，提供鍵盤訪問要求，在某種程度上，每個小部件都有一個默認的製表位，負責，謹慎管理其後代的焦點。 遵循這些指導方針，使用戶能夠快速瀏覽頁面或應用程序通過使用tab鍵部件之間移動。 一旦用戶進入一個部件的標籤，然後他們可以用其他鍵（例如箭頭鍵）移動部件的後裔間的焦點。

焦點管理節點插件 ，是的YUI 3.0.0 Beta 1版本，使得很容易定義節點的聚焦後裔，定義它的後代應該在默認製表流，定義彼此間的焦點移動鍵後裔。 此外，因為CSS偽類:focus不是A級瀏覽器支持所有元素，焦點Manager節點插件提供了一種簡單，跨瀏覽器造型的重點是指。

新的唱腔範例

為銳3.0.0 Beta 1的，我們也增加了極少數的例子表明焦點Manager節點插件的力量來實現鍵盤支持現有的部件和運動節點的新唱腔，相關的API。

• 唱腔，啟用工具欄
• 唱腔，啟用TabView
• ARIA的啟用菜單按鈕

開發商希望體驗到的ARIA提供的好處，可以下載開源NVDA屏幕閱讀器 和 Firefox自己來測試每一個例子。 另外，我已經取得了NVDA和Firefox上運行的每個例子的截屏。

銳3 Beta 1的唱腔工具欄視頻

銳3 Beta 1的菜單按鈕視頻

銳3 Beta 1的的唱腔Tabview視頻

未來之路

雖然銳3目前主要由公用事業，我們很難在拋光的部件基礎設施的工作將很快開始建設部件。 使用YUI 3我們的目標是讓盡可能容易建立訪問的用戶界面，無論您是從頭開始建立一個部件，或者我們實施。 我們認為，我們納入節點接口和焦點管理節點插件的ARIA的支持與良好的開端。 所以，我希望鼓勵開發人員開始使用這些接口，並讓我們知道缺少什麼，有什麼不工作，它是什麼。

額外資源

• 發展無障礙的小工具使用的ARIA
• 焦點管理，通過改善無障礙
• 你的機器配置屏幕閱讀器測試

找到的談話： bloglines technorati

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