前端不止：Web內容的無障礙性

8 人贊了文章

網民統計報告

根據2017年7月份發布的第40次中國互聯網路發展狀況統計報告：

截至 2017 年 6 月，中國網民規模達 7.51 億，中國手機網民規模達 7.24 億， 中國網民中農村網民佔比 26.7%，規模為 2.01 億。

截至 2017 年 6 月，中國網民通過台式電腦和筆記本電腦接入互聯網的比例分別為 55.0% 和 36.5%；手機上網使用率為 96.3%，平板電腦上網使用率為 28.7%；電視上網使用率為 26.7%。

截至 2017 年 6 月，我國非網民規模為 6.32 億。上網技能缺失以及文化水平限制仍是阻礙非網民上網的重要原因。調查顯示，因不懂電腦 / 網路，不懂拼音等知識水平限制而不上網的比例分別為 52.6% 和 26.9%；由於不需要 / 不感興趣而不上網的比例為 11.2%；受沒有電腦，當地無法連接互聯網等上網設施限制而無法上網的比例分別為 9.3% 和 6.2%。

提升非網民上網技能，降低上網成本以及提升非網民對互聯網需求是帶動非網民上網的主要因素。

信息無障礙

今天，我想討論一個關鍵的詞語——信息無障礙。

信息無障礙，英文詞語來自「Accessibility」，是指任何人（注意是任何人，無論是健全人還是殘疾人，無論是年輕人還是老年人等等）在任何情況下都能平等地、方便地、無障礙地獲取信息、利用信息。

首先，我們要對Accessibility（無障礙）的一些錯誤認識進行一些糾正：這樣一個詞，很多人自然地跟殘障人士聯繫起來，因為經常可以看到無障礙坡道、無障礙洗手間這樣的詞語。

信息無障礙更多強調的是對所有人都平等，方便的獲取信息。比如：鍵盤上的F和J的凸起基準鍵。它的作用就是方便任何人可以精準的找到鍵盤字母的位置，從而可以在不看鍵盤的情況下，快速的打字，俗稱「盲打」，大家都知道它的含義，沒有人會把這個詞理解為「盲人打字」吧。

（鍵盤基準鍵）

我國非網民規模為 6.32 億，由於個人主觀意願，比如：不需要 / 不感興趣而不上網的比例僅僅佔11.2%。

那麼，剩下的88.8%，也就是大約5.612億人，是有上網需求的，但因為其他各種原因而不能上網。信息的公平使用和訪問，是所有人的基本權利，如果你不能像身邊其它人一樣公平的獲取信息，那意味著你不能公平接受教育、就業、獨立生活等等。

我為什麼會注意

我是誰？我為什麼關心這些？這不是個哲學問題。每個人身上都有很多的標籤，但在這裡，我的標籤是一個普通的Web開發工程師，一個新科技產物的使用者，一個信息的生產者和使用者，一個能「無障礙」獲取信息的個體。而我的生活和我的工作讓我開始關注「無障礙」這樣一個詞。

在互聯網的大環境下，所有人的生活都方便了不少，我們可以遠程辦公，遠程接受教育，網上購物，現在甚至連買菜、買水果都不需要出門，就這段時間，我媽有時都會直接在網上買菜和水果。

在我們享受這種生活便利的同時，我們也常常聽到一些聲音，比如：「這些都是年輕人的東西」，「我家小孩手機app玩的可溜了」。

前幾天，我去辦理港澳通行證，其實已經比我五年前辦護照時方便很多，然而，在市政府政務中心的自動辦理出境機器旁邊，我會聽到有幾位年長的人說「這個機器不會用，怎麼辦？」，另一個人說，「沒事，有個警察在旁邊幫你操作」。這就意味著，如果旁邊沒有那個警察幫著操作，那麼就不方便使用了，至少不是對所有人都方便。

科技的便利性看來還不是對所有人都便利，其實它還是需要一定的學習成本。

因為在外企的緣故，我有幸參加過一些海外的項目，在需求的實現過程中，客戶對應用的無障礙性都會有一定的要求，於是我從中學習到了不少的相關知識。當然我也去過一些其他國家，跟不同國家的同事討論過這方面的問題，也聽他們介紹了一些做的不錯的項目。所以我來舉個例子：

比如，澳大利亞政府的「網路可訪問性國內過渡戰略」（NTS）規定，所有政府網站及其內容必須在 2012 年 12 月 31 日以前達到 WCAG 2.0 的 A 級合規要求，並在 2014 年 12 月 31 日之前達到 AA 級合規要求。

WCAG是萬維網聯盟（W3C）發布的一套名為「Web Content Accessibility Guidelines (WCAG) 」的網路內容可訪問性指引。該指引目前是網路可訪問性的國際標準。合規等級分為三級（A、AA 和 AAA）。

相關達到 WCAG 2.0 的 A 級合規要求的網站，例如：澳大利亞官方政府網站，澳大利亞政府留學網站等，體驗一下他們在Web內容無障礙性的一些實踐，比如：只通過tab和enter來導航到不同的網站區域。

如果反觀一下國內的一些相關網站，無障礙訪問的體驗感一下就降低了不少。

是能力問題還是被忽略了？

有時候，我在想這樣一個問題，到底是我們的能力問題，還是問題被忽略了，當然大部分人的答案會是後者。

但我有時候會認為是前者，因為我們忽視了這個問題，所以導致其實我們也缺乏這方面的能力，無論是開發還是設計。

