現(xiàn)在，互聯(lián)網(wǎng)對(duì)人們生活的影響在不斷加大，網(wǎng)絡(luò)的出現(xiàn)也確實(shí)為我們的生活帶來(lái)了許多便利條件，然而，像老人或殘障人士等這部分人群卻有時(shí)會(huì)被互聯(lián)網(wǎng)“拒之門外”，而這說(shuō)明了無(wú)障礙設(shè)計(jì)的重要性和必要性。本篇文章里，作者就對(duì)網(wǎng)站如何做無(wú)障礙、適老化設(shè)計(jì)進(jìn)行了總結(jié)，一起來(lái)看。

前言

我國(guó) 60歲及以上的老年人有2.6億，據(jù)第二次全國(guó)殘疾人抽樣調(diào)查數(shù)據(jù)推算，全國(guó)各類殘疾人總數(shù)為8296萬(wàn)人?？吹竭@組數(shù)字，大家有什么想法？

我們買菜購(gòu)物看病幾乎都是在網(wǎng)上操作，確實(shí)網(wǎng)絡(luò)給我們帶來(lái)很多便利的條件，但同時(shí)還有部分群體（老人和殘障人士）他們使用網(wǎng)絡(luò)的方式和我們不一樣，如果都按照統(tǒng)一標(biāo)準(zhǔn)來(lái)設(shè)計(jì)，那他們就是被拒之門外的用戶群體。在設(shè)計(jì)中考慮到這部分群體，讓每個(gè)人都可以公平的享受到互聯(lián)網(wǎng)的便利，這就是無(wú)障礙的意義。

一、了解網(wǎng)站無(wú)障礙

1. 網(wǎng)站無(wú)障礙含義

在我們?nèi)粘Ｉ钪杏泻芏嚓P(guān)于無(wú)障礙的標(biāo)識(shí)，例如地鐵這樣的公共設(shè)施中一定會(huì)有無(wú)障礙通道，電梯里有無(wú)障礙電梯，還有路邊人行道斜坡，都是為了有行動(dòng)障礙人士設(shè)計(jì)的，這些都是生活中的無(wú)障礙設(shè)計(jì)。

現(xiàn)在，我們進(jìn)入了互聯(lián)網(wǎng)時(shí)代，網(wǎng)絡(luò)對(duì)許多人來(lái)說(shuō)是日常生活中的重要組成部分，但是對(duì)于殘障群體和老年群體他們很難跟我們一樣正常的使用網(wǎng)站，在網(wǎng)絡(luò)中他們會(huì)遇到很多困難，在這個(gè)信息化的時(shí)代，給我們帶來(lái)的是便利，可對(duì)于他們來(lái)說(shuō)是層層障礙。

實(shí)現(xiàn)網(wǎng)站無(wú)障礙是指無(wú)論你是殘疾人、老年人、還是健全人都可以正常的使用網(wǎng)絡(luò)，為了做到這一點(diǎn)，就要實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容無(wú)障礙以及上網(wǎng)使用的輔助軟件技術(shù)的無(wú)障礙。

2. 老年人的網(wǎng)絡(luò)障礙

隨著人的壽命越來(lái)越長(zhǎng)，老年人使用網(wǎng)站的次數(shù)也越來(lái)越多，為老年用戶提供良好的服務(wù)成為了一個(gè)重要的社會(huì)因素。許多老年人的障礙與年齡相關(guān)，這些障礙會(huì)影響他們使用網(wǎng)絡(luò)。

老人的網(wǎng)絡(luò)障礙有以下四點(diǎn)：

1. 視覺障礙 – 包括對(duì)顏色感知能力、視覺搜索能力下降，使閱讀網(wǎng)頁(yè)變得困難。
2. 行動(dòng)障礙 – 包括靈巧度和精細(xì)運(yùn)動(dòng)控制能力下降，使其難以使用鼠標(biāo)和點(diǎn)擊小目標(biāo)。
3. 聽覺障礙 – 包括難以聽到較高音調(diào)的聲音和分離聲音，從而難以聽到播客和其他音頻，尤其是在有背景音樂(lè)的情況下。
4. 認(rèn)知障礙 – 包括短期記憶減少、難以集中注意力和容易分心，從而難以遵循導(dǎo)航和完成在線任務(wù)。

