簡介： 最近一直在思考一個(gè)問題：“在互動(dòng)團(tuán)隊(duì)這么多年了，什么樣的互動(dòng)項(xiàng)目是有溫度的呢？又應(yīng)該如何構(gòu)建有溫度的互動(dòng)項(xiàng)目呢”？想了很久，接下來以我自己角度的理解來嘗試著回答，如果回答不對(duì)之處，還請(qǐng)路過的大神拍磚指正。

作者|廖偉華(大貘)
出品|阿里巴巴新零售淘系技術(shù)部

最近一直在思考一個(gè)問題：“在互動(dòng)團(tuán)隊(duì)這么多年了，什么樣的互動(dòng)項(xiàng)目是有溫度的呢？又應(yīng)該如何構(gòu)建有溫度的互動(dòng)項(xiàng)目呢”？想了很久，接下來以我自己角度的理解來嘗試著回答，如果回答不對(duì)之處，還請(qǐng)路過的大神拍磚指正。

什么是互動(dòng)項(xiàng)目

什么是互動(dòng)項(xiàng)目呢？我想圍繞著互動(dòng)這個(gè)詞來說：

• 互指的是相互，比如說相互溝通與交流
• 動(dòng)指的是動(dòng)起來，元素動(dòng)起來，人動(dòng)起來

放到一起的話：相互動(dòng)起來

回到互動(dòng)項(xiàng)目中來的話，在不同的時(shí)期經(jīng)歷了不同的過程：

• 項(xiàng)目元素動(dòng)起來，只有A自己在動(dòng)
• 項(xiàng)目和人動(dòng)起來，A和B或A和C在動(dòng)，具有一定的交互行為
• 項(xiàng)目和人動(dòng)起來，除了A和B或A和C在動(dòng)，甚至是B和C也能在動(dòng)

比如2016年年貨節(jié)的項(xiàng)目：

讓頁面元素動(dòng)起來，主要還只是提高活動(dòng)的氛圍

時(shí)至今日，互動(dòng)的項(xiàng)目要變得更為復(fù)雜，業(yè)務(wù)難度也更為復(fù)雜：

更像一個(gè)簡單的游戲。

為什么要做有溫度的互動(dòng)項(xiàng)目

先來給大家看一個(gè)在線項(xiàng)目，金幣莊園錄屏效果：

為什么要放這么一個(gè)錄屏效果呢？其實(shí)這是有一個(gè)故事的。

一直以來，自己都在探索Web可訪問性相關(guān)的技術(shù)，不過大部分經(jīng)驗(yàn)都是停留在PC端，而如今天是移動(dòng)端的天下，所以想看看在移動(dòng)端上如何來做Web可訪問性。特別是在這樣的互動(dòng)項(xiàng)目（帶有游戲化）又應(yīng)該如何做Web可訪問性？帶著這樣的問題，開始征程。

但在2019年雙11的時(shí)候，主互動(dòng)多人PK項(xiàng)目上線了，公關(guān)部的同學(xué)看到支付寶的有無障礙方面的能力，希望我們的項(xiàng)目也能具備無障礙方面的能力。

起初我和老板說，我們的具備了這方面的能力，只要開啟了讀屏就有效果。結(jié)果呢？

打臉了！打臉的同時(shí)我就納悶了？為啥呢？排查了半天，結(jié)果因?yàn)橐粋€(gè)小細(xì)節(jié)帶來了致命的結(jié)果。也因?yàn)檫@個(gè)事情，我覺得互動(dòng)在可訪問性方面還有更多的事情可做。

除了這個(gè)原因之外，后面了解到手淘APP的用戶群體，就視障人士還是有一定的量。

如果將視野放得更大一點(diǎn)，不僅針對(duì)視障人士做可訪問性，那這個(gè)量又是多少？再加上我國正在進(jìn)入老年化時(shí)代，那么在不久的未來，視力存在障礙的人士只會(huì)越來越多。那么我們就有必要，也應(yīng)該去主動(dòng)的承擔(dān)這樣的責(zé)任，讓自己的產(chǎn)品能讓更多的人，更好的使用。

加上看到雙11蓋樓的互動(dòng)活動(dòng)能讓更多有訪問障礙的人得到一個(gè)更好的體驗(yàn)時(shí)，再次讓我自己堅(jiān)定了一個(gè)信驗(yàn)：我們除了做到處處有互動(dòng)，人人可開發(fā)之外，還應(yīng)該做到有溫度的互動(dòng)：

如何構(gòu)建有溫度的互動(dòng)項(xiàng)目

在聊如何構(gòu)建有溫度的互動(dòng)項(xiàng)目之前，先簡單的和大家說一Web可訪問性?？赡芪覍?duì)于有溫度的理解還過于片面，但讓一個(gè)產(chǎn)品的可訪問性更好，能讓更多的人有更好的訪問，甚至參與進(jìn)來。特別對(duì)于有訪問障礙的人士來說，這就是一種溫暖。

? 什么是Web可訪問性

目前互動(dòng)項(xiàng)目大多數(shù)都是圍繞著Web（也就是大家所說的H5）進(jìn)行的，因此在接下來的文章中只和大家探討Web方面的。

Web可訪問性是Web Accessibility的譯文，很多時(shí)候也被譯為Web無障礙。其中Web是指我們的Web網(wǎng)站或Web應(yīng)用，Accessibility是指可訪問性（很多時(shí)候也被人稱為無障礙），但我更喜歡稱之為可訪問性。

Accessibility常常又被稱為A11Y：

A11Y也成了“可訪問性”的代名詞！

正如前面所說的，很多同學(xué)喜歡把可訪問性稱為無障礙。一度的認(rèn)為，只要讓盲人人士可以正常訪問（操作）Web網(wǎng)站或Web應(yīng)用，該應(yīng)用就具備可訪問性（無障礙就做得好）。其實(shí)這是一種錯(cuò)誤的認(rèn)知。因?yàn)槲覀兯f的可訪問性，其目標(biāo)是：盡可能多的人使用你的網(wǎng)站。

換句話說：為失能人士提供與非失能人士同等機(jī)會(huì)。這里所說的失能根據(jù)具體形式和嚴(yán)重程度各不相同，但主要可以分為四種：認(rèn)知、視覺、聽覺，以及活動(dòng)能力。

