網站搭建如何做網站無障礙及適老化？

現在，互聯(lián)網對人們生活的影響在不斷加大，網絡的出現也確實為我們的生活帶來了許多便利條件，然而，像老人或殘障人士等這部分人群卻有時會被互聯(lián)網"拒之門外"，而這說明了無障礙設計的重要性和必要性。本篇文章里，作者就對網站搭建如何做無障礙、適老化設計進行了總結，一起來看。

前言

我國 60歲及以上的老年人有2.6億，據第二次全國殘疾人抽樣調查數據推算，全國各類殘疾人總數為8296萬人。看到這組數字，大家有什么想法？

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

一、了解網站無障礙

1. 網站無障礙含義

在我們日常生活中有很多關于無障礙的標識，例如地鐵這樣的公共設施中一定會有無障礙通道，電梯里有無障礙電梯，還有路邊人行道斜坡，都是為了有行動障礙人士設計的，這些都是生活中的無障礙設計。

現在，我們進入了互聯(lián)網時代，網絡對許多人來說是日常生活中的重要組成部分，但是對于殘障群體和老年群體他們很難跟我們一樣正常的使用網站，在網絡中他們會遇到很多困難，在這個信息化的時代，給我們帶來的是便利，可對于他們來說是層層障礙。

實現網站無障礙是指無論你是殘疾人、老年人、還是健全人都可以正常的使用網絡，為了做到這一點，就要實現網頁內容無障礙以及上網使用的輔助軟件技術的無障礙。

2. 老年人的網絡障礙

隨著人的壽命越來越長，老年人使用網站的次數也越來越多，為老年用戶提供良好的服務成為了一個重要的社會因素。許多老年人的障礙與年齡相關，這些障礙會影響他們使用網絡。

老人的網絡障礙有以下四點：

視覺障礙 – 包括對顏色感知能力、視覺搜索能力下降，使閱讀網頁變得困難。

行動障礙 – 包括靈巧度和精細運動控制能力下降，使其難以使用鼠標和點擊小目標。

聽覺障礙 – 包括難以聽到較高音調的聲音和分離聲音，從而難以聽到播客和其他音頻，尤其是在有背景音樂的情況下。

認知障礙 – 包括短期記憶減少、難以集中注意力和容易分心，從而難以遵循導航和完成在線任務。

3. 殘障人士的網絡障礙

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

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

殘障人士的網絡障礙有以下六點：

聽覺障礙：聽不到聲音，以及難以聽到較高的聲音。

認知障礙：智力障礙、自閉癥、學習障礙、記憶障礙。

神經損傷：多動癥、神經多樣性、癲癇癥。

肢體障礙：截肢、關節(jié)炎、重復性壓力損傷、靈活性降低、痙攣、四肢癱瘓等。

語言障礙：言語失用癥、口吃、語音障礙、無法說話。

視覺障礙：有眼部疾病或者全盲，色盲（難以區(qū)分顏色，例如紅色和綠色，或黃色和藍色）低視力人群（視力不佳、只能看到視野的中間、只能看到視野的邊緣和模糊的視野）。

4. 健全人的網絡障礙

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

所以在某些情況下我們也會遇到跟殘障人士一樣的困難，我們也可以通過無障礙設計獲得更好的體驗。

有"暫時性殘疾"的人，如手臂骨折或眼鏡丟失。

有"情境限制"的人，例如在明亮的陽光下看不清文字或在嘈雜的環(huán)境下聽不到聲音。

5. 網站無障礙=適老化嗎？

無障礙設計是讓所有人都可以平等的獲取信息利用信息，其中包含老年用戶。

舉個例子，網站的讀屏功能是為了盲人用戶設計的，通過鼠標懸浮的位置讀出對應的內容，讀屏軟件就是他們的眼睛，那老年用戶也屬于視覺障礙人群，他們也可以使用讀屏功能來獲取信息，所以無障礙設計的改造就是讓老年用戶，殘障人士以及所有人都能使用的設計方式。

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