3. 殘障人士的網(wǎng)絡(luò)障礙

許多人可能跟我有一樣的疑惑，殘障人士是怎么使用電腦的呢？有肢體障礙的人，無(wú)法直接用手指敲鍵盤，可配合頭控桿、口含棒等來(lái)操作鍵盤；有聽覺障礙的人聽不到聲音是通過(guò)字幕來(lái)獲取信息的，有視覺障礙的人，需要使用屏幕閱讀器朗讀屏幕上內(nèi)容來(lái)獲取信息。這些都是他們使用電腦以及網(wǎng)絡(luò)的方式。

所以，當(dāng)開發(fā)人員需要鼠標(biāo)交互來(lái)使用網(wǎng)站時(shí)，不能使用鼠標(biāo)的人可能會(huì)遇到很大的困難；并且當(dāng)開發(fā)人員不為重要圖像添加替代文本時(shí)，盲人無(wú)法從圖像中獲取信息。

殘障人士的網(wǎng)絡(luò)障礙有以下六點(diǎn)：

1. 聽覺障礙：聽不到聲音，以及難以聽到較高的聲音。
2. 認(rèn)知障礙：智力障礙、自閉癥、學(xué)習(xí)障礙、記憶障礙。
3. 神經(jīng)損傷：多動(dòng)癥、神經(jīng)多樣性、癲癇癥。
4. 肢體障礙：截肢、關(guān)節(jié)炎、重復(fù)性壓力損傷、靈活性降低、痙攣、四肢癱瘓等。
5. 語(yǔ)言障礙：言語(yǔ)失用癥、口吃、語(yǔ)音障礙、無(wú)法說(shuō)話。
6. 視覺障礙：有眼部疾病或者全盲，色盲（難以區(qū)分顏色，例如紅色和綠色，或黃色和藍(lán)色）低視力人群（視力不佳、只能看到視野的中間、只能看到視野的邊緣和模糊的視野）。

4. 健全人的網(wǎng)絡(luò)障礙

無(wú)障礙設(shè)計(jì)不只對(duì)殘障人士有好處，對(duì)每個(gè)人都有好處，我們健全人在一些情境下也會(huì)出現(xiàn)情境障礙，例如你的近視鏡丟失了，導(dǎo)致不能看清楚身邊的事物，在地鐵嘈雜的環(huán)境下不能聽到語(yǔ)音信息，或者在開車的時(shí)候想找播放音樂(lè)又挪不開手，這些都是情境性殘疾（situational disability）或暫時(shí)性殘疾（temporary disability）。

所以在某些情況下我們也會(huì)遇到跟殘障人士一樣的困難，我們也可以通過(guò)無(wú)障礙設(shè)計(jì)獲得更好的體驗(yàn)。

• 有“暫時(shí)性殘疾”的人，如手臂骨折或眼鏡丟失。
• 有“情境限制”的人，例如在明亮的陽(yáng)光下看不清文字或在嘈雜的環(huán)境下聽不到聲音。

5. 網(wǎng)站無(wú)障礙=適老化嗎？

無(wú)障礙設(shè)計(jì)是讓所有人都可以平等的獲取信息利用信息，其中包含老年用戶。

舉個(gè)例子，網(wǎng)站的讀屏功能是為了盲人用戶設(shè)計(jì)的，通過(guò)鼠標(biāo)懸浮的位置讀出對(duì)應(yīng)的內(nèi)容，讀屏軟件就是他們的眼睛，那老年用戶也屬于視覺障礙人群，他們也可以使用讀屏功能來(lái)獲取信息，所以無(wú)障礙設(shè)計(jì)的改造就是讓老年用戶，殘障人士以及所有人都能使用的設(shè)計(jì)方式。