人們可能在上述任何一種或多種能力方面有所欠缺。這些可以稱之為“主要障礙”，通常我們考慮的可訪問性針對(duì)的也是這些障礙。徹底失明，徹底失聰，徹底喪失活動(dòng)能力，身體或認(rèn)知互動(dòng)能力大幅受限，這些情況是障礙的最主要標(biāo)志。不幸的是這些很大一部分人都面臨這些困擾，讓這些人也能有機(jī)會(huì)使用信息和技術(shù)獲得樂趣，這一點(diǎn)非常重要。然而還有一個(gè)更大的現(xiàn)實(shí)問題需要考慮，我們每個(gè)人都有可能步入老齡階段，也會(huì)在某些方面面臨一些障礙，哪怕程度并不像上文說的那么嚴(yán)重。另外還有“情境失能（Situational disability）”，所有人都可能受到這種情況的影響。

想想看在嘈雜環(huán)境中想聽清別人說的話，或在面對(duì)壓力或精力不集中的情況下想事情時(shí)的效果吧。面對(duì)外語，尤其是連字母表都和你的母語截然不同的語言，這足以算得上情境失能了。簡而言之，有些情況下所有人都能從具備可訪問性的產(chǎn)品中獲益。

想象一下下圖的場(chǎng)景：

我們?cè)賮砜匆幌耊3C標(biāo)準(zhǔn)組織是如何解釋可訪問性的：

“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.” - W3C (World Wide Web Consortium)

大部分開發(fā)者都有類似這樣的一個(gè)潛意識(shí)，輕易地認(rèn)為所有用戶都能看見和使用鍵盤、鼠標(biāo)或觸摸屏，并且與網(wǎng)頁內(nèi)容的交互方式與自己相同。這會(huì)造成一些人能夠獲得良好的體驗(yàn)，其他人則會(huì)遇到從簡單煩惱到重大障礙的各種問題。

那么，可訪問性（無障礙功能）就是指這樣一類用戶的體驗(yàn)，他們可能不在“典型”用戶這一狹窄范圍之內(nèi)，并且與網(wǎng)站的訪問或交互方式異于常規(guī)。具體地講，它所涉及的用戶是屬于前面所說的“失能人士”。

盡管我們?cè)谔接懣稍L問性時(shí)往往是圍繞身體有缺陷的用戶，但實(shí)際上都能將其與我們使用的界面由于其他原因而無法訪問的經(jīng)歷聯(lián)系起來。您是否曾在手機(jī)上使用桌面版本網(wǎng)站時(shí)遇到問題？是否看到過“您所在地區(qū)不提供該內(nèi)容”消息？或者是否在平板電腦上找不到熟悉的菜單？這些都屬于可訪問性問題。

隨著了解的深入，您會(huì)發(fā)現(xiàn)在這種更廣泛、更普遍意義上解決可訪問性問題幾乎總能讓所有人的用戶體驗(yàn)得到改善。

有了這樣的認(rèn)知之后，我們就來進(jìn)入互動(dòng)項(xiàng)目中如何做可訪問性，從而構(gòu)建出具有一定溫度的互動(dòng)項(xiàng)目。

? 如何構(gòu)建可訪問性應(yīng)用

前面我們花了一些篇幅介紹了什么是可訪問性以及為什么重要。但問題在于通常只有在開發(fā)工作進(jìn)入尾聲后才會(huì)考慮可訪問性。而且可訪問性通常是一個(gè)非常昂貴的過程，尤其是當(dāng)主要開發(fā)工作已完成，系統(tǒng)已經(jīng)完善后才考慮的時(shí)候。但我要說的是，可訪問性依然是值得投入的。

正如像前面所說的，從道德的角度來看，這樣是正確的，也是一個(gè)企業(yè)和開發(fā)者應(yīng)有的社會(huì)擔(dān)當(dāng)。而且在很多地方對(duì)此甚至有法律要求，尤其是政府機(jī)關(guān)和他們選擇的承包商都要考慮到這一點(diǎn)。對(duì)業(yè)務(wù)來說，讓產(chǎn)品更具可訪問性這本身也是合理的，因?yàn)檫@一過程可以改善每個(gè)人最終獲得的可用性。

那么作為開發(fā)者，我們應(yīng)該如何來構(gòu)建一個(gè)可訪問性應(yīng)用呢？

構(gòu)建一個(gè)可訪問性應(yīng)用最簡單的方法是采用可訪問性構(gòu)建方法，就好像在一堆技術(shù)中從頭開始構(gòu)建Web或應(yīng)用程序一樣，每種技術(shù)都自己的角色。就像你在開始構(gòu)建應(yīng)用程序之前需要仔細(xì)考慮要使用什么后端語言（比如是PHP還是Java），前端需要使用什么框（比如是Vue還是React），對(duì)于可訪問性應(yīng)用的構(gòu)建也應(yīng)該這樣做。

換句話說，如果你想成為一個(gè)Web開發(fā)者，學(xué)習(xí)一些HTML、CSS和JavaScript是很有用的，但是僅僅使用這些技術(shù)往往是構(gòu)建不好一個(gè)可訪問性的應(yīng)用。也正因?yàn)槿绱?#xff0c;WebAIM的調(diào)查分析中會(huì)有那么多Web首頁達(dá)不到可訪問性。接下來從以個(gè)幾個(gè)方面展開，來聊聊如何快速構(gòu)建一個(gè)具有高可訪問性的應(yīng)用。如果你感興趣，歡迎繼續(xù)往下閱讀。

★ 可訪問性標(biāo)準(zhǔn)和準(zhǔn)則

W3C組織的互聯(lián)網(wǎng)可訪問性行動(dòng)為互聯(lián)網(wǎng)和開發(fā)者制定了相應(yīng)的標(biāo)準(zhǔn)和準(zhǔn)則，其中最重要的兩項(xiàng)是：

網(wǎng)頁內(nèi)容可訪問性準(zhǔn)則，即Web Content Accessibility Guideline，簡稱WCAG 2.0
可訪問的互聯(lián)網(wǎng)富應(yīng)用標(biāo)準(zhǔn)，即Web Accessibility Initiative – Accessible Rich Internet Application，簡稱WAI-ARIA

WCAG準(zhǔn)則

2008年，W3C發(fā)布了Web內(nèi)容可訪問性指南WCAG 2.0版本，該指南已被廣泛接受為Web可訪問性的全球標(biāo)準(zhǔn)。雖然WCAG 2.0不是一個(gè)法律文件，但許多政府已經(jīng)通過了基于之約的網(wǎng)頁可訪問性立法。2018年6月，W3C發(fā)布了WCAG最新版本，即2.1。

