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

本次會議分為10個技術(shù)主題，分別是：編程語言與框架，大數(shù)據(jù)系統(tǒng)架構(gòu)設(shè)計、微服務(wù)與容器技術(shù)、前端開發(fā)實戰(zhàn)、物聯(lián)網(wǎng)（IOT）技術(shù)、軟件性能優(yōu)化、深度學(xué)習(xí)與智能應(yīng)用開發(fā)、創(chuàng)新運維探索、技術(shù)架構(gòu)遇到業(yè)務(wù)架構(gòu)、CTO訓(xùn)練營。51CTO作為本次大會的主辦方，將全程圖文直播報道與后期視頻展示這場盛宴。

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

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

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

分享總共四部分：

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

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

三、是優(yōu)秀框架里信息無障礙的實現(xiàn)；

四、是如果我們要在自己的框架集成信息無障礙，遇到的挑戰(zhàn)和應(yīng)對。

信息無障礙的概念

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

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

對于一家公司，信息無障礙能不能在商業(yè)領(lǐng)域產(chǎn)生效益呢？這里我們列了幾條針對商業(yè)方面的：

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

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

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

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

信息無障礙的應(yīng)用技術(shù)

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

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

優(yōu)秀信息無障礙框架案例

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

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

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

信息無障礙集成信息無障礙的挑戰(zhàn)與應(yīng)對

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

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

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

以上為全部內(nèi)容，謝謝大家！

————————

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

【51CTO原創(chuàng)稿件，合作站點轉(zhuǎn)載請注明原文作者和出處為51CTO.com】