其實(shí)殘障人士和正常人是一樣的，只是參與這個(gè)世界的交互方式不一樣而已，盲人也可以寫代碼，也可以剪輯視頻，可以自由出行，聽力障礙人群也可以去聽音樂(lè)節(jié)，肢體障礙人群也可以操作手機(jī)，這些都是無(wú)障礙設(shè)計(jì)的結(jié)果，也是之后我們?cè)O(shè)計(jì)師要去努力的方向。

二、網(wǎng)站無(wú)障礙改造標(biāo)準(zhǔn)

做好無(wú)障礙設(shè)計(jì)首先要考慮到不同用戶的需求，在整個(gè)設(shè)計(jì)過(guò)程中可以提出一組問(wèn)題來(lái)問(wèn)自己，做的這個(gè)設(shè)計(jì)是否能滿足盲人用戶需求，是否能滿足肢體障礙者的需求，是否能滿足老人的需求，是否能滿足聽障人士需求等等，通過(guò)這些問(wèn)題，你將更加包容用戶的需求，從而為所有人設(shè)計(jì)更易于訪問(wèn)的用戶體驗(yàn)。

根據(jù)萬(wàn)維網(wǎng)的網(wǎng)頁(yè)無(wú)障礙設(shè)計(jì)準(zhǔn)則，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，請(qǐng)注意要滿足以下幾點(diǎn)：

• 在前景和背景之間有足夠的對(duì)比度；
• 不要單獨(dú)使用顏色來(lái)傳達(dá)信息；
• 確保交互元素易于識(shí)別；
• 提供清晰一致的導(dǎo)航選項(xiàng)；
• 確保表單元素都有明確的標(biāo)簽；
• 提供清晰一致的導(dǎo)航選項(xiàng)；
• 使用標(biāo)題和間距對(duì)相關(guān)內(nèi)容進(jìn)行分組；
• 為不同的屏幕尺寸創(chuàng)建設(shè)計(jì)；
• 設(shè)計(jì)中包含圖像和媒體替代方案；
• 為自動(dòng)啟動(dòng)的內(nèi)容提供控件。

1. 在前景和背景之間有足夠的對(duì)比度

我們做設(shè)計(jì)時(shí)，很容易假設(shè)用戶和我們一樣可以感知顏色或閱讀文本，可事實(shí)并非如此，對(duì)于有視覺障礙用戶來(lái)說(shuō)就很難分辯顏色，這通常歸結(jié)于顏色對(duì)比度，即前景色和背景色之間的關(guān)系。當(dāng)兩種顏色相似時(shí)，對(duì)比度低，當(dāng)兩種顏色差距大時(shí)，對(duì)比度高。

那對(duì)比度究竟多少合適呢？根據(jù)是WebAIM準(zhǔn)則建議所有文本的AA（最低）對(duì)比度為4.5:1。另外非常大的文本（例如大標(biāo)題），其對(duì)比度可以降至3:1。大家可以看下不同對(duì)比度之間的差異，對(duì)比度越低就越看不清文字內(nèi)容。

如何檢查自己設(shè)計(jì)圖上的顏色對(duì)比度？推薦檢查對(duì)比的網(wǎng)站Colorable，只要輸入前景和背景的色值就可以看到顏色對(duì)比度。

雖然有些人需要高對(duì)比度，但也有部分人-包括有一些閱讀障礙的人對(duì)于高亮度的顏色是不可讀的，他們需要低對(duì)比度，所以網(wǎng)絡(luò)瀏覽器應(yīng)該允許用戶自己改變文本和背景的顏色。

2. 不要單獨(dú)使用顏色來(lái)傳達(dá)信息

雖然顏色對(duì)于傳達(dá)信息很有用，但顏色不應(yīng)該是傳達(dá)信息的唯一方式。在使用顏色區(qū)分元素時(shí)，還要提供不依賴于顏色的附加標(biāo)識(shí)。

例如，在輸入密碼無(wú)效時(shí)，設(shè)計(jì)上只用帶有紅色的框和圖標(biāo)表示無(wú)效，對(duì)于有顏色缺陷的用戶或者使用屏幕閱讀器的用戶來(lái)說(shuō)，并不能很好的獲取到信息，甚至可能接收不到信息，我們應(yīng)該為用戶提供多種途徑來(lái)獲取關(guān)鍵信息?？梢杂妙伾由险f(shuō)明文字的方式，這樣看不到顏色的用戶也可以通過(guò)文字里來(lái)獲取信息。