該版本保留了所有WCAG 2.0需求并添加了新的需求。由于WCAG 2.1的要求非常新，大多數(shù)政府還沒有要求這些標(biāo)準(zhǔn)。一般的建議是，各組織應(yīng)在2019年朝著WCAG 2.1標(biāo)準(zhǔn)方向努力。對(duì)于那些已經(jīng)遵循WCAG 2.0的人來說，這并不是一個(gè)大的飛躍。

WCAG 2.0由四個(gè)基礎(chǔ)性原則組成，根據(jù)這四個(gè)原則的首字母，它們被稱為POUR：

• 可被感知的（Perceivable）：信息以及各種交互元素必須可以被用戶看到或者聽到
• 可操作的（Operable）：用戶可以在產(chǎn)品界面和導(dǎo)航中進(jìn)行操作，并能使用諸如屏幕閱讀器等輔助技術(shù)
• 可被理解的（Understandable）：信息的展現(xiàn)和用戶的操作交互必須邏輯清晰一致，以便能被用戶充分理解
• 健壯的（Robust）：網(wǎng)頁和應(yīng)用程序中的內(nèi)容必須確保在各個(gè)平臺(tái)和環(huán)境中都能正確地展示，包括在使用了輔助技術(shù)的情況下

將這四點(diǎn)作為WCAG 2.0的基礎(chǔ)原則是將可訪問性思維融入設(shè)計(jì)中的重要一步，因?yàn)檫@四個(gè)原則為設(shè)計(jì)得提供了可以滿足用戶需求的方法，而非簡單地提供一個(gè)羅列著技術(shù)要求的清單。這四項(xiàng)原則解釋了“為什么”還要保證互聯(lián)網(wǎng)產(chǎn)品的可訪問性，其他的技術(shù)要求則解釋了“如何去”保證互聯(lián)網(wǎng)產(chǎn)品的可訪問性。我們需要使用“POUR”原則來思考并明確用戶的需求，再用WCAG 2.0具體規(guī)則來做符合要求的設(shè)計(jì)。

另外，W3C的《如何滿足WCAG 2.0：快速參考》提供了這些原則中所有要求的詳細(xì)說明。如果你堅(jiān)持每一個(gè)，就可以很容易構(gòu)建一個(gè)可訪問性網(wǎng)站或應(yīng)用。

是否滿足WCAG 2.0準(zhǔn)則，分為三個(gè)級(jí)別：A、AA和AAA：

• A級(jí)通過最基本的可訪問性標(biāo)準(zhǔn)
• AAA級(jí)是通過最高級(jí)別的可訪問性標(biāo)準(zhǔn)

A、AA和AAA就好比我們住的酒店，有一星級(jí)，二星級(jí)等區(qū)別

而在一些法律法規(guī)中，要求Web網(wǎng)頁或應(yīng)用程序的可訪問性級(jí)別需要達(dá)到AA級(jí)別，所以這也是大多數(shù)組織和開發(fā)者所追求的級(jí)別。這對(duì)于各方來說都是較為理想的，因?yàn)锳A標(biāo)準(zhǔn)提供了強(qiáng)大的Web可訪問性，同時(shí)又保留了靈活的設(shè)計(jì)和功能。

WAI-ARIA

2014年，W3C發(fā)布了可訪問的互聯(lián)網(wǎng)富應(yīng)用標(biāo)準(zhǔn)，最新標(biāo)準(zhǔn)是1.2版本。

互聯(lián)網(wǎng)富應(yīng)用標(biāo)準(zhǔn)也為開發(fā)互聯(lián)網(wǎng)管理工具和諸如瀏覽器和媒體播放器之類的軟件提供了指導(dǎo)準(zhǔn)則。WAI標(biāo)準(zhǔn)主要的目的在于解決應(yīng)用的可訪問性問題，它與HTML5標(biāo)準(zhǔn)同屬于W3C組織。WAI標(biāo)準(zhǔn)對(duì)于互聯(lián)網(wǎng)產(chǎn)品的可訪問性至關(guān)重要，因?yàn)樵摌?biāo)準(zhǔn)從最基礎(chǔ)的層面影響著網(wǎng)頁和應(yīng)用程序的可訪問性。

在社區(qū)上可以找到大量和WAI標(biāo)準(zhǔn)相關(guān)的教程，借此推薦大家閱讀一篇《How People with Disabilities Use the Web》，可以更清楚的了解和知道殘障人士如何使用互聯(lián)網(wǎng)。

★ 普適設(shè)計(jì)原則

著名的建筑設(shè)計(jì)師@Ron Mace說過：

普適設(shè)計(jì)的目的在于無須額外適應(yīng)和個(gè)性化設(shè)計(jì)的情況下，讓產(chǎn)口可以最大限度地被所有人無障礙地使用！

普適設(shè)計(jì)原則的前提是認(rèn)為典型的、理想的所謂“正常用戶”是不存在的，用戶情境會(huì)隨著周圍環(huán)境的變化而變化，因此需要用“隨需而變”的精神來貫穿設(shè)計(jì)流程，確保設(shè)計(jì)能夠滿足不同場(chǎng)景下的多種用戶需求：

• 平等使用：設(shè)計(jì)不應(yīng)該歧視任何一類用戶
• 良好的適應(yīng)性：設(shè)計(jì)應(yīng)該對(duì)大多數(shù)用戶的個(gè)體偏好和生理情況都良好的適應(yīng)
• 簡單直觀地使用：無論用戶的知識(shí)水平，閱讀能力和精神集中程序如何，設(shè)計(jì)都應(yīng)該做到簡單直觀易理解
• 確保信息可以被感知：無論用戶的周圍環(huán)境以及自身的感知能力如何，設(shè)計(jì)都要將信息有效地傳達(dá)給用戶
• 容錯(cuò)性：當(dāng)用戶做出設(shè)計(jì)之外的操作時(shí)，設(shè)計(jì)應(yīng)將用戶的操作帶來的負(fù)面影響限制在最低程度
• 使用省力：設(shè)計(jì)應(yīng)該讓用戶的操作舒適而高效，不易疲勞
• 適宜操作的尺寸：無論用戶的體型、姿態(tài)和移動(dòng)能力如何，他們都當(dāng)有合適的大小和空間來進(jìn)行各種訪問與操控

普適設(shè)計(jì)原則之所以充滿吸引力，就在于它提供了一種目的明確的設(shè)計(jì)方法，這種設(shè)計(jì)方法在保證視覺美觀的前提下，能夠創(chuàng)造出讓生個(gè)人都能舒適使用的產(chǎn)品。盡管普適設(shè)計(jì)原則被提出于互聯(lián)網(wǎng)誕生之初，但其中的各項(xiàng)規(guī)范對(duì)今時(shí)今日的互聯(lián)網(wǎng)設(shè)計(jì)仍有指導(dǎo)作用。