二、網站無障礙改造標準

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

根據萬維網的網頁無障礙設計準則，我們在設計網站時，請注意要滿足以下幾點：

在前景和背景之間有足夠的對比度；

不要單獨使用顏色來傳達信息；

確保交互元素易于識別；

提供清晰一致的導航選項；

確保表單元素都有明確的標簽；

提供清晰一致的導航選項；

使用標題和間距對相關內容進行分組；

為不同的屏幕尺寸創(chuàng)建設計；

設計中包含圖像和媒體替代方案；

為自動啟動的內容提供控件。

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

我們做設計時，很容易假設用戶和我們一樣可以感知顏色或閱讀文本，可事實并非如此，對于有視覺障礙用戶來說就很難分辯顏色，這通常歸結于顏色對比度，即前景色和背景色之間的關系。當兩種顏色相似時，對比度低，當兩種顏色差距大時，對比度高。

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

如何檢查自己設計圖上的顏色對比度？推薦檢查對比的網站Colorable，只要輸入前景和背景的色值就可以看到顏色對比度。

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

2. 不要單獨使用顏色來傳達信息

雖然顏色對于傳達信息很有用，但顏色不應該是傳達信息的一方式。在使用顏色區(qū)分元素時，還要提供不依賴于顏色的附加標識。

例如，在輸入密碼無效時，設計上只用帶有紅色的框和圖標表示無效，對于有顏色缺陷的用戶或者使用屏幕閱讀器的用戶來說，并不能很好的獲取到信息，甚至可能接收不到信息，我們應該為用戶提供多種途徑來獲取關鍵信息?？梢杂妙伾由险f明文字的方式，這樣看不到顏色的用戶也可以通過文字里來獲取信息。

3. 確保交互元素易于識別

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

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

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

有部分用戶視力正常，但是可能運動控制力受限，因此只能使用鍵盤或者是轉換器來使用電腦和網站應用程序，這樣的人被稱作視力正常的鍵盤用戶。

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

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

相同功能的組件可以復用，樣式上保持統(tǒng)一，我們設計網站時命名也要規(guī)范，相同的功能命名保持一致，例如網頁中的提交搜索按鈕和另一個網頁中的查找按鈕，同樣的功能，命名要保持一致。這樣對于有認知障礙的人，可以降低理解成本。

4. 提供清晰一致的導航選項

網站中導航的作用是對信息進行分類，告訴用戶這里有什么，當前的位置在哪，可以到哪里去，讓用戶可以更高效、準確的在各個模塊之間完成操作。不一致的導航設計會給所有用戶帶來困難和挫敗感，尤其是本來就對電腦操作就不是很有信心的老年人以及殘障人士。

我們要做的是確保網站的所有頁面上的導航都具有一致的命名、樣式和定位。幫助用戶了解他們在網站或頁面中的位置。

5. 確保表單元素都有明確的標簽

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

6. 提供易于識別的反饋

在文本中提供有關輸入錯誤的信息可以讓盲人或色盲用戶感知發(fā)生錯誤的事實。

可以朗讀出圖標和其他視覺提示所代表的含義。

例如在用戶填寫表單信息時，內容填錯了或者未填寫，要給出明確的錯誤提示，并指出哪里填錯了，可以使用圖標，顏色等來突出展示。

7. 使用標題和間距對相關內容進行分組

網站中不同的模塊會有對應不同的標題，每一個標題之間都應該留有足夠的間距，使用空白和鄰近使內容之間的關系更加明顯。樣式標題以對內容進行分組、減少混亂并使其更易于瀏覽和理解。

這樣做的目的是幫助用戶了解網頁中包含哪些信息以及這些數據是如何組織的。當標題清晰且具有描述性時，個人可以很容易地找到他們正在尋找的信息，然后可以更容易地理解內容部分之間的關系。

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