3. 確保交互元素易于識(shí)別

確保網(wǎng)站中的交互元素易于識(shí)別要做到兩點(diǎn)：1、視覺焦點(diǎn)狀態(tài)可見，2、交互元素的樣式和命名保持一致

1）視覺焦點(diǎn)狀態(tài)可見

什么是視覺焦點(diǎn)狀態(tài)？可以理解為用戶當(dāng)前所在的位置要給一個(gè)突出明顯的UI視覺樣式，讓用戶明確知道自己當(dāng)前的位置。

有部分用戶視力正常，但是可能運(yùn)動(dòng)控制力受限，因此只能使用鍵盤或者是轉(zhuǎn)換器來(lái)使用電腦和網(wǎng)站應(yīng)用程序，這樣的人被稱作視力正常的鍵盤用戶。

視力正常的鼠標(biāo)用戶可以把光標(biāo)移動(dòng)到他們想點(diǎn)擊的按鈕上，而鍵盤用戶可以使用Tab和箭頭鍵的組合來(lái)移動(dòng)到同一個(gè)按鈕上。因此鍵盤用戶在操作電腦時(shí)，我們要顯示出鍵盤焦點(diǎn)的當(dāng)前狀態(tài)，這樣用戶始終知道它在哪個(gè)位置，才能繼續(xù)操作，這點(diǎn)非常重要。下面是谷歌瀏覽器用鍵盤操作時(shí)會(huì)用藍(lán)色的框UI樣式來(lái)體現(xiàn)當(dāng)前的位置。確保所有鼠標(biāo)可操作的組件都可以通過(guò)鍵盤訪問(wèn)。

2）交互元素的樣式和命名保持一致

相同功能的組件可以復(fù)用，樣式上保持統(tǒng)一，我們?cè)O(shè)計(jì)網(wǎng)站時(shí)命名也要規(guī)范，相同的功能命名保持一致，例如網(wǎng)頁(yè)中的提交搜索按鈕和另一個(gè)網(wǎng)頁(yè)中的查找按鈕，同樣的功能，命名要保持一致。這樣對(duì)于有認(rèn)知障礙的人，可以降低理解成本。

4. 提供清晰一致的導(dǎo)航選項(xiàng)

網(wǎng)站中導(dǎo)航的作用是對(duì)信息進(jìn)行分類，告訴用戶這里有什么，當(dāng)前的位置在哪，可以到哪里去，讓用戶可以更高效、準(zhǔn)確的在各個(gè)模塊之間完成操作。不一致的導(dǎo)航設(shè)計(jì)會(huì)給所有用戶帶來(lái)困難和挫敗感，尤其是本來(lái)就對(duì)電腦操作就不是很有信心的老年人以及殘障人士。

我們要做的是確保網(wǎng)站的所有頁(yè)面上的導(dǎo)航都具有一致的命名、樣式和定位。幫助用戶了解他們?cè)诰W(wǎng)站或頁(yè)面中的位置。

5. 確保表單元素都有明確的標(biāo)簽

任何需要填寫的字段或表單元素旁邊都應(yīng)該有描述性標(biāo)簽。在從左到右的語(yǔ)言中，標(biāo)簽將位于字段的左側(cè)或上方，而單選按鈕或復(fù)選框位于右側(cè)。標(biāo)簽和字段之間不應(yīng)有過(guò)多的空間，這樣有助于所有用戶，尤其是那些有學(xué)習(xí)障礙的用戶可以正確輸入信息。

6. 提供易于識(shí)別的反饋

• 在文本中提供有關(guān)輸入錯(cuò)誤的信息可以讓盲人或色盲用戶感知發(fā)生錯(cuò)誤的事實(shí)。
• 可以朗讀出圖標(biāo)和其他視覺提示所代表的含義。

例如在用戶填寫表單信息時(shí)，內(nèi)容填錯(cuò)了或者未填寫，要給出明確的錯(cuò)誤提示，并指出哪里填錯(cuò)了，可以使用圖標(biāo)，顏色等來(lái)突出展示。

