如何提高網(wǎng)頁設(shè)計的可訪問性

掘金是一個高質(zhì)量的技術(shù)社區(qū)，從 CSS 到 Vue.js，性能優(yōu)化到開源類庫，讓你不錯過前端開發(fā)的每一個技術(shù)干貨。 點(diǎn)擊鏈接查看最新前端內(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)頁可訪問性似乎是一項(xiàng)艱巨的任務(wù)，但它確實(shí)比聽起來要容易很多。

這十條網(wǎng)頁可訪問性準(zhǔn)則旨在確保所有網(wǎng)站都是通用的。

這不僅能幫助屏幕閱讀器用戶，而且還能改善瀏覽體驗(yàn)，以減緩連接速度。我們已經(jīng)按照實(shí)施時間對我們的指導(dǎo)方針進(jìn)行了排序，讓您清楚地了解在這個過程中需要付出多大的努力。在你不知所措之前，請相信我的話，這是值得的。

什么是網(wǎng)頁可訪問性

根據(jù)W3C的說法，Web可訪問性意味著每個人都可以感知、理解、導(dǎo)航、與Web交互，并為Web做出貢獻(xiàn)。在這方面，網(wǎng)站的可訪問性包括所有影響網(wǎng)站訪問的條件，包括視覺、聽覺、物理、語言、認(rèn)知和神經(jīng)功能障礙。

你會在網(wǎng)上找到很多關(guān)于這個話題的內(nèi)容，如果這個話題讓你感興趣的話，你應(yīng)該更深入地了解網(wǎng)站可訪問性倡議(WAI)。

考慮到這一點(diǎn)，以下是我們提出的十條提高網(wǎng)站可訪問性的建議。

不要依靠顏色

顏色是一種強(qiáng)大的工具，我們經(jīng)常用來表達(dá)情感和在網(wǎng)上交流信息。然而，我們不應(yīng)該把所有的信息都用顏色來傳達(dá)，用來表達(dá)我們的用戶的意思和信息。

為什么?

例如，人們普遍認(rèn)為綠色意味著是正確，紅色意味著錯誤，但是當(dāng)我們把它作為我們唯一的溝通方式時，會發(fā)生什么呢?

色盲是最常見的視力缺陷之一。全球人口總數(shù)大約有4.5%的人有這方面的缺陷(這個用戶量已經(jīng)超過了IE11用戶數(shù)量)。

如果我們用戶界面中顯示的重要信息只使用顏色來傳達(dá)，那么也意味著全球?qū)⒂?.5%的人受影響。

顏色應(yīng)該只是錯誤或確認(rèn)信息的補(bǔ)充，但不能成為我們使用的唯一工具。為了確保我們的重要信息能夠觸達(dá)到所有的用戶，我們應(yīng)該要在表單中添加標(biāo)簽或圖標(biāo)來填充正確的信息。

Caniuse.com提供了一個非常有趣的解決方案，它提供了一個替代顏色調(diào)色板的兼容列表：

在設(shè)計時檢查顏色的識別力和對比是比較理想的，所以要確保你和你的設(shè)計團(tuán)隊(duì)有正確的工具。我們強(qiáng)烈推薦使用Sketch的Stark插件，可以幫助你設(shè)計可訪問性!

不要阻止放大

在響應(yīng)式設(shè)計的時代，我們可能犯了一些不負(fù)責(zé)任的錯誤。

其中maximun-scale=1.0就是幽靈之一，它讓移動設(shè)備的網(wǎng)頁無法放大。

在歐洲和亞洲，散光影響著30%~60%的成年人，但模糊的視覺會影響到所有年齡和民族的人。

放大的能力不僅僅是一個WCAG指導(dǎo)方針，而是日常生活中一個簡化的工具。所以下次你在建立一個響應(yīng)式網(wǎng)站的時候，要考慮到視力模糊的人群，比如我們的媽媽。

除了讓用戶可以自由地在移動設(shè)備上縮放之外，還要記得檢查PC端瀏覽器上高達(dá)200%的放大特性。

重新重視alt屬性

不管你制作網(wǎng)站多久，你可能會驚訝地知道下面這些關(guān)于alt屬性的建議：

alt屬性是img元素的一個強(qiáng)制性屬性，但是alt的屬性值是空的話完全有效。如果圖像是裝飾的或者沒有必要的闡述頁面的內(nèi)容，那么你可以簡單地使用alt=""