考慮如何在不同大小的屏幕中呈現頁面信息，例如手機或縮放的瀏覽器窗口。可以更改主要元素的位置和表示，例如標題和導航，以充分利用空間。確保設置文本大小和線寬以大限度地提高可讀性和易讀性。

9. 設計中包含圖像和媒體替代方案

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

在設計中的體現，可能包含以下幾點：

音頻轉錄的可見鏈接；

視頻的音頻描述版本的可見鏈接；

文本以及圖標和圖形按鈕；

表格或復雜圖表的標題和說明。

10. 為自動啟動的內容提供控件

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

這對很多人來說都是一個問題，如果同時播放網站的音頻，使用屏幕閱讀軟件的人可能會發(fā)現很難識別語音輸出。當屏幕閱讀器的語音輸出被控制在與站點聲音相同的音量上時，情況會變得更糟。因此，對于用戶而言，能夠關閉任何背景聲音（無論是低音量還是完全關閉）都非常重要。

三、目前的網站無障礙設計

1. 是如何實現的？

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

簡單來說，在原網站基礎上接入第三方無障礙插件，網站就實現了無障礙的功能服務?？梢宰尷先恕⒚と?、弱視、低文化人群等多類訪問網站有障礙的人群正常訪問網站。像知乎、淘寶、京東都是用的這種無障礙服務。

2. 網站端無障礙服務功能有哪些？

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

文字放大：文字放大控制按鈕可以將網頁的字體放大，通過點擊該按鈕改變頁面的字體大小?？梢杂行c擊四次。

文字縮?。何淖挚s小控制按鈕可以將網頁放大的字體縮小，通過點擊該按鈕改變頁面的字體大小。

開啟對比度：將當前頁面網頁的前景內容和背景的顏色對比調到大，即黑白對比，其中圖片不做處理。點擊一次后按鈕變?yōu)檫€原對比度。

開啟輔助線：提供了橫豎兩條基準線，為閱讀定位提供幫助。點擊一次后按鈕變?yōu)殛P閉輔助線。

界面放大：將網站當前顯示比例頁面放大，界面放大后網頁內容也會隨之變大。

界面縮小：將網站頁面顯示比例縮小，界面縮小后網頁內容也會隨之變小。

重置：將之前所有輔助效果恢復為網頁默認狀態(tài)。

關閉：關閉無障礙輔助工具條。

讀屏功能，使用人群：盲人用戶及嚴重視障人士

網頁盲道：網頁為用戶提供欄目導航、信息區(qū)域、文字輸入、列表及正文、網站服務等六個類別的信息盲道。

操作引導：網頁及時為用戶提供網頁服務類型、區(qū)域所含區(qū)域類別及數量、區(qū)域快捷定位等人工智能技術服務。

輔助服務：全程提供鍵盤替代鼠標操作，各類信息區(qū)域定位或查詢、在線語音閱讀文字等無障礙服務。

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

視覺補償：網頁及字體放大、縮?。痪W頁背景色調整；特大文字顯示屏。

閱讀補償：文字、圖片及控件在線語音閱讀，語速、閱讀方式調節(jié)。

操作補償：特大鼠標指針、十字光標定位、全程鍵盤替代鼠標操作。

3. 無障礙的入口位置

1）頂部導航欄

大多數網站無障礙入口是在網站的頂部導航欄上，固定在網站頂部，網站頂部導航欄是用戶進入網站先看到的位置，放在這個位置可以讓用戶迅速找到需要的功能，降低用戶尋找的時間成本。

2）主體內容區(qū)

少數網站會把無障礙入口放在網站的內容區(qū)，例如868公交網和百度首頁，放在內容區(qū)不好的地方是我點擊到二級頁面就看不到無障礙入口了，只有在首頁時會出現，位置不明顯，用戶可能注意不到。

4. 適老化無障礙的入口名稱