7. 使用標(biāo)題和間距對(duì)相關(guān)內(nèi)容進(jìn)行分組

網(wǎng)站中不同的模塊會(huì)有對(duì)應(yīng)不同的標(biāo)題，每一個(gè)標(biāo)題之間都應(yīng)該留有足夠的間距，使用空白和鄰近使內(nèi)容之間的關(guān)系更加明顯。樣式標(biāo)題以對(duì)內(nèi)容進(jìn)行分組、減少混亂并使其更易于瀏覽和理解。

這樣做的目的是幫助用戶了解網(wǎng)頁(yè)中包含哪些信息以及這些數(shù)據(jù)是如何組織的。當(dāng)標(biāo)題清晰且具有描述性時(shí)，個(gè)人可以很容易地找到他們正在尋找的信息，然后可以更容易地理解內(nèi)容部分之間的關(guān)系。

8. 為不同的屏幕尺寸創(chuàng)建設(shè)計(jì)

考慮如何在不同大小的屏幕中呈現(xiàn)頁(yè)面信息，例如手機(jī)或縮放的瀏覽器窗口?？梢愿闹饕氐奈恢煤捅硎荆鐦?biāo)題和導(dǎo)航，以充分利用空間。確保設(shè)置文本大小和線寬以最大限度地提高可讀性和易讀性。

9. 設(shè)計(jì)中包含圖像和媒體替代方案

這部分可訪問(wèn)性的目的是確保非文本的信息可通過(guò)文本替代訪問(wèn)，可以通過(guò)任何符合用戶需求的感官方式（如觸覺、聽覺或視覺）來(lái)呈現(xiàn)它們。當(dāng)提供替代文本時(shí)，信息可以以許多不同的方式呈現(xiàn)。例如，有視覺障礙的人可以使用合成語(yǔ)音大聲朗讀替代文本，有聽力障礙的人可以顯示文本，以便他們閱讀。

在設(shè)計(jì)中的體現(xiàn)，可能包含以下幾點(diǎn)：

• 音頻轉(zhuǎn)錄的可見鏈接；
• 視頻的音頻描述版本的可見鏈接；
• 文本以及圖標(biāo)和圖形按鈕；
• 表格或復(fù)雜圖表的標(biāo)題和說(shuō)明。

10. 為自動(dòng)啟動(dòng)的內(nèi)容提供控件

給用戶提供可見的控件，允許用戶停止任何動(dòng)畫或自動(dòng)播放的聲音，常見的場(chǎng)景如輪播圖、滑動(dòng)卡片、背景聲音和視頻等。

這對(duì)很多人來(lái)說(shuō)都是一個(gè)問(wèn)題，如果同時(shí)播放網(wǎng)站的音頻，使用屏幕閱讀軟件的人可能會(huì)發(fā)現(xiàn)很難識(shí)別語(yǔ)音輸出。當(dāng)屏幕閱讀器的語(yǔ)音輸出被控制在與站點(diǎn)聲音相同的音量上時(shí)，情況會(huì)變得更糟。因此，對(duì)于用戶而言，能夠關(guān)閉任何背景聲音（無(wú)論是低音量還是完全關(guān)閉）都非常重要。

三、目前的網(wǎng)站無(wú)障礙設(shè)計(jì)

1. 是如何實(shí)現(xiàn)的？

有采用“智網(wǎng)解析”有接入“互聯(lián)網(wǎng)信息無(wú)障礙云服務(wù)”和獨(dú)立服務(wù)系統(tǒng)兩種。其中，接入互聯(lián)網(wǎng)信息無(wú)障礙云服務(wù)模式，是網(wǎng)站直接引用“互聯(lián)網(wǎng)信息無(wú)障礙云服務(wù)”提供的前端解析腳本；獨(dú)立服務(wù)系統(tǒng)至少需要1臺(tái)服務(wù)器來(lái)支撐后端服務(wù)系統(tǒng)的運(yùn)行，前端網(wǎng)頁(yè)也需要引用自身系統(tǒng)的“智網(wǎng)引擎”。