屏幕閱讀器會告訴用戶img是一個圖像，其中alt的值告訴用戶這個圖片表達(dá)的內(nèi)容

圖像的功能和它的含義一樣的重要，如果你的網(wǎng)站Logo鏈接到你的網(wǎng)站的主頁，那么

的alt的屬性值應(yīng)該是“首頁”，而不是“Logo”

圖像替換文本不僅僅是關(guān)于可訪問性的。有時候，對于網(wǎng)絡(luò)慢的用戶為了提高瀏覽器的檢驗(yàn)(更快)會禁用網(wǎng)頁的圖像。對于這些用戶群體，你就需要記得給

的alt屬性添加對應(yīng)的屬性值

但不是所有的圖片都是使用img元素，對吧?你可能會用一個兩個SVG或者一套SVG圖標(biāo)。

我們?nèi)绾巫屆總€人都能訪問SVG?幸運(yùn)的是，SVG(Scalable Vector Graphics)標(biāo)準(zhǔn)已經(jīng)覆蓋面已經(jīng)很廣!為了描述我們的SVG，我們可以使用

Longer description

給視頻添加標(biāo)題和子標(biāo)題

這可能是WCAG最麻煩的原則之一，這不是因?yàn)榧夹g(shù)上的困難，而是因?yàn)樗赡苁琴M(fèi)時的。不過有一些方法可以做到這一點(diǎn)：

讓我們以YouTube為例。一旦你在這個平臺上上傳了一個視頻，你就可以啟用關(guān)閉標(biāo)題。這些都是自動生成的，可能在某些情況下是不準(zhǔn)確的，這取決于語言、背景噪音或說話人的口音。不過，這些都很容易實(shí)現(xiàn)，而且在大多數(shù)講英語的視頻中都能很好的工作

如果我們很難看到百分百準(zhǔn)確的標(biāo)題，很難相信YouTube會有好的復(fù)制，所以我們必須自己寫標(biāo)題，或者雇傭第三方人員來做。如果我們不用任何字幕軟件，或者我們希望我們的社區(qū)幫助我們翻譯內(nèi)容，YouTube將采用最常的副標(biāo)題格式(.srt、.sub和.sbv)以及讓我們在平臺上寫副標(biāo)題。而不讓管理員訪問我們的賬號，這將是非常方便的

也許你不想把YouTube當(dāng)作你的主機(jī)平臺。也許您希望在你的服務(wù)器上使用一個HTML5視頻。HTML5有一個標(biāo)簽，可以使用它方便讓你添加你喜歡的標(biāo)題和字幕軟件，你可以使用你喜歡的WebVTT(翻譯FTW)

語義等于可訪問性

font標(biāo)簽，還記得嗎?我希望你不記得，那些是“古時代”的產(chǎn)物了。

盡管我們有著共同的信念，但語義并不是與生俱來的。自從第一個HTML頁面誕生以來，他們一直與我們在一起，自那時候已經(jīng)有了很大的進(jìn)步。有了HTML5標(biāo)準(zhǔn)之后，新的語義標(biāo)簽就被引入到我們的日常使用當(dāng)中。

那么，語義不是僅僅為了SEO嗎?

不一定。當(dāng)您有意識地在

或選擇中使用了

標(biāo)簽時，這也意味著你也故意更改元素的含義，提供了層次結(jié)構(gòu)，同時也構(gòu)建頁面信息的樹形結(jié)構(gòu)。

屏幕閱讀器并沒有忘記這一點(diǎn)。事實(shí)上，語義化是它最有用的武器之一。

請記住，擁有強(qiáng)大的能力會帶來很大的責(zé)任，所以一定要為每個元素使用合適的語義標(biāo)簽，從

到全新的標(biāo)簽。

使用正確的標(biāo)記

作為一個后續(xù)的觀點(diǎn)，我想討論一些不友好和有爭議的地方。

Time vs. Datetime

time元素顯示了日期格式、時區(qū)的很多類型和使用ISO 8601標(biāo)準(zhǔn)來表示日期和時間的時間。

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標(biāo)簽與datetime屬性結(jié)合在一起使用。

ins元素表示添加了一個文檔：

Icecream

Candy

Pasta

del元素表示刪除一個內(nèi)容：

Rewatch Harry Potter 8

Cry because ____ dies.

Write article

Order room

button vs.

對于button和標(biāo)簽，我們什么時候使用更合適呢?

我們一起來看看。