★ 設(shè)計(jì)性思維

設(shè)計(jì)性思維是由@Tim Brown提出的：

像一名設(shè)計(jì)師那樣去思考會(huì)改變你開發(fā)產(chǎn)品、提供服務(wù)、制定流程乃至確定戰(zhàn)略時(shí)的思維方式。

設(shè)計(jì)性思維背后的哲學(xué)是這樣的：如果你僅僅在考慮技術(shù)細(xì)節(jié)，那你最終將會(huì)得到一個(gè)無法滿足用戶需求的純技術(shù)型產(chǎn)品，但是如果你能開拓思路，將產(chǎn)品所在的社會(huì)環(huán)境以及用戶的個(gè)體特性都納入考慮，那你將會(huì)開發(fā)出真正以用戶為中心的產(chǎn)品。設(shè)計(jì)性思維中的諸多方面對(duì)于可訪問性設(shè)計(jì)都起著舉足輕重的作用。

• 集成和迭代：貫穿整個(gè)項(xiàng)目的設(shè)計(jì)工作都應(yīng)考慮，而不應(yīng)僅僅把精力集中在優(yōu)化產(chǎn)品的視覺效果上。應(yīng)預(yù)先為產(chǎn)品準(zhǔn)備好一系列備選方案，然后通過構(gòu)建原型、測(cè)試的迭代過程并根據(jù)反饋探索出最佳的設(shè)計(jì)方案
• 發(fā)散性思維：不要限制自己的想象力，應(yīng)該仔細(xì)審視目前方案是否是最優(yōu)解而不是匆匆忙忙地開始編寫代碼實(shí)現(xiàn)方案。在項(xiàng)目進(jìn)入編寫代碼實(shí)現(xiàn)功能的階段之前，發(fā)散性思維往往可以產(chǎn)出具有良好可訪問性的創(chuàng)新性解決方案
• 收斂性思維：結(jié)合使用場(chǎng)景去選擇最有效的設(shè)計(jì)方案，對(duì)于可訪問性設(shè)計(jì)來說，則是選擇最能適應(yīng)多樣的互聯(lián)網(wǎng)環(huán)境并滿足多種個(gè)性化需求的方案
• 以人為本：實(shí)踐設(shè)計(jì)性思維的關(guān)鍵在于理解用戶的欲望、需求和行為習(xí)慣，理解了這些才可能確定項(xiàng)目的方向，并利用用戶的反饋來優(yōu)化產(chǎn)品的設(shè)計(jì)方案
• 洞察力：想獲得良好的洞察力，就必須知道如何才能滿足不同用戶訪問互聯(lián)網(wǎng)的各種個(gè)性化需求，也就是說要去觀察用戶的使用場(chǎng)景，看看他們做了什么，聽聽他們說了什么。洞察力來源于同理心，而同理心又可以來源于故事。換句話說，同理心和洞察力，可以激發(fā)大家的創(chuàng)造力和發(fā)散性思維，最終想出更具創(chuàng)造性的可訪問性設(shè)計(jì)方案

★ 使用設(shè)計(jì)性思維提升可訪問性

設(shè)計(jì)性思維可以改進(jìn)網(wǎng)頁可訪問性設(shè)計(jì)的慣常做法，目前，可訪問性設(shè)計(jì)方面的大多數(shù)工作都僅僅局限在關(guān)注修改細(xì)節(jié)以便符合指導(dǎo)規(guī)范上，這種做法只能產(chǎn)生有限的漸進(jìn)式改進(jìn)，但是如果在可訪問性設(shè)計(jì)中運(yùn)用設(shè)計(jì)性思維，則問題就會(huì)迎刃而解，大量的新想法也會(huì)由此產(chǎn)生。

在很多情況下，可訪問性只有在項(xiàng)目開發(fā)的末期才會(huì)被考慮，而無論對(duì)于開發(fā)者還是用戶來說，解決一個(gè)已經(jīng)成型產(chǎn)品的可訪問性問題都會(huì)存在很多障礙—— 這類似于在已經(jīng)竣工的大樓旁邊額外搭建一個(gè)木頭梯子。

設(shè)計(jì)性思維要求將對(duì)于可訪問性的關(guān)注貫穿整個(gè)項(xiàng)目流程，并充分考慮不同場(chǎng)景下的用戶需求。你應(yīng)該當(dāng)在項(xiàng)目開始就把設(shè)計(jì)性思維融入到工作流程中，而不是在產(chǎn)品成型之后再對(duì)其做可訪問性工作的小修小補(bǔ)，而且在設(shè)計(jì)性思維的指導(dǎo)下，你還可以使用你的既有經(jīng)驗(yàn)去挖掘需求，制作原型，進(jìn)行測(cè)試，從而讓你的優(yōu)雅的產(chǎn)品始終都具有良好的可訪問性。

WCAG + WAI-ARIA + 普適設(shè)計(jì)原則+ 設(shè)計(jì)性思維= 人人都能使用的互聯(lián)網(wǎng)

★ 從開發(fā)的角度來看可訪問性的構(gòu)建

構(gòu)建一個(gè)具有可訪問性的Web應(yīng)用不僅僅是設(shè)計(jì)或者開發(fā)某一個(gè)環(huán)節(jié)就可以做好的。要做好一個(gè)具有可訪問性的應(yīng)用，在產(chǎn)品整個(gè)構(gòu)建過程中每個(gè)環(huán)節(jié)都應(yīng)該努力去做好自己的本職工作。就拿我們開發(fā)者而言，需要考慮的東西絕對(duì)不僅僅是簡單的擼碼，或者按自己以往的經(jīng)驗(yàn)擼碼即可。

作為開發(fā)者，在構(gòu)建可訪問性Web應(yīng)用之前，首先要改變的就是自己的看法和端正自己的態(tài)度。為什么這么說呢？仔細(xì)回想一下，你在開發(fā)一個(gè)Web應(yīng)用的時(shí)候是否有真正的去關(guān)注過可訪問性，是否有真正的去為你的用戶考慮過。如果沒有，說明你是一位未及格的開發(fā)者，哪怕你的技術(shù)再厲害。因?yàn)槟恪皼]有責(zé)任，也沒有擔(dān)當(dāng)”。

而很多開發(fā)者，他是真心的想把自己的產(chǎn)品做到最好，希望給自己的用戶提供最好的體驗(yàn)。但往往很多時(shí)候，他們并不知道如何真正的去做，就好比我們聊的可訪問性。