簡(jiǎn)單來(lái)說(shuō)，在原網(wǎng)站基礎(chǔ)上接入第三方無(wú)障礙插件，網(wǎng)站就實(shí)現(xiàn)了無(wú)障礙的功能服務(wù)。可以讓老人、盲人、弱視、低文化人群等多類訪問(wèn)網(wǎng)站有障礙的人群正常訪問(wèn)網(wǎng)站。像知乎、淘寶、京東都是用的這種無(wú)障礙服務(wù)。

2. 網(wǎng)站端無(wú)障礙服務(wù)功能有哪些？

網(wǎng)站無(wú)障礙的功能有讀屏專用、聲音開關(guān)、語(yǔ)速、閱讀方式、配色、放大、縮小、鼠標(biāo)樣式、十字線、重置、固定、說(shuō)明這幾種?；旧隙伎梢詽M足老年人和殘障人士的需求。

1. 文字放大：文字放大控制按鈕可以將網(wǎng)頁(yè)的字體放大，通過(guò)點(diǎn)擊該按鈕改變頁(yè)面的字體大小。可以有效點(diǎn)擊四次。
2. 文字縮?。何淖挚s小控制按鈕可以將網(wǎng)頁(yè)放大的字體縮小，通過(guò)點(diǎn)擊該按鈕改變頁(yè)面的字體大小。
3. 開啟對(duì)比度：將當(dāng)前頁(yè)面網(wǎng)頁(yè)的前景內(nèi)容和背景的顏色對(duì)比調(diào)到最大，即黑白對(duì)比，其中圖片不做處理。點(diǎn)擊一次后按鈕變?yōu)檫€原對(duì)比度。
4. 開啟輔助線：提供了橫豎兩條基準(zhǔn)線，為閱讀定位提供幫助。點(diǎn)擊一次后按鈕變?yōu)殛P(guān)閉輔助線。
5. 界面放大：將網(wǎng)站當(dāng)前顯示比例頁(yè)面放大，界面放大后網(wǎng)頁(yè)內(nèi)容也會(huì)隨之變大。
6. 界面縮?。簩⒕W(wǎng)站頁(yè)面顯示比例縮小，界面縮小后網(wǎng)頁(yè)內(nèi)容也會(huì)隨之變小。
7. 重置：將之前所有輔助效果恢復(fù)為網(wǎng)頁(yè)默認(rèn)狀態(tài)。
8. 關(guān)閉：關(guān)閉無(wú)障礙輔助工具條。

讀屏功能，使用人群：盲人用戶及嚴(yán)重視障人士

• 網(wǎng)頁(yè)盲道：網(wǎng)頁(yè)為用戶提供欄目導(dǎo)航、信息區(qū)域、文字輸入、列表及正文、網(wǎng)站服務(wù)等六個(gè)類別的信息盲道。
• 操作引導(dǎo)：網(wǎng)頁(yè)及時(shí)為用戶提供網(wǎng)頁(yè)服務(wù)類型、區(qū)域所含區(qū)域類別及數(shù)量、區(qū)域快捷定位等人工智能技術(shù)服務(wù)。
• 輔助服務(wù)：全程提供鍵盤替代鼠標(biāo)操作，各類信息區(qū)域定位或查詢、在線語(yǔ)音閱讀文字等無(wú)障礙服務(wù)。

配色、放大縮小、鼠標(biāo)樣式、十字線、大字幕這部分功能，使用人群：視力、文化及閱讀能力低下人士

• 視覺補(bǔ)償：網(wǎng)頁(yè)及字體放大、縮?。痪W(wǎng)頁(yè)背景色調(diào)整；特大文字顯示屏。
• 閱讀補(bǔ)償：文字、圖片及控件在線語(yǔ)音閱讀，語(yǔ)速、閱讀方式調(diào)節(jié)。
• 操作補(bǔ)償：特大鼠標(biāo)指針、十字光標(biāo)定位、全程鍵盤替代鼠標(biāo)操作。

3. 無(wú)障礙的入口位置

1）頂部導(dǎo)航欄