元素的意思是鏈接一個文件或打開一個新標(biāo)簽或當(dāng)前的鏈接。然而，每當(dāng)我們希望觸發(fā)一個Hamburger菜單或圖片畫廊之類的動作時，這個標(biāo)簽就有點(diǎn)不理想。button元素對于這些情況就更為比較適合，而且通?？梢杂肑avaScript實(shí)現(xiàn)。

此外，button標(biāo)簽很容易與input type="button"混淆，但他們的區(qū)別在于前者能夠獲取更多的內(nèi)容(文、圖像加文或僅圖像)。

當(dāng)使用button標(biāo)簽時，有兩件事情需要考慮：

首先，如果button的內(nèi)容不夠明確(例如，在關(guān)閉按鈕中使用X)，我們必須添加一個aria-label屬性來幫助解釋其功能。

X

其次，如果添加href屬性是意義的(比如搜索組件或lightbox gallery)，那么我們不仿使用一個a標(biāo)簽和使用JavaScript來覆蓋鏈接行為。如果沒有啟用JavaScript，使用帶有href標(biāo)記的圖像庫將優(yōu)雅地降級。

必要是使用role

為了告訴屏幕閱讀器用戶，我們的鏈接觸發(fā)了一個動作，實(shí)際上它不是一個普通的標(biāo)簽，使用標(biāo)簽時，我們必須給他添加一個role屬性。

但是要小心。

當(dāng)你編寫你的JavaScript時，你不僅需要在點(diǎn)擊時調(diào)用你的函數(shù)，還需要在用戶按下空格鍵時調(diào)用你的函數(shù)。這是必要的，因?yàn)橛糜诎粹o的行為不同于用于鏈接的行為，用戶應(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)用了默認(rèn)的role，比如nav標(biāo)記表示的是導(dǎo)航，標(biāo)簽表示的是鏈接等等。這意味著當(dāng)我們希望更改這些默認(rèn)值時，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類從視覺中隱藏元素，并從工作流中刪除它可讀到處可用(兼容性好)

如果你想隱藏元素，但仍然讓屏幕閱讀器可以知道它們，那么最后一個選項(xiàng)是最好的選擇。

這在表單的label或Skip-to-content鏈接中非常有用。visuallyHidden類是一個CSS代碼，它什么你收藏，因?yàn)槊總€項(xiàng)目都容易用到它。是的，如果你愿意，你可以改名字(我的建議是.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可訪問性標(biāo)準(zhǔn)

Web可訪問性標(biāo)準(zhǔn)和指南在這里可以給我們提供很強(qiáng)的幫助。

本文前面的所有要點(diǎn)都是button是如何工作的?我們應(yīng)該什么時候使用它?display:none和hidden屬性的區(qū)別是什么?

首先，它可能是非常枯燥的，但W3C標(biāo)準(zhǔn)和WCAG指南非常有用，它們還有非常強(qiáng)的意義。去吧，在他們當(dāng)中提供了很多可用的信息。我向你保證，你將發(fā)現(xiàn)你從未接觸的代碼和實(shí)踐!

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àn)

我們試著養(yǎng)成經(jīng)常測試的工作習(xí)慣。我們的下一個產(chǎn)品應(yīng)該總是比上一個更好。雖然我們有時候會犯錯，但我們會不斷地去改進(jìn)，更不用說從每個挑戰(zhàn)中學(xué)習(xí)一些東西了。

我們希望我們的產(chǎn)品能為用戶提供最好的體驗(yàn)，這就是為什么我們逐漸開始將可訪問性標(biāo)準(zhǔn)添加到我們的工作流程中。

我們還有很長的路要走，還有些要改進(jìn)的空間，但我們很高興選擇了這條路。

我們?yōu)閄apo所做的登錄頁面就是我們?nèi)绾谓o網(wǎng)站添加可訪問性標(biāo)準(zhǔn)的一個例子，你可以從這個例子中查到這方面的使用代碼：

總結(jié)

網(wǎng)站可訪問性并不是那么容易就能實(shí)現(xiàn)，但如果你能把它變成你日常工作的一部分(而不是最后才來檢查)，隨著時間的推移，它的實(shí)現(xiàn)和測試就會變得很容易。

本文題目：如何提高網(wǎng)頁設(shè)計的可訪問性
文章源于：http://www.muchs.cn/news15/162965.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、微信小程序、App設(shè)計、建站公司、App開發(fā)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)