10條提升網站可訪問性的建議

咱們收集了10條提升網站可訪問性的建議以保證網站你的網站對任何人都是友好的，包括殘疾人。

W3C和萬維網的負責人Tim Berners-Lee發表了一篇報道，他說：「網絡的力量在於它的廣泛性」。 做爲經過網站謀生的人，咱們有責任確保每一個人都能訪問他們。 Web可訪問性聽起來很高端，但它實際上比聽起來容易得多。

咱們的十個網絡可訪問性建議旨在確保對全部網站都是通用的。

這不只有助於正常的用戶體驗，並且還能夠提升網速比較差的時候的瀏覽體驗。 咱們已經按照時間順序對咱們的指南進行了排序，以便您清楚地瞭解在每一個過程當中須要作的措施。 當你遇到相似的問題的時候，你能夠參照咱們的指南。

第一件事：

Web Accessibility是什麼？

根據W3C，Web Accessibility意味着每一個人均可以感知，理解，瀏覽，交互和對web貢獻。 在這方面，Web Accessibility包括影響網絡訪問的全部條件，包括視覺，聽覺，身體，言語，認知和神經障礙。

您將在網絡上找到關於此主題的一些內容，若是此主題感興趣，您應該更深刻地介紹Web Accessibility Initiative（WAI）。

考慮到這一點，這裏是咱們的指導方針：

一、不依賴於顏色

顏色是咱們常常用來表達情感和在web上傳達信息的強大工具。 可是，咱們不該該把咱們全部的想法和信息都以色彩的形式傳達給用戶。

爲何？

例如，衆所周知，綠色意味着「正確」，紅色意味着「錯誤」，可是當咱們將其用做溝通的惟一手段時會發生什麼？

色盲是最多見的視力缺陷之一。 它影響了全球人口的4.5％（數量超過了IE11用戶，您知道的...）。

若是在咱們的用戶界面中只經過眼色來傳達重要的信息，那麼咱們是在忽略這占人口4.5％的用戶。

顏色應該補充錯誤或確認消息，但它不能是咱們使用的惟一工具。 爲了確保咱們覆蓋全部用戶，咱們應該添加標籤或圖標，顯示錶單中填寫的信息是對仍是錯。

caniuse.com採用了一個很是有趣的解決方案，該解決方案提供了一種替代調色板來顯示其兼容性表的內容。

在設計時，理想的方案是檢查色盲和對比度，因此確保您和您的設計團隊擁有正確的工具。 咱們強烈推薦用於Sketch的Stark插件，以幫助您設計可訪問性！

二、不要禁止縮放

在響應式的時代，咱們可能會犯下一些不負責任的錯誤。

其中之一是 maximum-scale=1.0 的出現，它禁用使用移動設備放大網頁的功能。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

散光影響歐洲和亞洲30-60％的成年人，但模糊的視力會影響到全部年齡和國籍的人。

縮放的能力不只僅是WCAG的另外一個準則，而是簡化這些人平常生活的工具。 因此下一次你正在創建一個響應式的網站，想一想視力模糊的這些人。

除了讓用戶能夠在移動設備上自由縮放外，還要注意，您的佈局還須要在縮放多達200％的桌面瀏覽器上能夠正常顯示。

三、從新認識alt屬性

不管您製做網站多久，您可能都會驚訝地知道這些關於著名但又神祕的alt屬性的幾個功能。

1. alt屬性是每一個img標籤必須有的，但空的alt屬性是徹底有效的。 若是一個圖像是裝飾性的或者跟頁面主題思想沒有強關聯，你能夠簡單的使用alt =「」。
2. 屏幕閱讀器告訴用戶，一個<img>標籤是一個圖像，因此沒有必要說明這是XX的圖片，能夠直奔主題。
3. 圖像的功能與其表明的意義同樣重要：若是您的logo連接到您的網站的主頁，那麼您的alt文本應該是「Home Page」而不是「Logo」。
4. 替代文本不只僅是可訪問性。 有時，網速慢的用戶會禁用圖像，從而實現更快的瀏覽體驗。 每當你寫你的alt屬性時，都會想到這些用戶！

但不是您網站上的全部圖片都是img標籤，對吧？ 你可能有一個SVG或兩個在那裏...或整個SVG圖標系統。

咱們如何使全部人均可以訪問SVG？ 幸運的是，咱們能夠看出，可擴展矢量圖形標準已經覆蓋了咱們的需求！ 爲了描述咱們的向量，咱們使用<title>和<desc>標籤來描述簡短和較長的描述。

<symbol id="langIcon">
    <title>Language Icon</title>
    <desc>Longer description</desc>
    <path d="M0 2C6.47 2 2 6.48 2 12s4.47 10 9.99 0h24v24H0z" />