接下來我將以一個(gè)開發(fā)者的角度來聊聊，如何更好的構(gòu)建一個(gè)可訪問性的Web應(yīng)用。

僅僅掌握HTML、CSS和JavaScript技術(shù)棧是構(gòu)建不好一個(gè)具有可訪問性的Web應(yīng)用。

簡單地說，想要構(gòu)建一個(gè)可訪問性Web應(yīng)該，就應(yīng)該從可訪問性的開發(fā)堆棧開始說起。

眾所周知，在前端開發(fā)者的認(rèn)知里，一個(gè)Web頁面或應(yīng)用都是有HTML、CSS和JavaScript三個(gè)部分構(gòu)成：

每個(gè)部分各斯其責(zé)：

其中HTML會(huì)經(jīng)過HTML Parser將HTML結(jié)構(gòu)轉(zhuǎn)換成DOM Tree；CSS會(huì)經(jīng)過CSS Parser將CSS轉(zhuǎn)換成CSSOM Tree，正如下圖所示：

熟悉瀏覽器工作原理的話，知道DOM樹和CSSOM樹的結(jié)構(gòu)可以構(gòu)建出Render Tree：

最終經(jīng)過幾個(gè)過程就渲染出我們所能看到的Web頁面：

但這對(duì)于構(gòu)建可訪問性頁面而言是不夠的，我們需要借WAI-ARIA相關(guān)的準(zhǔn)則，這樣一來，構(gòu)建一個(gè)可訪問性頁面就有四個(gè)部分構(gòu)成：HTML、CSS、JavaScript和WAI-ARIA：

如果在你的Web應(yīng)用中加入WAI-ARIA之后，將會(huì)在DOM、CSSOM的基礎(chǔ)上新增AOM（Accessibility Tree）：

用一個(gè)簡單地小示例圖向大家演示：

在瀏覽器渲染地過程中，可訪問樹（AOM Tree）和DOM樹是并行結(jié)構(gòu)。粗略地說，可訪問樹是DOM樹的子集。它包括用戶代理的用戶接口對(duì)象和文檔的對(duì)象?？稍L問對(duì)象是在可訪問樹中為每個(gè)應(yīng)該暴露給輔助技術(shù)的DOM元素創(chuàng)建的，因?yàn)樗赡苡|發(fā)一個(gè)可訪問事件，或者因?yàn)樗幸粋€(gè)需要暴露的屬性、關(guān)系和特性。

通常情況下，如果某些內(nèi)容可以被刪除，那么它就會(huì)被刪除，這是出于性能和簡單性的考慮。例如，只有樣式更改而沒有語義的可能無法獲得自己的可訪問對(duì)象，但是樣式更改將通過其他方式來處理。

雖然大家對(duì)于HTML、CSS和JavaScript都不陌生，但這每個(gè)部分在可訪問性的構(gòu)建中都有著自己原則和要求。

★ 構(gòu)建可訪問性的基本原則

@Jeremy Sydik在《設(shè)計(jì)可訪問的網(wǎng)站》一書中針對(duì)網(wǎng)站的可訪問性給出了十個(gè)基本原則。對(duì)于希望讓自己的網(wǎng)站更易于訪問的人，這些原則可以在系統(tǒng)的設(shè)計(jì)和創(chuàng)建過程中提供極為有用的指導(dǎo)：

• 可行的情況下不要假設(shè)你的用戶在身體、精神、以及感官方面具備相同程度的能力
• 用戶所用的技術(shù)能夠發(fā)送和接收文字，這是你唯一可以做的假設(shè)
• 用戶的時(shí)間和所用技術(shù)屬于用戶自己，不屬于我們。如果沒有足夠必要的原因，絕對(duì)不能控制這些
• 為任何非文本內(nèi)容提供足夠好的文本描述
• 通過使用率最廣泛的技術(shù)接觸你的受眾
• 使用簡潔的語言傳達(dá)你的信息
• 確保你的網(wǎng)站可用、可搜索、可導(dǎo)航
• 按照語義設(shè)計(jì)你的內(nèi)容，內(nèi)容和呈現(xiàn)方式之間維持獨(dú)立
• 通過添加額外功能漸進(jìn)式地增強(qiáng)基本內(nèi)容，允許不愿或不能使用這些功能的用戶以得體的方式“降級(jí)”
• 遇到新的 Web 技術(shù)后，為確保其可訪問，也要為這些技術(shù)應(yīng)用上述這些基本原則

除了使用這些原則指導(dǎo)我們?cè)O(shè)計(jì)更可訪問的體驗(yàn)外，還可以使用其他一些技能對(duì)網(wǎng)站的可訪問性進(jìn)行測(cè)試。@Albert Gareev 開發(fā)了一套為測(cè)試工作提供指導(dǎo)的助記短語：“ HUMBLE（謙遜）”：

上圖來自于@Albert Gareev的《HUMBLE：Agile Accessibility Testing Strategy》一文。

簡單的描述一下HUMBLE的含義：

• H – 人性化（Humanize）：有同理心，了解情緒的不同成分
• U – 忘卻（Unlearn）：遠(yuǎn)離你默認(rèn)采用的 "針對(duì)具體設(shè)備進(jìn)行設(shè)計(jì)" 的習(xí)慣，有能力切換至不同的習(xí)慣模式
• M – 模型（Model）：借助不同角色幫你看到、聽到、感受到具體問題，并要考慮行為、節(jié)奏、精神狀態(tài)和系統(tǒng)狀態(tài)
• B – 構(gòu)建（Build）：發(fā)展知識(shí)、啟發(fā)性測(cè)試法、核心測(cè)試技能、測(cè)試基礎(chǔ)結(jié)構(gòu)，以及可信度
• L – 學(xué)習(xí)（Learn）：障礙到底在哪？用戶如何感知、理解和操作
• E – 實(shí)驗(yàn)（Experiment）：將自己置身于不同情況下，與設(shè)計(jì)師和程序員合作并提供反饋

? 互動(dòng)項(xiàng)目構(gòu)建可訪問性的歷程

有了上述的理論依據(jù)做為支承，接下來結(jié)合到互動(dòng)項(xiàng)目中來看，是具體怎么做A11Y的。

★ 互動(dòng)項(xiàng)目的結(jié)構(gòu)

互動(dòng)項(xiàng)目和其他的Web應(yīng)用（H5項(xiàng)目）還是有所差異的，其中最大的差異就是：互動(dòng)的項(xiàng)目帶有游戲化的場(chǎng)景，而且交互方式也更為復(fù)雜。我們來看幾個(gè)互動(dòng)的項(xiàng)目視覺稿：

