【51CTO.com原創稿件】 2017年12月01-02日，由51CTO主辦的WOTD 2017全球軟件開發技術峰會在深圳中洲萬豪酒店召開。秉承專注技術、服務技術人員的理念，自2012年以來，WOT品牌大會成功舉辦了十四屆，積累了大量的技術專家資源，獲得了廣大IT從業者和技術愛好者的一致認可，成為了業界重要的技術分享交流平臺以及人脈拓展平臺。

本次會議分為10個技術主題，分別是：編程語言與框架，大數據系統架構設計、微服務與容器技術、前端開發實戰、物聯網（IOT）技術、軟件性能優化、深度學習與智能應用開發、創新運維探索、技術架構遇到業務架構、CTO訓練營。51CTO作為本次大會的主辦方，將全程圖文直播報道與后期視頻展示這場盛宴。

12月01日上午WOTD2017主會場，深圳市信息無障礙研究會／ 信息無障礙產品聯盟技術專家劉彪進行了主題為《前端信息無障礙技術與框架》的精彩演講。以下是演講實錄，讓我們先睹為快！

我叫劉彪，是來自于深圳市信息無障礙研究會，我是2014年來到這個研究會的，這幾年一直專注于信息無障礙領域。信息無障礙大家可能聽上去有點陌生，但是聽完之后大家就熟悉了。

今天帶來的分享主題是“前端信息無障礙技術與框架”，主要有兩方面，一是要做到前端信息無障礙所需要使用的技術，這方面的技術分享。還有是相關框架，現在有很多框架，很多框架考慮到信息無障礙，會分享這些框架優秀的實踐方案。***再和大家分享一下，如果我們要構建這樣的協同框架需要注意的問題。

分享總共四部分：

一、是信息無障礙的概念與意義；

二、是前端信息無障礙所需要使用到的技術；

三、是優秀框架里信息無障礙的實現；

四、是如果我們要在自己的框架集成信息無障礙，遇到的挑戰和應對。

信息無障礙的概念

任何人在任何場景下都能便捷、順暢、無障礙的獲取信息。首先大家想到的就是障礙人士，比如視覺殘障、聽力殘障，在信息獲取上肯定有障礙。實際上這里提到的是任何人，你怎么理解呢？比如大家開車的時候，要看地圖，這時候你看地圖肯定不方便，所以這時候有語音導航，這個場景下大家實際上就相當于是視覺障礙，沒有辦法用眼睛看，只能聽。還有一種場景，比如你現在在嘈雜的環境中，或者你正在開會，這時候有人給你發了一條微信的語音消息，你怎么聽？實際上微信里面有一個語音轉文字，可以轉為文字消息。這種場景下，實際上你就相當于是聽障者，沒有辦法聽取消息。信息無障礙不僅解決殘障用戶的信息獲取問題，同時讓普通人、健全人也能夠更好的使用互聯網獲取信息。因為每個人在特定的場景下就是某種身體功能受限。

據統計，各類障礙人群是過千萬，去掉重復人口合計也是過億。實際上障礙人群使用互聯網的意義特別大，是障礙人群融入主流社會很重要的渠道。現在通過互聯網，他們有做翻譯的，有做律師的，還有做程序員的，各行各業......正是因為互聯網，他們與健全人縮小的差距就是信息獲取的障礙和克服身體功能的障礙。拿打車舉例，在過去，如果視力障礙，想打車，就只能在路旁邊打車，但是你不知道過去哪輛是出租車，有的人很厲害聽得出來哪輛是出租車，說是聽汽車的引擎來判斷的，很厲害，我是聽不出來。另外的問題，你即使聽出來，也不知道上面有沒有人。過去你打車是你找車，現在通過滴滴軟件，把這個過程反轉過來，變成車找人，只要你能描述出你的位置，然后司機就可以找到你。這種情況的改善使得障礙人士出行就有比較大的變化。

對于一家公司，信息無障礙能不能在商業領域產生效益呢？這里我們列了幾條針對商業方面的：

1、為現有用戶著想，你有了大量用戶，很多產品在***次聽說信息無障礙，給他們介紹，他說我的產品有這么多障礙用戶使用！這是改善用戶的體驗。

2、增加產品的可用性、易用性，因為這個產品越便捷，使用的效率就越高，對用戶的提升、改善幫助越大。

3、新的藍海市場數量，它是很可觀的，而且這些用戶會成為產品的重度用戶。比如出行這件事，你必須得依靠軟件解決，你出行就得用軟件，這就是重度用戶。比如支付，一定會用支付寶、微信這樣的軟件，如果你使用紙幣支付的時候，你首先要知道這個貨幣的面值就是比較麻煩的事情。所以這些用戶將成為你產品的高質量的黏性用戶，高黏性的。

4、它是互聯網必然的發展趨勢，BAT都已經開始做這件事了，已經做了很多年了。這是國際化的必須，像很多產品，如果說要在海外去服務，這比較重要，像美國有508法案，如果你的產品不能被障礙人士順利使用，一旦障礙人士對你進行起訴，你將面臨高額的賠償。這是對于商業公司的意義。

信息無障礙的應用技術

信息無障礙所用到的技術，這里面我列的是比較重要的，***個是WCAG，實際上是一個方法論，這個產品要滿足哪些點，對比度要達到什么樣的要求，錯誤提示應該給出一種什么樣的提示，這里面分四塊：可感知、可操作、可理解、魯棒性，像一個方法論，可以用來檢查自己的產品在信息無障礙這塊做得怎么樣。