大多數(shù)網(wǎng)站無(wú)障礙入口是在網(wǎng)站的頂部導(dǎo)航欄上，固定在網(wǎng)站頂部，網(wǎng)站頂部導(dǎo)航欄是用戶進(jìn)入網(wǎng)站最先看到的位置，放在這個(gè)位置可以讓用戶迅速找到需要的功能，降低用戶尋找的時(shí)間成本。

2）主體內(nèi)容區(qū)

少數(shù)網(wǎng)站會(huì)把無(wú)障礙入口放在網(wǎng)站的內(nèi)容區(qū)，例如868公交網(wǎng)和百度首頁(yè)，放在內(nèi)容區(qū)不好的地方是我點(diǎn)擊到二級(jí)頁(yè)面就看不到無(wú)障礙入口了，只有在首頁(yè)時(shí)會(huì)出現(xiàn)，位置不明顯，用戶可能注意不到。

4. 適老化無(wú)障礙的入口名稱

目前網(wǎng)站無(wú)障礙入口名稱有這幾種【網(wǎng)站無(wú)障礙、切換無(wú)障礙、愛心模式、適老化及無(wú)障礙、無(wú)障礙、輔助功能、進(jìn)入關(guān)懷模式、無(wú)障礙瀏覽等】還有部分網(wǎng)站沒(méi)有名稱只有無(wú)障礙的標(biāo)識(shí)。

我們能看到現(xiàn)在很多的入口名稱，比如網(wǎng)站無(wú)障礙、愛心模式、無(wú)障礙、關(guān)懷模式等，最主要的是讓有這個(gè)需求的老人用戶和殘障用戶理解就可以，不過(guò)我覺得名稱最好統(tǒng)一，不然在不用的網(wǎng)站名稱不一樣感覺不到這是一個(gè)功能。

網(wǎng)站入口的名稱是愛心模式、關(guān)懷模式、無(wú)障礙、適老化及無(wú)障礙等，這些都可以聯(lián)想到這是為老人和殘障人士設(shè)計(jì)的功能，但是名稱只是適老化，那殘障人士會(huì)以為這只是給老年人設(shè)計(jì)的功能，會(huì)不確定對(duì)他們是否有幫助。

四、網(wǎng)站無(wú)障礙產(chǎn)品體驗(yàn)

2021年4月，工信部發(fā)布了互聯(lián)網(wǎng)網(wǎng)站適老化通用設(shè)計(jì)規(guī)范》和《移動(dòng)互聯(lián)網(wǎng)應(yīng)用（APP）適老化通用設(shè)計(jì)規(guī)范》，要求在2021年底完成115個(gè)網(wǎng)站和43個(gè)APP的適老化及無(wú)障礙改造。其中熱門應(yīng)用淘寶、百度、五大銀行都在改造名單中。

相關(guān)政策下達(dá)后，更多的人關(guān)注并重視適老化和無(wú)障礙設(shè)計(jì)，現(xiàn)在我們可以看到好多網(wǎng)站都帶有無(wú)障礙的標(biāo)識(shí)，很多APP也都推出了關(guān)愛版，大字版，關(guān)懷版等適老化模式。

接下來(lái)我們就一起來(lái)看下，網(wǎng)站適老化以及無(wú)障礙改造是如何改的以及改的怎么樣。

1. 電商類：淘寶、京東

這兩個(gè)網(wǎng)站用的是同樣的第三方無(wú)障礙服務(wù)，可是淘寶的使用體驗(yàn)更完善，讀屏功能：鼠標(biāo)懸?？梢匝杆僮x出相對(duì)應(yīng)的內(nèi)容，盲人用戶可以完成整個(gè)購(gòu)買流程，老人用戶的需求也可以被滿足。

京東的無(wú)障礙功能，放大縮小配色這些功能都是可以正常使用，重置固定說(shuō)明退出服務(wù)這幾個(gè)功能這里不多描述。最主要的是為視障人士設(shè)計(jì)的讀屏功能，讀取時(shí)有延遲且讀的不準(zhǔn)確，有的內(nèi)容還不能讀取，例如鼠標(biāo)放在“PLUS會(huì)員”上，應(yīng)該讀出“PLUS會(huì)員”結(jié)果等待能有幾十秒讀出來(lái)的是“京東國(guó)際”??。

