這篇文章提供了十條有關於提高網頁可訪問性的指導原則，這些原則將保證提高你網站的可訪問性。
引用全球資訊網（W3C）的創始人@Tim Berners-Lee一句話來說網路的力量是它的普遍性。作為靠製作網站謀生的人，我們有責任確保每個人都能更好接觸到他們。網頁可訪問性似乎是一項艱鉅的任務，但它確實比聽起來要容易很多。
這十條網頁可訪問性準則旨在確保所有網站都是通用的。
這不僅能幫助螢幕閱讀器使用者，而且還能改善瀏覽體驗，以減緩連線速度。我們已經按照實施時間對我們的指導方針進行了排序，讓您清楚地瞭解在這個過程中需要付出多大的努力。在你不知所措之前，請相信我的話，這是值得的。
什麼是網頁可訪問性？
根據W3C的說法，Web可訪問性意味著每個人都可以感知、理解、導航、與Web互動，併為Web做出貢獻。在這方面，網站的可訪問性包括所有影響網站訪問的條件，包括視覺、聽覺、物理、語言、認知和神經功能障礙。
你會在網上找到很多關於這個話題的內容，如果這個話題讓你感興趣的話，你應該更深入地瞭解網站可訪問性倡議（WAI）。
考慮到這一點，以下是我們提出的十條提高網站可訪問性的建議。
不要依靠顏色
顏色是一種強大的工具，我們經常用來表達情感和在網上交流資訊。然而，我們不應該把所有的資訊都用顏色來傳達，用來表達我們的使用者的意思和資訊。
為什麼？
例如，人們普遍認為綠色意味著是正確，紅色意味著錯誤，但是當我們把它作為我們唯一的溝通方式時，會發生什麼呢？
色盲是最常見的視力缺陷之一。全球人口總數大約有
4.5%的人有這方面的缺陷（這個使用者量已經超過了IE11使用者數量）。
如果我們使用者介面中顯示的重要資訊只使用顏色來傳達，那麼也意味著全球將有4.5%的人受影響。
顏色應該只是錯誤或確認資訊的補充，但不能成為我們使用的唯一工具。為了確保我們的重要資訊能夠觸達到所有的使用者，我們應該要在表單中新增標籤或圖示來填充正確的資訊。
Caniuse.com提供了一個非常有趣的解決方案，它提供了一個替代顏色調色盤的相容列表：
在設計時檢查顏色的識別力和對比是比較理想的，所以要確保你和你的設計團隊有正確的工具。我們強烈推薦使用Sketch的Stark外掛，可以幫助你設計可訪問性！
不要阻止放大
在響應式設計的時代，我們可能犯了一些不負責任的錯誤。
其中maximun-scale=1.0就是幽靈之一，它讓移動裝置的網頁無法放大。
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/> |
在歐洲和亞洲，散光影響著30%~60%的成年人，但模糊的視覺會影響到所有年齡和民族的人。
放大的能力不僅僅是一個WCAG指導方針，而是日常生活中一個簡化的工具。所以下次你在建立一個響應式網站的時候，要考慮到視力模糊的人群，比如我們的媽媽。
除了讓使用者可以自由地在移動裝置上縮放之外，還要記得檢查PC端瀏覽器上高達200%的放大特性。
重新重視alt屬性
不管你製作網站多久，你可能會驚訝地知道下面這些關於alt屬性的建議：
alt屬性是img元素的一個強制性屬性，但是alt的屬性值是空的話完全有效。如果影像是裝飾的或者沒有必要的闡述頁面的內容，那麼你可以簡單地使用alt=""- 螢幕閱讀器會告訴使用者
img是一個影像，其中alt的值告訴使用者這個圖片表達的內容 - 影像的功能和它的含義一樣的重要，如果你的網站Logo連結到你的網站的主頁，那麼img
的alt的屬性值應該是“首頁”，而不是“Logo” - 影像替換文字不僅僅是關於可訪問性的。有時候，對於網路慢的使用者為了提高瀏覽器的檢驗（更快）會禁用網頁的影像。對於這些使用者群體，你就需要記得給img
的alt屬性新增對應的屬性值
但不是所有的圖片都是使用img元素，對吧？你可能會用一個兩個SVG或者一套SVG圖示。
我們如何讓每個人都能訪問SVG？幸運的是，SVG（Scalable Vector Graphics）標準已經覆蓋面已經很廣！為了描述我們的SVG，我們可以使用和元素來進行簡述和詳細的描述。
|
1 2 3 4 5 |
<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> |
給視訊新增標題和子標題
這可能是WCAG最麻煩的原則之一，這不是因為技術上的困難，而是因為它可能是費時的。不過有一些方法可以做到這一點：
- 讓我們以YouTube為例。一旦你在這個平臺上上傳了一個視訊，你就可以啟用關閉標題。這些都是自動生成的，可能在某些情況下是不準確的，這取決於語言、背景噪音或說話人的口音。不過，這些都很容易實現，而且在大多數講英語的視訊中都能很好的工作
- 如果我們很難看到百分百準確的標題，很難相信YouTube會有好的複製，所以我們必須自己寫標題，或者僱傭第三方人員來做。如果我們不用任何字幕軟體，或者我們希望我們的社群幫助我們翻譯內容，YouTube將採用最常的副標題格式（
.srt、.sub和.sbv）以及讓我們在平臺上寫副標題。而不讓管理員訪問我們的賬號，這將是非常方便的
- 也許你不想把YouTube當作你的主機平臺。也許您希望在你的伺服器上使用一個HTML5視訊。HTML5有一個
標籤，可以使用它方便讓你新增你喜歡的標題和字幕軟體，你可以使用你喜歡的WebVTT（翻譯FTW）
|
1 2 3 4 5 6 7 |
<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"/> </track> </source> </video> |
語義等於可訪問性
font標籤，還記得嗎？我希望你不記得，那些是“古時代”的產物了。
儘管我們有著共同的信念，但語義並不是與生俱來的。自從第一個HTML頁面誕生以來，他們一直與我們在一起，自那時候已經有了很大的進步。有了HTML5標準之後，新的語義標籤就被引入到我們的日常使用當中。
那麼，語義不是僅僅為了SEO嗎？
不一定。當您有意識地在<p>或<span>選擇中使用了<h1>標籤時，這也意味著你也故意更改元素的含義，提供了層次結構，同時也構建頁面資訊的樹形結構。
螢幕閱讀器並沒有忘記這一點。事實上，語義化是它最有用的武器之一
請記住，擁有強大的能力會帶來很大的責任，所以一定要為每個元素使用合適的語義標籤，從h1到全新main的標籤。
使用正確的標記
作為一個後續的觀點，我想討論一些不友好和有爭議的地方。
Time vs. Datetime
time元素顯示了日期格式、時區的很多型別和使用ISO 8601標準來表示日期和時間的時間。
datetime是一個可選屬性，可以幫助表示time的內容。讓我們看看一些例子：
|
1 2 3 4 5 |
<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 和 ins
Web不斷變化，但沒有必要讓這些變化被忽視。我們可以將ins和del這樣的HTML標籤與datetime屬性結合在一起使用。
ins元素表示新增了一個文件：
|
1 2 3 4 5 |
<ul> <li><ins datetime="2017-08-02">Icecream</ins></li> <li>Candy</li> <li>Pasta</li> </ul> |
del元素表示刪除一個內容：
|
1 2 3 4 5 6 |
<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>
對於button和<a>標籤，我們什麼時候使用更合適呢？
我們一起來看看。
<a>元素的意思是連結一個檔案或開啟一個新標籤或當前的連結。然而，每當我們希望觸發一個Hamburger選單或圖片畫廊之類的動作時，這個標籤就有點不理想。button元素對於這些情況就更為比較適合，而且通常可以用JavaScript實現。
此外，button標籤很容易與input type="button"混淆，但他們的區別在於前者能夠獲取更多的內容（文、影像加文或僅影像）。
當使用button標籤時，有兩件事情需要考慮：
首先，如果button的內容不夠明確（例如，在關閉按鈕中使用X），我們必須新增一個aria-label屬性來幫助解釋其功能。
|
1 |
<button aria-label="Close">X</button> |
其次，如果新增href屬性是意義的（比如搜尋元件或lightbox gallery），那麼我們不仿使用一個a標籤和使用JavaScript來覆蓋連結行為。如果沒有啟用JavaScript，使用帶有href標記的影像庫將優雅地降級。
必要時使用role
為了告訴螢幕閱讀器使用者，我們的連結觸發了一個動作，實際上它不是一個普通的<a>標籤，使用標籤時，我們必須給他新增一個role屬性。
但是要小心。
當你編寫你的JavaScript時，你不僅需要在點選時呼叫你的函式，還需要在使用者按下空格鍵時呼叫你的函式。這是必要的，因為用於按鈕的行為不同於用於連結的行為，使用者應該能夠觸發這些命令中的任何一個操作。
|
1 2 3 4 5 6 7 8 9 10 |
<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 role規則，比如上面的示例。HTML語義元素已經應用了預設的role，比如nav標記表示的是導航，標籤表示的是連結等等。這意味著當我們希望更改這些預設值時，role屬性只是必需的。
隱藏元素
使用HTML和CSS有一些方法可以隱藏東西。下面的列表將幫助你找到每一種情況的最佳選擇：
| 方法 | 行為 | 螢幕閱讀器行為 | 相容性 |
|---|---|---|---|
CSS: visibility:hidden; |
從視覺中隱藏元素，但其原始空間仍然被佔用（很像opacity:0） |
不可讀 | 到處可用（相容性好） |
CSS: display:none; |
從視覺中隱藏元素，它的原始空間丟失，下一個元素將取代它的位置 | 不可讀 | 到處可用（相容性好） |
HTML5: hidden屬性 |
類似於display: none; |
不可讀 | IE11+ |
aria-hidden = "true" |
內容會顯示在瀏覽器中，但通過技術不會傳遞給使用者 | 不可讀 | IE11+ |
CSS: .visuallyHidden類 |
從視覺中隱藏元素，並從工作流中刪除它 | 可讀 | 到處可用（相容性好） |
如果你想隱藏元素，但仍然讓螢幕閱讀器可以知道它們，那麼最後一個選項是最好的選擇。
這在表單的label或Skip-to-content連結中非常有用。visuallyHidden類是一個CSS程式碼，它什麼你收藏，因為每個專案都容易用到它。是的，如果你願意，你可以改名字（我的建議是.pottersCloak）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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可訪問性標準
Web可訪問性標準和指南在這裡可以給我們提供很強的幫助。
本文前面的所有要點都是button是如何工作的？我們應該什麼時候使用它？display:none和hidden屬性的區別是什麼？
首先，它可能是非常枯燥的，但W3C標準和WCAG指南非常有用，它們還有非常強的意義。去吧，在他們當中提供了很多可用的資訊。我向你保證，你將發現你從未接觸的程式碼和實踐！
Audit and review
一旦你應用到了所有這方面的知識，那就到了測試它的時候了。以下提供了一些工具測試你的網站可訪問性：
- ChromeVox
- Accessibility Developer Tools for Chrome
- Color Filter
- W3C Validator
- A11Y Compliance Platform
- WAVE
Aerolab的可訪問性經驗
我們試著養成經常測試的工作習慣。我們的下一個產品應該總是比上一個更好。雖然我們有時候會犯錯，但我們會不斷地去改進，更不用說從每個挑戰中學習一些東西了。
我們希望我們的產品能為使用者提供最好的體驗，這就是為什麼我們逐漸開始將可訪問性標準新增到我們的工作流程中。
我們還有很長的路要走，還有些要改進的空間，但我們很高興選擇了這條路。
我們為Xapo所做的登入頁面就是我們如何給網站新增可訪問性標準的一個例子，你可以從這個例子中查到這方面的使用程式碼：
總結
網站可訪問性並不是那麼容易就能實現，但如果你能把它變成你日常工作的一部分（而不是最後才來檢查），隨著時間的推移，它的實現和測試就會變得很容易。
當有疑問時，不要害怕詢問其他的開發人員或者做一些這方面的研究。我最喜歡從這些渠道獲取一些有用的資訊：
另外，如果你有更多更好的資源，請在下面的評論中告訴我們。
本文根據@Aerolab的《10 guidelines to improve your web accessibility》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處:https://aerolab.co/blog/web-accessibility/。