另外一個技術，WAI-ARIA這個技術，它提供的是一個針對網頁內容增強的無障礙的體驗，HTML里面有很多無障礙屬性，最常見的是增加ALT屬性，它實際上除了能夠被搜索引擎識取圖片是什么樣的圖片，對于使用屏幕閱讀器的用戶，可以把里面的值作為圖片描述播報給用戶。Web發展交互能力很強，比如說一些局部的刷新、動態的變化，這些在現在HTML里面還沒有實踐，所以有了WAI-ARIA。ARIA在交互性比較強的前端是非常重要的。

優秀信息無障礙框架案例

再就是優秀前端框架里面的舉例，***個是編代碼，可以在后端以native呈現，一個文本有兩塊，一個是原價，一個是人民幣，199.00，一條信息用兩個text展示，這種情況很常見。用戶訪問的時候會訪問到兩點，一個是原價、一個是人民幣199.00，這對用戶的體驗就不好，因為從語義來講是一條消息但是拆分兩個點，瀏覽起來效率也比較低，不容易理解。所以在它的后面加了新的東西，它會把這個作為一個點，用戶再看的時候就會變成原價199.00。這樣子這個容器就具有焦點，這兩個元素就沒有點，對用戶來講是很好的體驗。這種框架的特點，它采用自己的屬性，然后影射成為對應平臺上無障礙相關的屬性實踐。如果沒有提供accessible，就沒有辦法影，它采用這樣的形式實現無障礙。

這是Razor，是微軟的一個前端框架。Razor有一個語法，html.actionlink，是創建一個鏈接，它***一個參數是可以設置的，就是A標簽的屬性，你可以設置class是什么，也可以設置role=button，***就會出現role=button，這是用來告訴用戶這是什么樣的東西，很多人喜歡用A標簽來模擬一個按鈕，對于用戶來講，語義也要調整。按鈕，用鏈接提示顯然不合適，所以它用role=button實現。提供原生屬性的使用，你可以在這里面使用原生屬性，把這個屬性會放到最終生成的元素里面，也就是這里面的A標簽里面，actionlink。

Bootstrap，更多是通過css的方法來控制展示效果的框架，所以它更加開放，你在hatm代碼里面就可以使用aria的屬性，你可以更加靈活的使用。比如用屏幕閱讀器在這里讀取不到，它是裝飾性元素，我們應該忽略，沒有實際信息傳遞，只是裝飾，分隔符或者圖標這種沒有交付，只是好看的裝飾性元素。aria-labe是一個標簽，指出到這個元素的時候可以播報出來。它的播報只是針對屏幕閱讀器，從屏幕上看加aria-label沒有任何變化，只是針對輔助技術和屏幕閱讀器這樣的軟件而起作用。

信息無障礙集成信息無障礙的挑戰與應對

第四部分，信息無障礙集成信息無障礙的挑戰與應對，這和普通做框架大同小異，只不過它使用的技術不同而已。像這里面設計的缺失。像組件的設計缺失，有點像剛才說的Razor的情況，如果框架里面沒有提供對原生html屬性的支持，沒有提供直接使用的模式，用戶也不會使用的，這是作為框架使用者來講也是不能使用的。再就是編碼規范的問題，你做一個框架，經常會遇到一些規范化的東西，比如說你做一個插件，可能接口的設計是要傳入圖片的地址和圖片的尺寸信息，還有一些響應等。作為一張圖片，每個圖片都要有剛才講的ALP屬性，指明這張圖片到底是什么信息，這樣就可以知道。像很多廣告滾動的，用戶聚焦在上面不斷有信息，廣告內容是什么，它肯定不知道發生什么事情，對用戶來講這是未知的事情。所以設計框架的時候，就應該考慮在讀圖片的時候，提供一個接口提供圖片的文本。如果沒有留這樣的接口，如果開發者想實現就很困難，就得修改你的源碼或者通過JS改變你的元素的屬性才能實現，會變得很亂。

兼容性的問題，無障礙里面也存在兼容性的問題，在不同瀏覽器上顯示效果不一樣，其實你的信息在不同的平臺，Android和iOS，不同瀏覽器呈現的結果不一樣。例子，評論友人這種，一個是有role=button，它可能寫的評論3，里面就只有3。當用戶聚焦到3這個數字的時候，它可以讀出評論3人，單獨寫個3，旁邊用圖標表示，它就是評論數，這里補充一個信息評論3人。在iOS上面，你沒有role=button，他不會讀，只會讀3，他認為沒有必要有標簽，它直接讀取塊里面的內容。但是Android上面，他又可以讀取，這是他們的差異，在不同的環境顯示上有差異需要兼容一樣的。

挑戰的應對，其實也就是幾個方面，一是遵循標準，遵循標準開發出來的東西才是便于使用的，才是項目完善的。再就是測試相關的，你要有專項測試，對無障礙的專項測試，還有對代碼進行無障礙走查。兼容性方面，要在不同環境里去測試，然后要收集這些特點，在框架里面做的時候要考慮這些問題，盡可能使用一些成熟的方案或者傳統的方案，比如html的東西，不同品牌對ARA支持的能力不同，能不用就不用，因為它的實現上、解析上還是有差異的。再就是使用成熟，你已經了解了它的平臺化差異的時候，你有經驗了，就可以集成到你的框架里面，取一個成熟的方案，這就是它的挑戰和應對。

以上為全部內容，謝謝大家！

————————

以上是51CTO.com記者從一線為您帶來的精彩報道。后續我們還有更加精彩的獨家報道，敬請關注。

【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】