</symbol>

四、爲您的視頻添加subtitle和captions

這多是WCAG實現的最困難的準則之一，而不是由於技術上的困難，而是由於它多是耗時的。 有幾種方法能夠完成這項工做：

1. 咱們以YouTube爲例。 將視頻上傳到平臺後，您能夠啓用封閉字幕。 這些會自動生成，而且在某些狀況下可能會致使不許確，這取決於語言，背景噪音或揚聲器的口音。 然而，這些都很容易實現，而且能夠在大多數講英語的視頻上運行良好。
2. 若是咱們正在尋找100％準確的字幕，很難相信YouTube可以提供，因此咱們必須本身寫字幕或僱用第三方來作到這一點。 YouTube將採用最多見的字幕格式（.srt，.sub和.sbv），並讓咱們在平臺自己上輸入字幕。若是咱們沒有字幕軟件，或者咱們但願社區幫助咱們翻譯內容，可是並不但願對社區提供咱們的平臺帳號。
3. 但也許您不但願使用YouTube做爲您的平臺。 也許您但願使用服務器上託管的HTML5視頻。 那麼正好，HTML5包括<track>標籤，您可使用它來輕鬆地使用WebVTT格式（翻譯FTW！）輕鬆地附加儘量多的字幕和字幕文件。

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track label="English Captions" kind="captions" srclang="eN" src="captions.vtt" default>
    <track label="Subtitulos en español" kind="captions" srclang="es" src="subs.vtt">
</video>

五、語義=可訪問性

字體標記，記得嗎？ 我但願你最好不要記得那些是黑暗的時代。

儘管廣泛認爲，HTML5並非原本就帶有語義化的。 可是自從第一個HTML頁面以來，他們一直在與咱們在一塊兒，並今後大大改善。 隨着HTML5標準，引入了新的語義標籤。

好的，但語義化標籤是否是僅僅爲了SEO？

並非的。 當您經過<p>或<span>選擇<h1>標籤時，您是在有意識的更改元素的含義，提供層次結構，並構建頁面信息的樹結構。

屏幕閱讀器不會忘記這一點。 事實上，語義是其最有用的武器之一。

請記住，能力越大責任越大，因此請確保爲每一個元素使用正確的語義標籤，從h1到全新的主標籤。

六、使用正確的標記

接上前一個點，想和你們討論一些事情

Time vs. Datetime

使用ISO8601標準來表示日期和時間元素顯示許多類型的日期格式，時區和一段時間。

Datetime是一個可選屬性，能夠幫助表示<time>的內容。 咱們來看一些例子：

<time>14:54</time> Hours and minutes
<time>2018-06</time> Year and month
<time>-03:00</time> Time zones
<time>2h 32m</time> Harry Potter 2 Duration
<p>CSSConf Argentina took place on <time datetime=」2016-08-07」>August 7th</time></p>

Del and Ins

web不斷變化，但不須要忽視這些更改。 咱們可使用ins和del HTML標籤與datetime屬性組合來標記編輯。

ins元素表明文檔的一個補充：

<ul>
    <li><ins datetime="2017-08-02">Icecream</ins></li>
    <li>Candy</li>
    <li>Pasta</li>
</ul

del元素表示刪除的內容：

<ul>
    <li><del datetime="2017-06-05">Rewatch Harry Potter 8</del></li>
    <li><del datetime="2017-06-05">Cry because ____ dies.</del></li>
    <li><del datetime="2017-06-06">Write article</del></li>
    <li>Order room</li>
</ul>

Button vs. a tag

咱們何時應該分別使用？

讓咱們來看看：

a標籤旨在將一個文件連接到另外一個文件或在新選項卡或當前頁面中打開連接。 可是，當咱們但願觸發諸如漢堡包菜單或圖像庫之類的操做時，這個標籤並不理想。 按鈕元素是這些狀況的正確選擇，一般能夠經過JavaScript實現。

此外，按鈕標籤能夠容易地與type="button"混淆，但差別依賴於前者可以獲取更多內容（文本，圖像+文本或僅圖像）。

使用button標籤時須要考慮兩件事情：

首先，若是按鈕的內容不夠明確（例如，在關閉按鈕中以「X」），咱們必須添加一個aria-label屬性來幫助解釋該功能。

<button aria-label="Close">X</button>

第二，若是添加一個href屬性（搜索組件或一個Lightbox庫），那麼咱們也可使用一個標籤，並用JavaScript取消連接跳轉。 若是未啓用JavaScript，則使用href標籤的圖像庫會正常地降級。

七、必要時使用roles

爲了告訴屏幕閱讀器用戶咱們的連接觸發一個動做，實際上並非一個普通的a標籤，咱們必須添加一個值爲「button」的roles屬性。