「目前我國99%的網站，由於沒有實現無障礙，盲人難以正常瀏覽訪問網站。」省盲協主席、中山大學工學院教授富明慧於2013年說的。富明慧本身就是一名盲人，他失明後發明了電腦盲文輸入法。他說，加快網站無障礙改造，政府部門網站應該先行一步。

如果你在一個互聯網公司工作，你大可在周邊一問，比如：你聽說過Web Accessibility？或者你知道怎麼做才是最佳的方式嗎？我們的產品裡面有做這個？會作為代碼和質量審核的一部分嗎？

從哪裡開始

連續追問這幾個問題，的確會讓不少人啞口無言，包括我自己在內。首先，我要承認這個不是一件容易的事情，否則不會有今天這樣的一個討論和思考。

我認為無障礙性的實現，應該是一個端到端的過程，不是設計師（UX/XD），不是開發(Dev)，不是質量分析師(QA)某個人的責任，而是整個產品研發過程中所有人的責任，也許從產品構思的那天的就要開始考慮（比如：用戶群體）。

其實這是個如何去做的話題會比較大，但是我想在這裡舉幾個簡單例子，讓大家產生一些共鳴，也許從明天開始，在寫代碼和設計的過程中，你就會注意這些小的細節。

例子：通過Tab切換聚焦的的順序

由於行動障礙而無法使用滑鼠的人，會使用鍵盤進行頁面的瀏覽。而頁面上DOM的順序會決定Tab切換時聚焦（focus）的順序，我們知道CSS可以改變DOM在頁面上的顯示位置邏輯，但是DOM本身的順序沒有改變，這就容易導致Tab切換時給鍵盤使用者帶來困惑。比如：

<div stylex="width:200px"> <button stylex="float: right">右邊菜單按鈕</button> <button>左邊</button> <button>中間</button></div>

當使用tab進行切換時，並不是最先聚焦到「左邊」這個按鈕，而是右邊菜單，這就和頁面上看到的邏輯產生了衝突。

例子：通過tabindex聚焦彈出框

你有沒有注意到Bootstrap的模態框是這麼寫的：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 彈出</button><div class="modal fade" id="myModal" tabindex="-1" ...其他屬性省略>...</div>

當tabindex=-1時，表示當前元素必須要被聚焦，如果是元素彈出框，就需要使用tabindex，這樣才能保證使用鍵盤的用戶可以理解通過tab切換到模態框中的各個元素。如果你沒有使用像Bootstrap這樣的框架，那麼當用其他前端框架實現自定義的模態框時，請務必考慮這個細節。

例子：請自定義元素的outline樣式

你知道CSS中{ outline:none }對於網站的無障礙訪問性是一個致命的做法嗎？為什麼我們還會這麼做呢？因為元素在被聚焦時，會有一個藍色的輪廓，而出於視覺效果的考慮，被認為是「不好看的」，所以被去掉了。

於是，當通過tab進行頁面瀏覽時，很難立刻知道游標當前聚焦在哪一個元素（鏈接或者輸入框）。這種情況，我們需要為它的聚焦效果提供一個另外的設計，以便同時保證它的功能性和視覺效果。更多關於{ outline:none }的內容，大家可以參考：http://www.outlinenone.com/。

例子：設計頁面時，請滿足文字上的前後景顏色的對比度

（文字和背景的顏色對比）

WCAG 2.0 的1.4.3條對頁面上文字的對比度有一個最低的要求4.5 : 1，目的很明顯是為了保證色盲/色弱人群可以無障礙的訪問網站的內容。假如說你是產品經理，有一天設計師告訴你，這個設計可能導致10個用戶裡面有1個用戶存在訪問障礙，閱讀困難，你能接受嗎？我想誰都接受不了。

有什麼工具可以幫助檢測網站的無障礙性嗎？

對於普通使用者，可以使用Chrome的審計功能和Accessibility Developer Tools(Chrome插件)，它能幫助你自動的檢測網頁的的可訪問性問題，以及幫助你提供相關的修正信息。

（Chrome的審計功能）

Accessibility Developer Tools(Chrome插件)

對於開發人員，可以做一些自動化的檢測，比如：使用pa11y這樣一個工具，它是基於HTML codeSinffer以及PhantomJS製作而成的網站內容A11y(Accessibility，無障礙性)自動化檢查工具。pa11y出現在ThoughtWorks 2017年3月的技術雷達中，我的同事寫過一篇詳細的文章來介紹這個工具：《無障礙性測試工具 Pa11y》。

當然，最重要和最有效的檢驗方式是用戶測試，比如：假設你自己是一個純鍵盤的網站瀏覽者，嘗試一下用鍵盤瀏覽自己開發的網站，是否能夠方便的導航到網頁的各個部分，並進行無障礙的閱讀和交互。

還有其他一些重要的關注點嗎？

有的，比如：基本HTML的語義化，alternative text的使用，ARIA標籤屬性的使用，都可以幫助屏幕閱讀器有效的告訴使用者當前的元素類型和作用。

不要小看這些細節

?不要小看這些細節或者說基礎功能，它涵蓋的人群非常大，根據國家統計局最新數據，在中國，單是65歲的老年人已經超過1.5億人口。加上其它障礙人群，以及第二語言學習者，等環境障礙人群，粗粗一算，這麼簡單的特性就能方便好幾億的用戶，為什麼要省略呢？

我在寫這篇文章的時候，也去查了不少的資料，我覺得知乎上有一個人說很好：對無障礙性一個最大的誤區是，將信息無障礙，當做產品的情懷功能，而非基礎功能或Bug去對待。

文/ThoughtWorks 朱本威

更多精彩洞見，請關注微信公眾號：思特沃克