其最的特色就是：游戲化場(chǎng)景和主交互元素相結(jié)合。如果用Web元素來描述的話就是：Canvas畫布和DOM元素的結(jié)合：

上圖中綠色區(qū)域就是Canvas畫布，也是游戲區(qū)域，在Web中有關(guān)于canvas中A11Y的處理至目前還沒有較好的技術(shù)，因此接下來的內(nèi)容會(huì)先忽略canvas中的內(nèi)容。上圖中高亮的都是DOM元素，而且這些高亮的部分也是鏈路交互元素。

簡單地說，進(jìn)入到主互動(dòng)首頁，主要操作還是這些具備交互的元素之上，那么這些元素如果具有A11Y的能力，有障礙的人士訪問就不會(huì)有障礙。

因此，在設(shè)計(jì)技術(shù)方案的時(shí)候就需要考慮這一點(diǎn)。為什么這么說呢，我們來看兩個(gè)實(shí)際項(xiàng)目的對(duì)比：

左側(cè)是雙12人民寶貝的互動(dòng)項(xiàng)目，當(dāng)初選擇的技術(shù)方案整個(gè)游戲區(qū)域和行動(dòng)點(diǎn)都是在同一個(gè)Canvas畫布內(nèi)，這也致使了該項(xiàng)目如果在做可訪問性，難度和成本都非常的大，而且到目前沒有較好的技術(shù)方案；右側(cè)不同的是，只有蓋樓的游戲區(qū)域（動(dòng)畫區(qū)域）是在Canvas畫布。相比之下，右側(cè)雙11多人PK（蓋樓的活動(dòng)）要做可訪問性會(huì)輕松的多。

選擇比努力更重要，也適用于此。

★ 構(gòu)建可訪問性應(yīng)用如何編碼

對(duì)于開發(fā)者來說，更為關(guān)心的是如何編碼才能讓應(yīng)用更具可訪問性。前面也提到過：構(gòu)建一個(gè)可訪問性頁面就有四個(gè)部分構(gòu)成：HTML、CSS、JavaScript和WAI-ARIA：

這幾個(gè)部分對(duì)于構(gòu)建可訪問性來說都非常的重要，如果要完全的講清楚的話，都可以寫本書了，為了節(jié)約篇幅和大家的時(shí)候，只會(huì)介紹一些關(guān)鍵部分。

HTML 對(duì)可訪問性的影響

在社區(qū)中經(jīng)常可以看到這樣的一個(gè)討論話題：HTML語義化的重要性。其意思是指我們應(yīng)該盡可能地用正確的HTML標(biāo)簽來表達(dá)正確的意圖。特別是在現(xiàn)代Web的開發(fā)當(dāng)中（尤其是使用JavaScript框架，比如React和Vue等），在構(gòu)建Web頁面或應(yīng)用的時(shí)候，越來越多的同學(xué)不再考慮HTML的語義化。在2019年的React Conf大會(huì)上@BrittanyIRL分享的Accessibility Is A marathon, Not A Sprint話題中也特別的提到這方面：

看到上圖，你可能有同感！

或許你可能會(huì)想，“用戶看到的僅僅是呈現(xiàn)后的效果，他們（甚至是你的老板）并不會(huì)太多的關(guān)注語義化（他們也有可能不懂啥是語義化）”。這里用一個(gè)簡單的示例來說明它對(duì)可訪問性的重要性。

使用語義化元素特別是一些UI控件（指的是與用戶交互控件），比如button、a和表單控件是具有高可用性。瀏覽器都知道如何處理它們，它們?yōu)橛脩籼峁┝伺c網(wǎng)站進(jìn)行適當(dāng)交互所需的一切。比如下拉選擇框就是一個(gè)很好的例子。如果在Web中使用默認(rèn)的表單控件要比使用

模擬下拉選擇框的可用性更高。如下圖所示:

上圖中左側(cè)是Safari瀏覽器下的表現(xiàn)效果，右側(cè)是iOS移動(dòng)設(shè)備上的表現(xiàn)效果。

HTML有近百個(gè)元素標(biāo)簽：

面對(duì)一百多個(gè)HTML元素標(biāo)簽，怎么選擇才能讓自己的選擇是對(duì)的。我們可以按照下圖這樣的一個(gè)流程來選擇：

除了選擇具有語義化的標(biāo)簽元素之外，對(duì)于元素的屬性也應(yīng)該根據(jù)具體的使用場(chǎng)景來選擇。比如元素，它的type類型有很多種，如果選對(duì)了，對(duì)于用戶的交互是友好的，比如下圖所示：

同樣的input，不同的type喚起的設(shè)備鍵盤就是不一樣。假設(shè)你要輸入的是一個(gè)電話號(hào)碼，你試想一下，喚起來的鍵盤只有數(shù)字鍵，是不是心情很爽，也無需花更的時(shí)間去做選擇。

除此之外，我們還可以根據(jù)下面的這些原則來構(gòu)建自己的HTML或模板：

• 使用最具語義化的HTML標(biāo)簽元素
• 結(jié)構(gòu)和樣式的分離
• 定義文檔的語言類型非常重要
• 隱藏內(nèi)容
• 不要遺忘的alt屬性
• 包含描述性內(nèi)容鏈接
• 使用通俗易懂的語言
• 允許僅通過鍵盤訪問內(nèi)容
• 在必要時(shí)使用ARIA

回到我們的項(xiàng)目中來：

嘗試著問自己，上圖標(biāo)出來的能回答出來？回答的是正確的嗎？

CSS 對(duì)可訪問性的影響

一直以為我都認(rèn)為，Web的可訪問性只和HTML相關(guān)，而事實(shí)上并非如此。CSS對(duì)于可訪問性的影響也是蠻大的。比如排版的可讀性、顏色的對(duì)比度、可聚焦元素的焦點(diǎn)樣式等等。下面簡單的來看幾個(gè)我們能經(jīng)常接觸到的。

構(gòu)建易讀到可讀的文本

如何構(gòu)建易讀到可讀的文本，這里引用@Marcella Jalbert在她的博文《How to design for readability – a guide to successful web typography》中提供的一張圖來闡述，正所謂一圖勝過千言萬語：

事實(shí)上文本排版所涉及的知識(shí)和信息量非常多，而且其中很多都和可訪問性有關(guān)。在一篇文章中是無法把所有東西和大家聊清楚的。后續(xù)我們可以再花時(shí)間來和大家一起討論排版和可訪問性方面的話題

1、顏色對(duì)比度

