掘金是一個高質(zhì)量的技術(shù)社區(qū)，從 CSS 到 Vue.js，性能優(yōu)化到開源類庫，讓你不錯過前端開發(fā)的每一個技術(shù)干貨。 點擊鏈接查看最新前端內(nèi)容，或到各大應(yīng)用市場搜索「 掘金」下載APP，技術(shù)干貨盡在掌握中。
這篇文章提供了十條有關(guān)于提高網(wǎng)頁可訪問性的指導(dǎo)原則，這些原則將保證提高你網(wǎng)站的可訪問性。
引用萬維網(wǎng)(W3C)的創(chuàng)始人@Tim Berners-Lee一句話來說網(wǎng)絡(luò)的力量是它的普遍性。作為靠制作網(wǎng)站謀生的人，我們有責(zé)任確保每個人都能更好接觸到他們。網(wǎng)頁可訪問性似乎是一項艱巨的任務(wù)，但它確實比聽起來要容易很多。
這十條網(wǎng)頁可訪問性準則旨在確保所有網(wǎng)站都是通用的。
這不僅能幫助屏幕閱讀器用戶，而且還能改善瀏覽體驗，以減緩連接速度。我們已經(jīng)按照實施時間對我們的指導(dǎo)方針進行了排序，讓您清楚地了解在這個過程中需要付出多大的努力。在你不知所措之前，請相信我的話，這是值得的。
根據(jù)W3C的說法，Web可訪問性意味著每個人都可以感知、理解、導(dǎo)航、與Web交互，并為Web做出貢獻。在這方面，網(wǎng)站的可訪問性包括所有影響網(wǎng)站訪問的條件，包括視覺、聽覺、物理、語言、認知和神經(jīng)功能障礙。
你會在網(wǎng)上找到很多關(guān)于這個話題的內(nèi)容，如果這個話題讓你感興趣的話，你應(yīng)該更深入地了解網(wǎng)站可訪問性倡議(WAI)。
考慮到這一點，以下是我們提出的十條提高網(wǎng)站可訪問性的建議。
顏色是一種強大的工具，我們經(jīng)常用來表達情感和在網(wǎng)上交流信息。然而，我們不應(yīng)該把所有的信息都用顏色來傳達，用來表達我們的用戶的意思和信息。
為什么?
例如，人們普遍認為綠色意味著是正確，紅色意味著錯誤，但是當(dāng)我們把它作為我們唯一的溝通方式時，會發(fā)生什么呢?
色盲是最常見的視力缺陷之一。全球人口總數(shù)大約有4.5%的人有這方面的缺陷(這個用戶量已經(jīng)超過了IE11用戶數(shù)量)。
如果我們用戶界面中顯示的重要信息只使用顏色來傳達，那么也意味著全球?qū)⒂?.5%的人受影響。
顏色應(yīng)該只是錯誤或確認信息的補充，但不能成為我們使用的唯一工具。為了確保我們的重要信息能夠觸達到所有的用戶，我們應(yīng)該要在表單中添加標簽或圖標來填充正確的信息。
Caniuse.com提供了一個非常有趣的解決方案，它提供了一個替代顏色調(diào)色板的兼容列表：
在設(shè)計時檢查顏色的識別力和對比是比較理想的，所以要確保你和你的設(shè)計團隊有正確的工具。我們強烈推薦使用Sketch的Stark插件，可以幫助你設(shè)計可訪問性!
在響應(yīng)式設(shè)計的時代，我們可能犯了一些不負責(zé)任的錯誤。
其中maximun-scale=1.0就是幽靈之一，它讓移動設(shè)備的網(wǎng)頁無法放大。
在歐洲和亞洲，散光影響著30%~60%的成年人，但模糊的視覺會影響到所有年齡和民族的人。
放大的能力不僅僅是一個WCAG指導(dǎo)方針，而是日常生活中一個簡化的工具。所以下次你在建立一個響應(yīng)式網(wǎng)站的時候，要考慮到視力模糊的人群，比如我們的媽媽。
除了讓用戶可以自由地在移動設(shè)備上縮放之外，還要記得檢查PC端瀏覽器上高達200%的放大特性。
重新重視alt屬性
不管你制作網(wǎng)站多久，你可能會驚訝地知道下面這些關(guān)于alt屬性的建議：
alt屬性是img元素的一個強制性屬性，但是alt的屬性值是空的話完全有效。如果圖像是裝飾的或者沒有必要的闡述頁面的內(nèi)容，那么你可以簡單地使用alt=""
屏幕閱讀器會告訴用戶img是一個圖像，其中alt的值告訴用戶這個圖片表達的內(nèi)容
圖像的功能和它的含義一樣的重要，如果你的網(wǎng)站Logo鏈接到你的網(wǎng)站的主頁，那么
的alt的屬性值應(yīng)該是“首頁”，而不是“Logo”
圖像替換文本不僅僅是關(guān)于可訪問性的。有時候，對于網(wǎng)絡(luò)慢的用戶為了提高瀏覽器的檢驗(更快)會禁用網(wǎng)頁的圖像。對于這些用戶群體，你就需要記得給
的alt屬性添加對應(yīng)的屬性值
但不是所有的圖片都是使用img元素，對吧?你可能會用一個兩個SVG或者一套SVG圖標。
我們?nèi)绾巫屆總€人都能訪問SVG?幸運的是，SVG(Scalable Vector Graphics)標準已經(jīng)覆蓋面已經(jīng)很廣!為了描述我們的SVG，我們可以使用
Longer description
這可能是WCAG最麻煩的原則之一，這不是因為技術(shù)上的困難，而是因為它可能是費時的。不過有一些方法可以做到這一點：
讓我們以YouTube為例。一旦你在這個平臺上上傳了一個視頻，你就可以啟用關(guān)閉標題。這些都是自動生成的，可能在某些情況下是不準確的，這取決于語言、背景噪音或說話人的口音。不過，這些都很容易實現(xiàn)，而且在大多數(shù)講英語的視頻中都能很好的工作
如果我們很難看到百分百準確的標題，很難相信YouTube會有好的復(fù)制，所以我們必須自己寫標題，或者雇傭第三方人員來做。如果我們不用任何字幕軟件，或者我們希望我們的社區(qū)幫助我們翻譯內(nèi)容，YouTube將采用最常的副標題格式(.srt、.sub和.sbv)以及讓我們在平臺上寫副標題。而不讓管理員訪問我們的賬號，這將是非常方便的
也許你不想把YouTube當(dāng)作你的主機平臺。也許您希望在你的服務(wù)器上使用一個HTML5視頻。HTML5有一個標簽，可以使用它方便讓你添加你喜歡的標題和字幕軟件，你可以使用你喜歡的WebVTT(翻譯FTW)
font標簽，還記得嗎?我希望你不記得，那些是“古時代”的產(chǎn)物了。
盡管我們有著共同的信念，但語義并不是與生俱來的。自從第一個HTML頁面誕生以來，他們一直與我們在一起，自那時候已經(jīng)有了很大的進步。有了HTML5標準之后，新的語義標簽就被引入到我們的日常使用當(dāng)中。
那么，語義不是僅僅為了SEO嗎?
不一定。當(dāng)您有意識地在
或選擇中使用了
標簽時，這也意味著你也故意更改元素的含義，提供了層次結(jié)構(gòu)，同時也構(gòu)建頁面信息的樹形結(jié)構(gòu)。
屏幕閱讀器并沒有忘記這一點。事實上，語義化是它最有用的武器之一。
請記住，擁有強大的能力會帶來很大的責(zé)任，所以一定要為每個元素使用合適的語義標簽，從
到全新的標簽。
作為一個后續(xù)的觀點，我想討論一些不友好和有爭議的地方。
Time vs. Datetime
time元素顯示了日期格式、時區(qū)的很多類型和使用ISO 8601標準來表示日期和時間的時間。
datetime是一個可選屬性，可以幫助表示的內(nèi)容。讓我們看看一些例子：
14:54 Hours and minutes
2018-06 Year and month
-03:00 Time zones
2h 32m Harry Potter 2 Duration
CSSConf Argentina took place on August 7th
del 和 ins
Web不斷變化，但沒有必要讓這些變化被忽視。我們可以將ins和del這樣的HTML標簽與datetime屬性結(jié)合在一起使用。
ins元素表示添加了一個文檔：
Icecream
Candy
Pasta
del元素表示刪除一個內(nèi)容：
Rewatch Harry Potter 8
Cry because ____ dies.
Write article
Order room
button vs.
對于button和標簽，我們什么時候使用更合適呢?
我們一起來看看。
元素的意思是鏈接一個文件或打開一個新標簽或當(dāng)前的鏈接。然而，每當(dāng)我們希望觸發(fā)一個Hamburger菜單或圖片畫廊之類的動作時，這個標簽就有點不理想。button元素對于這些情況就更為比較適合，而且通常可以用JavaScript實現(xiàn)。
此外，button標簽很容易與input type="button"混淆，但他們的區(qū)別在于前者能夠獲取更多的內(nèi)容(文、圖像加文或僅圖像)。
當(dāng)使用button標簽時，有兩件事情需要考慮：
首先，如果button的內(nèi)容不夠明確(例如，在關(guān)閉按鈕中使用X)，我們必須添加一個aria-label屬性來幫助解釋其功能。
X
其次，如果添加href屬性是意義的(比如搜索組件或lightbox gallery)，那么我們不仿使用一個a標簽和使用JavaScript來覆蓋鏈接行為。如果沒有啟用JavaScript，使用帶有href標記的圖像庫將優(yōu)雅地降級。
為了告訴屏幕閱讀器用戶，我們的鏈接觸發(fā)了一個動作，實際上它不是一個普通的標簽，使用標簽時，我們必須給他添加一個role屬性。
但是要小心。
當(dāng)你編寫你的JavaScript時，你不僅需要在點擊時調(diào)用你的函數(shù)，還需要在用戶按下空格鍵時調(diào)用你的函數(shù)。這是必要的，因為用于按鈕的行為不同于用于鏈接的行為，用戶應(yīng)該能夠觸發(fā)這些命令中的任何一個操作。
Button
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
}
}
有關(guān)于這方面更多的信息可以在MDN上了解。
記住，除非你打破規(guī)則，否則通常不需要aria role規(guī)則，比如上面的示例。HTML語義元素已經(jīng)應(yīng)用了默認的role，比如nav標記表示的是導(dǎo)航，標簽表示的是鏈接等等。這意味著當(dāng)我們希望更改這些默認值時，role屬性只是必需的。
使用HTML和CSS有一些方法可以隱藏東西。下面的列表將幫助你找到每一種情況的最佳選擇：
方法行為屏幕閱讀器行為兼容性
CSS: visibility:hidden;從視覺中隱藏元素，但其原始空間仍然被占用(很像opacity:0)不可讀到處可用(兼容性好)
CSS: display:none;從視覺中隱藏元素，它的原始空間丟失，下一個元素將取代它的位置不可讀到處可用(兼容性好)
HTML5: hidden屬性類似于display: none;不可讀IE11+
aria-hidden = "true"內(nèi)容會顯示在瀏覽器中，但通過技術(shù)不會傳遞給用戶不可讀IE11+
CSS: .visuallyHidden類從視覺中隱藏元素，并從工作流中刪除它可讀到處可用(兼容性好)
如果你想隱藏元素，但仍然讓屏幕閱讀器可以知道它們，那么最后一個選項是最好的選擇。
這在表單的label或Skip-to-content鏈接中非常有用。visuallyHidden類是一個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是如何工作的?我們應(yīng)該什么時候使用它?display:none和hidden屬性的區(qū)別是什么?
首先，它可能是非?？菰锏?，但W3C標準和WCAG指南非常有用，它們還有非常強的意義。去吧，在他們當(dāng)中提供了很多可用的信息。我向你保證，你將發(fā)現(xiàn)你從未接觸的代碼和實踐!
Audit and review
一旦你應(yīng)用到了所有這方面的知識，那就到了測試它的時候了。以下提供了一些工具測試你的網(wǎng)站可訪問性：
ChromeVox
Accessibility Developer Tools for Chrome
Color Filter
W3C Validator
A11Y Compliance Platform
WAVE
Aerolab的可訪問性經(jīng)驗
我們試著養(yǎng)成經(jīng)常測試的工作習(xí)慣。我們的下一個產(chǎn)品應(yīng)該總是比上一個更好。雖然我們有時候會犯錯，但我們會不斷地去改進，更不用說從每個挑戰(zhàn)中學(xué)習(xí)一些東西了。
我們希望我們的產(chǎn)品能為用戶提供最好的體驗，這就是為什么我們逐漸開始將可訪問性標準添加到我們的工作流程中。
我們還有很長的路要走，還有些要改進的空間，但我們很高興選擇了這條路。
我們?yōu)閄apo所做的登錄頁面就是我們?nèi)绾谓o網(wǎng)站添加可訪問性標準的一個例子，你可以從這個例子中查到這方面的使用代碼：
網(wǎng)站可訪問性并不是那么容易就能實現(xiàn)，但如果你能把它變成你日常工作的一部分(而不是最后才來檢查)，隨著時間的推移，它的實現(xiàn)和測試就會變得很容易。
以上就是類似于提示用戶有錯誤的網(wǎng)頁設(shè)計方法的內(nèi)容，如果想要了解關(guān)于手機建站知識及自媒體營銷公司，可直接點擊查看