另外大字幕功能的內(nèi)容顯示也是不準(zhǔn)確的，可以看出整個(gè)無(wú)障礙的體驗(yàn)還不夠完善，作為一個(gè)盲人用戶是很難完成整個(gè)操作流程的，作為老年用戶來(lái)說(shuō)，也只是滿足了放大的功能。

2. 搜索類：百度、搜狗

百度的在網(wǎng)站右下角的位置很不明顯且沒(méi)有文字說(shuō)明，只有圖形，相當(dāng)于在這個(gè)頁(yè)面弱化了這個(gè)功能，打開輔助功能，出現(xiàn)無(wú)障礙功能，到二級(jí)頁(yè)面也還是會(huì)出現(xiàn)無(wú)障礙功能，可是不能退出服務(wù)，如果退出服務(wù)就需要到首頁(yè)重新打開，沒(méi)有固定的入口。不過(guò)百度無(wú)障礙功能樣式是重新設(shè)計(jì)過(guò)的，功能體驗(yàn)上也比較完善，整體很流暢。

搜狗的位置入口是在頂部導(dǎo)航欄，無(wú)障礙功能都可以正常使用，整體體驗(yàn)很流暢。

3. 銀行：中國(guó)建設(shè)銀行、中國(guó)農(nóng)業(yè)銀行

中國(guó)建設(shè)銀行入口：頂部導(dǎo)航欄，名稱：無(wú)障礙。

功能體驗(yàn)：無(wú)障礙功能都可以正常使用，視障用戶和盲人用戶可完整使用整個(gè)流程。

中國(guó)農(nóng)業(yè)銀行入口：頂部導(dǎo)航欄，名稱：無(wú)障礙瀏覽。

功能體驗(yàn)：農(nóng)業(yè)銀行無(wú)障礙瀏覽旁邊還有一個(gè)關(guān)懷版，也就是適老化版本，他做的把無(wú)障礙和適老化分成了兩個(gè)功能，點(diǎn)擊關(guān)懷版，頁(yè)面整體元素放大，且功能結(jié)構(gòu)也有調(diào)整，主要的信息突出方便老年人快速找到，說(shuō)實(shí)話我真的是有點(diǎn)感動(dòng)。

4. 新聞?lì)悾壕W(wǎng)易、騰訊

• 網(wǎng)易：入口：頂部導(dǎo)航，名稱：進(jìn)入關(guān)懷模式
• 騰訊：入口：頂部導(dǎo)航，名稱：無(wú)障礙瀏覽

騰訊的詳情頁(yè)面，不能識(shí)別標(biāo)題信息。

5. 出行類：12306、868公交網(wǎng)

• 12306：入口：頂部導(dǎo)航欄，名稱：愛心模式，可以正常使用。
• 868公交網(wǎng)：入口：頂部導(dǎo)航欄，名稱：切換無(wú)障礙。

功能使用正常，二級(jí)頁(yè)面沒(méi)有無(wú)障礙了。

6. 社交類：知乎、微博

• 知乎：入口：在個(gè)人頭像里，名稱：無(wú)障礙。
• 微博：入口：頂部導(dǎo)航欄，名稱：無(wú)障礙，只首頁(yè)做了無(wú)障礙。

五、寫在最后

無(wú)障礙設(shè)計(jì)會(huì)讓我們成為更好的設(shè)計(jì)師，當(dāng)你用無(wú)障礙標(biāo)準(zhǔn)來(lái)思考，你會(huì)發(fā)現(xiàn)你做的設(shè)計(jì)會(huì)以更包容的角度考慮到每一個(gè)用戶的使用體驗(yàn)。對(duì)我們自身是一種成長(zhǎng)，對(duì)無(wú)障礙人士是一種幫助，雖然這不容易做到，那就從關(guān)注無(wú)障礙設(shè)計(jì)開始，希望這篇文章能對(duì)你有幫助，歡迎關(guān)注，下篇文章見～