說到顏色對(duì)比度，可能很多同學(xué)會(huì)認(rèn)為，這跟前端有啥關(guān)系，這不是視覺的活嗎？如果從設(shè)計(jì)的角度來看的話，顏色的選擇和決定權(quán)是在視覺那里，但最終還原的是開發(fā)者，如果顏色使用對(duì)可訪問性有影響的話，我們有責(zé)任對(duì)其糾正，或和視覺設(shè)計(jì)師一起討論。不過，有的時(shí)候現(xiàn)實(shí)是很殘酷的，正如@Sheri Byrne-Haber 在他的博文《10 things that indicate designers have no clue about accessibility》中闡述的一些觀點(diǎn)，還是有一定的道理的。

回到顏色對(duì)Web可訪問性影響這個(gè)話題上來。

為網(wǎng)站選擇配色方案時(shí),請(qǐng)確保文本(color)顏色與背景顏色(background-color)對(duì)比度良好。您的設(shè)計(jì)可能看起來很酷,但如果有視覺障礙(如色盲)的人無法閱讀您的內(nèi)容,則設(shè)計(jì)就顯得一無事處。

2、可點(diǎn)擊區(qū)域應(yīng)該足夠大

可點(diǎn)擊區(qū)域是否合理直接影響了用戶和你的產(chǎn)品的交互，特別是在移動(dòng)端。大家可能有碰到過，有些產(chǎn)品在按鈕、鏈接、復(fù)選框或單選框等操作上就是失效，要點(diǎn)擊很多次才能有效果。造成這種行為就是因?yàn)辄c(diǎn)擊區(qū)域過小。可這種交互對(duì)于有行動(dòng)障礙的用戶來說也是致命的一種。

特別是在一些可點(diǎn)擊操作的圖標(biāo)上，Icon圖標(biāo)的實(shí)際尺寸并不適合一些系統(tǒng)的設(shè)計(jì)規(guī)范，在iOS上就提供Icon圖標(biāo)可點(diǎn)擊區(qū)域應(yīng)該是48px x 48px，如果你使用的圖標(biāo)小區(qū)該區(qū)域的話，我們就應(yīng)該通過別的方式來進(jìn)行擴(kuò)展。比如在一個(gè)卡片上，可以讓整個(gè)卡片都具有可點(diǎn)擊效應(yīng)（click事件綁定在）元素之上。如下圖所示：

3、可聚焦元素樣式設(shè)置

可以訪問你的應(yīng)用有一些用戶群體屬于行動(dòng)障礙中的一部分：

對(duì)于有行動(dòng)障礙的用戶群體而言，訪問性Web應(yīng)用時(shí)主要依賴于鍵盤操作（還有一群高體依賴鍵盤的用戶）。那么元素的焦點(diǎn)樣式的設(shè)計(jì)對(duì)于這些群體來說是非常重要的。

但在移動(dòng)端的話，對(duì)于可聚焦元素樣式往往就顯得不是那么的重要。

4、隱藏內(nèi)容

使用CSS來隱藏Web的內(nèi)容經(jīng)?？梢?#xff0c;比如用圖片替代文本，在互動(dòng)這種重氛圍場(chǎng)景之下，更常用，比如：

CSS實(shí)現(xiàn)圖像替代文本的技術(shù)方案有很多種，但不同的技術(shù)對(duì)于可讀性的影響有所不同，特別是對(duì)于屏幕閱讀器來說，比如:

眾多方案中，我更推薦使用下面這種方案。該方案在讓元素獲得焦點(diǎn)的時(shí)候，隱藏的內(nèi)容會(huì)顯示出來，比如說使用tab鍵，定位到隱藏的元素時(shí)會(huì)顯示出來：

.sr-only:not(:focus):not(:active) {position: absolute;height: 1px;width: 1px;clip: rect(1px 1px 1px 1px);clip: rect(1px,1px,1px,1px);clip-path: polygon(0px 0px, 0px 0px, 0px 0px);overflow: hidden !important; }

該方案對(duì)于屏幕閱讀器特別的友好。要是沒使用sr-only來隱藏元素，而是采用aira-hidden="true"來隱藏元素的話，可以考慮@Nicolas Hoffmann提供的方案。

5、針對(duì)特定的場(chǎng)景禁用動(dòng)效

在Web中很多地方都能看到Web動(dòng)效的身影，雖然動(dòng)效應(yīng)用好的話可以給Web起到錦上添花的效果，但是對(duì)于特定人群的話反而不是好事。因?yàn)橛行﹦?dòng)效對(duì)這些特殊的用戶群體會(huì)造成不良的反應(yīng)，會(huì)引起癲癇。為此，為了避免這種現(xiàn)象出現(xiàn)，媒體特性中提供了prefers-reduced-motion條件來做判斷。只要用戶在設(shè)備上開啟了Reduce Motion功能：

并且在代碼中顯式的設(shè)置了：

@media (prefers-reduced-motion: reduce) {* {animation: none;} }

ARIA對(duì)可訪問性的幫助

我們知道WAI-ARIA是W3C編寫的一套規(guī)范，定義了一組可用于其他元素的HTML特性（Attributes），用于提供額外的語義化以及改善缺乏的可訪問性。比如

<div role="button">回到首頁</div>

div標(biāo)簽是屬性無語義化的一個(gè)HTML標(biāo)簽，通過ARIA技術(shù)，即給div標(biāo)簽加上role（角色），這樣一來一些輔助技術(shù)（比如屏幕閱讀器）就知道這個(gè)div不是一個(gè)普通的標(biāo)簽，而一個(gè)具有按鈕角色的標(biāo)簽。

正如上面示例所示，ARIA就是這么簡單易于。雖然ARIA是一套獨(dú)立的規(guī)范，但對(duì)于一個(gè)Web頁面或Web應(yīng)用程序而言，ARIA始終離不開HTML，哪怕是通過JavaScript動(dòng)態(tài)來控制ARIA，也最終附加到HTML標(biāo)簽元素上。如果不想思考太多，可以簡單地理解成：

ARIA所有特性都是HTML的附加屬性（Attributes）。

ARIA整個(gè)規(guī)范中有三個(gè)主要的特性：角色（Role）、狀態(tài)（State）和屬性（Property）：

WAI-ARIA可以為可訪問性提供更詳細(xì)的信息：

• 角色：這是什么類型的“東西”？比如，它是一個(gè)button
• 狀態(tài)：它的情況如何？比如disabled、checked
• 名稱：它的名稱或標(biāo)簽是什么？
• 關(guān)系：它是否以某種方式與頁面中的其他元素相關(guān)聯(lián)？