但要當心！

編寫JavaScript時，您不只須要點擊功能，還能夠在用戶按下空格鍵時調用您的功能。 這是頗有必要的，由於用於按鈕的行爲與用於連接的行爲不一樣，用戶應該可以觸發這些命令之一的操做。

<a href="img/kitten.jpg" role="button" onclick="handleBtnClick(event)" onKeyPress="handleBtnKeyPress(event)">
    Button
</a>
 
function handleBtnClick(event) {        
    // Do something
}
 
function handleBtnKeyPress(event) {
    // Check to see if space or enter were pressed
    if (event.keyCode === 32 || event.keyCode === 13) {
        // Prevent the default action to stop scrolling when space is pressed
        event.preventDefault();
        
        // Do something
 
    }
}

在MDN上能夠閱讀更多信息。

請記住，除非你改變默認規則，不然一般不須要aria角色，就像上面的例子同樣。 HTML語義元素具備已應用的默認角色：<nav>標籤的「導航」，<a> 標籤的「連接」等。 這意味着只有當咱們但願更改這些默認值時，才須要使用角色屬性。

八、關於隱藏元素

有幾種方法能夠用HTML和CSS隱藏東西。 該表將幫助您找到最適合每種狀況的替代方案：

Method	Action on View	Action on Screen Readers	Compatibility
CSS: visibility: hidden;	隱藏元素，但其仍然佔用空間（幾乎像不透明度：0;）	不可讀	支持
CSS: display: none;	從視圖及其空間中隱藏元素，流中的下一個元素將佔據它的位置。	不可讀	支持
HTML5: hidden attribute	同display: none;	不可讀	IE11+
Aria-hidden = 「true」	內容顯示在瀏覽器中，但不經過輔助技術傳達給用戶	不可讀	IE11+
CSS: .visuallyHidden class	從視圖隱藏元素，並將其從工做流中刪除	可讀	支持

若是你想隱藏元素的視圖，但仍然讓屏幕讀者知道他們，那麼最後一個選項是最好的。

這在表單標籤或跳到內容連接中很是有用。 visualHidden類是應該最須要被您放進收藏夾的CSS代碼之一，以便您在每一個項目中使用。 是的，你能夠改變名字，若是你喜歡（個人建議是.pottersCloak，等等）

.visually-hidden { 
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }

九、遵循網絡無障礙標準

Web可訪問性加強很困難，在這裏的標準和指南會有所幫助。

本文中之前的全部內容都在此引用：<button>如何工做？ 咱們何時應用它？ display：none 和「hidden」 有什麼區別？

起初它多是沉悶的，但W3C標準和WCAG指南不只可靠，並且還具備教育意義。 繼續前進，迷失在他們提供的無限信息中。 我向你保證，你會發現你永遠不知道的代碼和作法！

十、審計和審查

一旦應用了全部這些知識，如今是測試它的時候了。 如下是審覈網站可訪問性的最佳工具列表：

• ChromeVox：適用於Mac和Windows用戶，此Chrome擴展程序是可用於測試網站的屏幕閱讀器。
• Accessibility Developer Tools for Chrome：此瀏覽器的另外一個很好的擴展功能，可在您的平常開發人員工具中添加輔助功能審覈選項。
• Color Filter:使用此在線工具測試您的網站不一樣類型的色盲。
• W3C Validator: 這個官方的W3C工具將讓您知道您的HTML標記是否遵循網絡無障礙規則！
• A11Y Compliance Platform: 互聯網無障礙局（BOIA）提供了一份分級報告，概述當您的網站在考慮WCAG A / AA檢查點時的評級。
• WAVE: WebAIM製做的Web訪問評估工具。

Aerolab的Web可訪問性的經驗

咱們嘗試着不斷地測試咱們的工做。 咱們的下一個產品應該始終以前更好。 是的，咱們有時會犯錯，可是咱們努力不斷地改進和適應，更不要說每一個挑戰都會學到一些東西。

咱們但願咱們的產品可以爲用戶提供最好的體驗，這就是爲何咱們逐漸將可訪問性標準歸入咱們的工做流程。

咱們還有一條漫長的道路，還有一些重要的改進空間，可是咱們很高興選擇這條路。

最後的話

網站可訪問性並不老是易於實現，但若是您將其做爲平常工做流程的一部分（而不是最後一分鐘的清單），則實施和測試將隨着時間的推移變得更加容易。

當有疑問時，不要懼怕詢問其餘開發商或作一些研究。 我最喜歡的信息來源是A11y項目，A11y Wins，HTML5 Doctor和MDN。

關注個人公衆號，更多優質文章定時推送