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

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

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

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

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

分享總共四部分：

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

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

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

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

信息無障礙的概念

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

————————

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

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