瀏覽器會(huì)將這些信息映射到操作系統(tǒng)的可訪問性API，并將其公開給輔助技術(shù)。一旦ATs理解了含義（或目的），它可以自動(dòng)讀出特定的提示（或相關(guān)信息）。

使用WAI-ARIA主要可以做到：

• 讓輔助技術(shù)用戶（比如屏幕閱讀器）可以理解定制的小部件（Widget）
• 以編程方式指示元素之間的關(guān)系
• 通知用戶動(dòng)態(tài)更新
• 向輔助技術(shù)隱藏不相關(guān)的可視內(nèi)容
• 未完全重新編碼的不可訪問內(nèi)容的修復(fù)

但WAI-ARIA并不是萬能的，他的使用也是會(huì)受到一定限制的，特別是ARIA的角色和屬性的使用：

• 某些角色只能作為特定復(fù)雜小部件的一部分（詳細(xì)請(qǐng)見ARIA的角色一節(jié)）
• 一些aria-*屬性是全局的
• 其他aria-*屬性只適用于特定的角色
• 并不是所有的角色或?qū)傩远嫉玫揭恢碌闹С只驅(qū)崿F(xiàn)

雖然WAI-ARIA在某些場(chǎng)景之下能增強(qiáng)HTML標(biāo)簽的語義化，但這并不代表他是萬能的。特別是對(duì)于剛接觸WAI-ARIA而言，你始終要記得WAI-ARIA不是魔法，也不是萬能的，他僅僅只是改變了輔助技術(shù)解釋內(nèi)容的方式。具體的說；

WAI-ARIA還有很多事情是做不到的：

• 不能讓非聚焦的元素得到焦點(diǎn)
• 提供適當(dāng)?shù)逆I盤綁定
• 改變?yōu)g覽器的行為
• 自動(dòng)維護(hù)或更新屬性
• 變化可見的UI視覺（除CSS使用特性的選擇器重構(gòu)UI風(fēng)格之外）

可以說，WAI-ARIA是一個(gè)龐大的體系，涉及的知識(shí)點(diǎn)和相關(guān)信息也非常的多，要用好WAI-ARIA并不是一件易事，但我們遵循一些使用規(guī)則會(huì)讓其變得更簡單些。

• 不要使用WAI-ARIA，使用原生HTML標(biāo)簽元素
• 除非真的需要，否則不要更改原生語義
• 所有交互式ARIA控件必須與鍵盤一起使用
• 不要讓可聚焦元素變得中立（Neutralise）
• 所有交互元素必須有一個(gè)可訪問的名稱

如果用一句話來描述的話:NO ARIA is better than bad ARIA!

JavaScript有助于提高可訪問性

在我們平時(shí)的開發(fā)中，很多同學(xué)不會(huì)采用具有語義化的標(biāo)簽，比如頁面中的一個(gè)按鈕，用 button 可以讓我們減少很多工作量，但事實(shí)上很多人用div這樣的非語義化的標(biāo)簽來作按鈕：

<divtabindex="0"role="button">Play</div>

為了這個(gè)模擬按鈕具有交互行為，就需要使用JavaScript了：

const buttons = document.querySelectorAll('.button');[...buttons].forEach(button => {button.addEventListener('click', doSomething);button.addEventListener('keyup', (event) => {if (event.key == 'Enter' || event.key == ' ') {doSomething();}}); });function doSomething() {console.log('Something!'); }

特別是在做可訪問性的時(shí)候，強(qiáng)度依賴ARIA，那么更需要JavaScript方面的加持。比如改變ARIA的狀態(tài)。其實(shí)這樣的事例很多，這里就不一一列出。

如何檢測(cè)和修復(fù)可訪問性

通過前面的內(nèi)容，我們可以構(gòu)建一個(gè)具有一定可訪問性的應(yīng)用，但不能完全確定其中不存在問題。為了能更好的完善Web的可訪問性，我們可以借助一些工具來幫助我們做檢測(cè)和修復(fù)其中的不足。前段時(shí)間在《創(chuàng)建可訪問性網(wǎng)站并不是想得那么難》一文中對(duì)這方面做過一些探討。比如通過一些第三方在線的測(cè)試工具或?yàn)g覽器的插件來做檢測(cè)：

但這些檢測(cè)工作都是一些人肉工作：

除此之外，還可以采用一些NPM包，把關(guān)于A11Y相關(guān)的檢測(cè)集成到自己的工程鏈路中來：

• React A11y
• Vue A11y
• react-axe
• vue-axe
• eslint-plugin-jsx-a11y
• eslint-plugin-vue-a11y
• agnostic-axe

這樣一來就可以做一些自動(dòng)化的檢測(cè)：

這里我需要特別推薦agnostic-axe，因?yàn)樗粫?huì)受限于任何框架:

// src/page/index/index.tsxif (process.env.NODE_ENV !== 'production') {// Import agnostic axe here.// Webpack will comment out this code in production.import('agnostic-axe').then(({ AxeObserver, logViolations }) => {console.log(`?→??💃🏾😃💁👉👉Minor（小錯(cuò)誤）、Moderate（中等的）、Serious（嚴(yán)重的）和Critical（至關(guān)重要的）; Serious和Critical必須相辦法修復(fù)1. 配置文檔: https://github.com/juliettepretot/agnostic-axe2. Axe Core: https://github.com/dequelabs/axe-core3. https://web.dev/accessibility-scoring/4. https://web.dev/lighthouse-accessibility/💁😃💃🏾??→?👉👉`);const MyAxeObserver = new AxeObserver(logViolations);MyAxeObserver.observe(document);});}

這個(gè)時(shí)候在瀏覽器會(huì)輸出相關(guān)的檢測(cè)結(jié)果和提示修改建議：

雖然這些工具能幫助我們檢測(cè)出問題，但要記住，它并不能幫助我們解決所有可訪問性的問題。正如Axe所說：

Please note that only 20% to 50% of all accessibility issues can automatically be detected. Manual testing is always required. For more information see: Web Accessibility Testing, Part 2: Basic Methods and Tools。

待續(xù)...

這里不想做總結(jié)，因?yàn)檫@是一個(gè)持續(xù)性的過程，需要我們不斷的堅(jiān)持。只有這樣才能慢慢的變得更好。最后感謝大家花時(shí)間閱讀此文。感興趣的話，請(qǐng)待后續(xù)相關(guān)更新。如果你對(duì)這方面也感興趣，歡迎能一起交流和學(xué)習(xí)。

總結(jié)

以上是生活随笔為你收集整理的淘宝的互动项目，为什么总会刷爆你的好友圈？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。