目前網站無障礙入口名稱有這幾種【網站無障礙、切換無障礙、愛心模式、適老化及無障礙、無障礙、輔助功能、進入關懷模式、無障礙瀏覽等】還有部分網站沒有名稱只有無障礙的標識。

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

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

四、網站無障礙產品體驗

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

相關政策下達后，更多的人關注并重視適老化和無障礙設計，現在我們可以看到好多網站都帶有無障礙的標識，很多APP也都推出了關愛版，大字版，關懷版等適老化模式。

接下來我們就一起來看下，網站適老化以及無障礙改造是如何改的以及改的怎么樣。

1. 電商類：淘寶、京東

這兩個網站用的是同樣的第三方無障礙服務，可是淘寶的使用體驗更完善，讀屏功能：鼠標懸?？梢匝杆僮x出相對應的內容，盲人用戶可以完成整個購買流程，老人用戶的需求也可以被滿足。

京東的無障礙功能，放大縮小配色這些功能都是可以正常使用，重置固定說明退出服務這幾個功能這里不多描述。主要的是為視障人士設計的讀屏功能，讀取時有延遲且讀的不準確，有的內容還不能讀取，例如鼠標放在"PLUS會員"上，應該讀出"PLUS會員"結果等待能有幾十秒讀出來的是"京東國際"。

另外大字幕功能的內容顯示也是不準確的，可以看出整個無障礙的體驗還不夠完善，作為一個盲人用戶是很難完成整個操作流程的，作為老年用戶來說，也只是滿足了放大的功能。

2. 搜索類：百度、搜狗

百度的在網站右下角的位置很不明顯且沒有文字說明，只有圖形，相當于在這個頁面弱化了這個功能，打開輔助功能，出現無障礙功能，到二級頁面也還是會出現無障礙功能，可是不能退出服務，如果退出服務就需要到首頁重新打開，沒有固定的入口。不過百度無障礙功能樣式是重新設計過的，功能體驗上也比較完善，整體很流暢。

搜狗的位置入口是在頂部導航欄，無障礙功能都可以正常使用，整體體驗很流暢。

3. 銀行：中國建設銀行、中國農業(yè)銀行

中國建設銀行入口：頂部導航欄，名稱：無障礙。

功能體驗：無障礙功能都可以正常使用，視障用戶和盲人用戶可完整使用整個流程。

中國農業(yè)銀行入口：頂部導航欄，名稱：無障礙瀏覽。

功能體驗：農業(yè)銀行無障礙瀏覽旁邊還有一個關懷版，也就是適老化版本，他做的把無障礙和適老化分成了兩個功能，點擊關懷版，頁面整體元素放大，且功能結構也有調整，主要的信息突出方便老年人快速找到，說實話我真的是有點感動。

4. 新聞類：網易、騰訊

網易：入口：頂部導航，名稱：進入關懷模式

騰訊：入口：頂部導航，名稱：無障礙瀏覽

騰訊的詳情頁面，不能識別標題信息。

5. 出行類：12306、868公交網

12306：入口：頂部導航欄，名稱：愛心模式，可以正常使用。

868公交網：入口：頂部導航欄，名稱：切換無障礙。

功能使用正常，二級頁面沒有無障礙了。

6. 社交類：知乎、微博

知乎：入口：在個人頭像里，名稱：無障礙。

微博：入口：頂部導航欄，名稱：無障礙，只首頁做了無障礙。

五、寫在后

無障礙設計會讓我們成為更好的設計師，當你用無障礙標準來思考，你會發(fā)現你做的設計會以更包容的角度考慮到每一個用戶的使用體驗。對我們自身是一種成長，對無障礙人士是一種幫助，雖然這不容易做到，那就從關注無障礙設計開始，希望這篇文章能對你有幫助，歡迎關注，下篇文章見～

本文由 @一善的設計筆記 原創(chuàng)發(fā)布