殘疾人、老年人的特殊需求

但它并非只是專為殘疾人、老年人群體的設計

它著力于開發(fā)人類可“共用”的產(chǎn)品

能夠滿足所有使用者需求的產(chǎn)品

今天帶來12款優(yōu)秀的無障礙設計

我們一起來看看吧

 01

Un Lavabo 水槽 

原創(chuàng)設計師：Gwenole Gasnir

這款水槽設計通過底部一個簡單的斜切面，便可使水槽在輕微受力下向外側傾斜到一定的角度，大大方便了兒童或身殘人士使用。

 02

無障礙盲文板 

原創(chuàng)設計：TZXR

這款無障礙盲文板是傳統(tǒng)盲文板的改良版，它的設計出發(fā)點在于盡量消除使用者與紙張之間的障礙，使用戶能順利的用觸覺感知盲文紙以及書寫的內(nèi)容，這消除了傳統(tǒng)盲文板在使用過程中的不便。

 03

Braille Smart Watch 

原創(chuàng)設計團隊：Dot

韓國新創(chuàng)團隊 Dot 開發(fā)了世界上第一款盲文智慧型手表（Braille SmartWatch）。

Dot 與其他智慧型手表一樣，能夠佩戴在手腕上。不過它的功能面不是普通的觸控螢幕，而是連串的突起。

它能夠與手機配對，手機收到文本訊息后，會翻譯成盲文發(fā)送給Dot，Dot則通過震動提醒用戶。這些突起共有4個橫排，每橫排有 6 個點，它們能夠上下浮動展現(xiàn)盲文字變化。盲文速度可以調(diào)節(jié)，最快每秒100字，最慢每秒1個字。

除此之外，Dot還擁有手表、鬧鈴、提醒等功能。按下旁邊的按鈕，用戶還能用它發(fā)送訊息。這款設備開放API，任何開發(fā)者都能額外開發(fā)應用程式來強化產(chǎn)品。

 04

StairSteady 扶手 

這款滑軌樓梯扶手用來幫助老年人或行動不便的人獨立上下樓，并且用完之后還可以折疊，節(jié)省空間，便于下次使用。

另外它還可承受200斤的重量，不用擔心意外情況的發(fā)生。

StairSteady不僅可以用于上下樓，也可以用于平行移動。

 05

Solo Toilet Lift 

這是Mountway公司研發(fā)的Solo Toilet Lift，可以安裝在任何馬桶上。

當按下開關后，馬桶坐墊會緩緩升起，當識別到老人坐下后，則慢慢下降，兩側帶有扶手，十分安穩(wěn)當上完廁所后則慢慢升起，這樣則不用老人自己使力，或拉拽任何扶手進行站立。

 06

巴士

這輛巴士設計為旅客提供了足夠的空間。殘疾人士也可以在公共汽車上輕松地移動，像所有其他乘客一樣進入公共汽車。

 07

SCEWO 輪椅   

scewo是一款自平衡輪椅，除了擁有其他電動輪椅的一般功能之外,它可以幫助殘疾人獨立平穩(wěn)地上下樓梯，被認為是輪椅技術領域一項突破性產(chǎn)品。

這項創(chuàng)新設計是行動不便人士的福音，輪椅底部安裝了多條橡膠履帶，可以穿過障礙物，還能在樓梯上平穩(wěn)安全地前行。

 08

Whill 輪椅   

Whill就是一輛讓乘坐人更有尊嚴的輪椅，非常現(xiàn)代、漂亮的外形，充滿人性化設計的功能，足以應付各種生活場景的變化模式。Whill甚至可以作為適用于任何人的新時代個人交通工具。

Whill的座椅可以向前伸出，方便你坐在Whill上也能很舒服地夠到桌子，兩側的控制扶手也能豎起，給手臂留出充足的活動空間。剎車燈、水杯網(wǎng)、掛包的掛鉤以及手電筒一應俱全。

 09

骨傳導耳機   

和市面上的其他骨傳導耳機一樣，這個設計繞過了耳膜，通過顱骨將聲音作為振動傳遞到耳蝸——內(nèi)耳的“聽覺”部分。

與市場上其他設備不同的是，它是通過防水揚聲器實現(xiàn)的，這種揚聲器完全浸入液體中，然后密封在柔軟的薄膜中。這種膜靠在人的皮膚上，通過觸摸傳遞聲音振動。

 10

PROJET DIAL 手語互動裝置  

該設計是一個由聾人和手語交流啟發(fā)的互動裝置。它能實時地對使用者的手做出反應，允許聲音和輕的句子通過他們的動作。

 11

浴室安全輔助設備   

這一系列主要是針對身體殘疾人士的浴室安全輔助設備，它的設計符合人體生物力學。多個支撐點支持移動并保障了它的安全性。

手柄在日常功能上提供了穩(wěn)定性，幫助用戶在操作時保持平衡，減少滑倒和摔倒的機會。他們讓用戶在日常生活中保持獨立和隱私感。

 12

Easy Button便捷紐扣  

通過更符合人體工學的設計改良了扣子的形狀，讓紐扣的一端變薄，并且輕微朝上翹起，更便于被抓握；另外使它略呈凹形，也更容易在指尖的推動下穿過扣眼。除了老人之外，這樣的扣子對于幼童或者特定的殘疾人士也會有所幫助。

原文：工業(yè)設計 （ID：DesignTop）

前言

“信息無障礙”譯自“Accessibility”，指的是任何人在任何情況下都能平等、方便、無障礙地獲取信息并利用信息。以互聯(lián)網(wǎng)環(huán)境為例，互聯(lián)網(wǎng)產(chǎn)品可以被老年人、視障者、聽障者、讀寫障礙人士等用戶順利使用。

近年來，隨著互聯(lián)網(wǎng)的快速發(fā)展，很多人已經(jīng)開始廣泛使用電子政務，政府也越來越多地以在線方式向大家提供信息和服務。據(jù)國家統(tǒng)計局和殘疾人聯(lián)合會數(shù)據(jù)顯示，我國 65 歲及以上的老年人有1.4 億，殘疾人士有 8502 萬，分別人數(shù)為：視力殘疾 1263 萬人；聽力殘疾 2054 萬人；言語殘疾130 萬人；肢體殘疾 2472 萬人；智力殘疾 568 萬人；精神殘疾 629 萬人；多重殘疾 1386 萬人。目前我國 31 個省、276 個地市、1197 個縣級的殘聯(lián)都開通了網(wǎng)站，積極推動殘疾人證智能化工作，發(fā)展“互聯(lián)網(wǎng)+殘疾人服務”。為了讓殘障人士能無障礙地使用電子政務，給他們提供更便捷、高效的服務，政務網(wǎng)站的無障礙建設尤其重要。網(wǎng)站構建的所有內(nèi)容都應該盡可能具有包容性，易讀性和可讀性，為每一個人設計，為每一個人服務。

殘障人士分析

信息無障礙涉及廣泛的殘疾類別，包括視覺、聽覺、身體、語言、認知、語言、學習以及神經(jīng)殘疾。我們可能無法滿足所有類型、程度和多重殘疾人群的需要，但可以占比基數(shù)較多的特殊人群開始分析研究。

• 視障人士：1.低視力，由于各種原因?qū)е码p眼視力障礙或視野縮小，難能做到一般人所能從事的工作、學習或活動；2.色盲，分為全色盲和部分色盲（紅色盲、綠色盲、藍黃色盲等），不能分辨各種顏色或某種顏色；3.色弱，包括全色弱和部分色弱（紅色弱、綠色弱、藍黃色弱等），能看到顏色，但辨認顏色的能力遲緩或很差；4.失明人士，眼睛患有疾病或受到意外傷害而導致雙目失明。
• 聽障人士：雙耳聽力喪失或聽覺障礙，聽不到或聽不清周圍環(huán)境的聲音，包括全聾、重聽、聽力弱化等人士。
• 運動障礙人士：這里主要指手部不靈活或需要使用輔助設施的人士，也包括在某些環(huán)境下，不能正常通過手部操作的人士。
• 讀寫障礙人士：一種最常見的特殊學習困難，閱讀方面會跳字漏行、增字、替換字、倒反念，或無法理解閱讀內(nèi)容混淆相似字。
• 老年人：會出現(xiàn)身體機能下降、記憶力減退、視力下降等特征。

一個網(wǎng)站如果全站做到信息無障礙需要花費很多時間，進行很多研究和用戶測試才可以完成，但我們可以分階段逐步去推進改造，例如先從整個網(wǎng)站的顏色對比度開始入手，解決低視力人士的問題。

1. 為低視力人士設計

使用良好的顏色對比度

確保顏色對比度符合 WCAG 2.0（內(nèi)容無障礙指南）標準，是信息無障礙中非常重要的一步。如果我們在設計當中做到這一點，也可以保障低視力人士能更好地獲取信息。

根據(jù) WCAG 2.0 的標準：

• 對比度（AA 級）: 文本的視覺呈現(xiàn)以及文本圖像至少要有 4.5:1 的對比度；
• 大文本: 大號文本（字重為 Bold 時大于 18px，字重為 Regular 時大于 24px ）以及大文本圖像至少有 3:1 的對比度；
• 對比度（AAA 級）: 文本視覺呈現(xiàn)以及文本圖像至少有 7:1 的對比度；
• 大文本: 大號文本（字重為 Bold 時大于 18px，字重為 Regular 時大于 24px ）以及大文本圖像至少有 4.5:1 的對比度。

在附屬內(nèi)容中，未激活的界面組件、純粹的裝飾、文本作為標志或品牌名稱的一部分，這些情況都沒有最低對比度限制。

WebAIM 可以幫助我們測試對比度，并且可以在線調(diào)整符合標準的顏色

Contrast Grid 可以測試多個顏色組合是否符合 WCAG 2.0 的對比度標準

使用 Contrast Grid 測試了兩個國內(nèi)省級政務服務 網(wǎng)站的顏色，發(fā)現(xiàn)基本上只有主要文字和次要文字的顏色能達到標準，用于網(wǎng)站上大面積的品牌藍色（鏈接色）在大于 18px 字號下才符合對比度要求。

英國政府網(wǎng)是目前全球數(shù)字政府中做的最好的政務網(wǎng)站，在英國，政務服務是所有服務里面使用時間最久、提供量最大的服務。他們網(wǎng)站設計也很注重信息無障礙，在這方面付出了很大的努力。

檢測后發(fā)現(xiàn)英國政府網(wǎng)使用的顏色都有足夠高的對比度，滿足了 WCAG 2.0 的標準，而且整體顏色都使用了偏低飽和度和明度的顏色。加強顏色的對比度，不只是為了讓低視力人士能更好地使用我們的產(chǎn)品，同時也可以讓使用較差顯示設備的用戶、老年人有更好的產(chǎn)品體驗。

2. 為色盲色弱人士設計

避免僅使用顏色傳遞信息

顏色在設計中起著重要作用，能喚起情感，感受和想法，并且可以幫助增強品牌的信息和感知。然而，當用戶無法看到它們或以不同方式感知它們時，顏色的作用就會消失。對于無法辨別顏色的色盲色弱人士，如果只用顏色作為傳達信息，提示信息重要性或區(qū)分視覺元素的唯一途徑，他們是很難感知的。

Stark（Sketch插件）可以模擬不同類型的色盲色弱人士所看到的效果，來幫助我們設計

某個政務網(wǎng)站上的注冊表單，在沒有填寫任何信息的情況下點擊注冊按鈕，必填項出現(xiàn)的錯誤提示是在下方用了紅色的文字，這種方式對于普通用戶來說是可以感知的。右側圖則是模擬紅綠色盲人士看到的效果，這種情況下，錯誤提示的引導性就會降低很多。

英國政府網(wǎng)的錯誤提示對于色盲色弱人士就友好很多，除了紅色的提示文字外，輸入框的邊框還會加粗處理，并且加上豎線提示對應沒填寫的表單項，提醒用戶注意。除此之外，其實還有很多視覺處理的方法來達到傳遞信息的目的，例如在輸入框內(nèi)或者提示文字前加上感嘆號的圖標，這種方式對于普通用戶來說，也會有更明確的提示。

3. 為失明人士設計

支持鍵盤導航

網(wǎng)站支持鍵盤導航是無障礙很最關鍵的一個方面，無障礙指南中提到要使所有功能都能通過鍵盤來操作，對于依賴于屏幕閱讀器的失明人士和沒有精確肌肉控制的人士，都需要使用鍵盤來導航內(nèi)容。

當你瀏覽網(wǎng)站時，整個頁面導航順序應該是有邏輯，可預測和直觀的。選項的順序應該遵循規(guī)則：從左到右，從上到下，由頂部導航到內(nèi)容內(nèi)容區(qū)，最后是頁腳。

我們可以嘗試只用鍵盤操作來測試網(wǎng)站，使用 Tab 鍵移動焦點，用 Enter 鍵選擇元素。測試所有的交互元素是否可預測且有序。如果可以在沒有鼠標的情況下瀏覽整個網(wǎng)站的所有內(nèi)容，證明這個網(wǎng)站已經(jīng)滿足了支持鍵盤導航的基本要求。

下圖是國內(nèi)某個政務網(wǎng)站首頁的導航區(qū)，標注的數(shù)字是獲取焦點的順序，在用鍵盤導航的過程中，整個頁面導航順序都比較混亂，某些元素也無法通過鍵盤來獲取。

相反，英國政府網(wǎng)和澳大利亞政府網(wǎng)首頁的導航邏輯就會比較清晰，整個網(wǎng)站遵循從左到右，從上到下的原則，每個交互元素都可以通過鍵盤來獲取，讓用戶感知到整個網(wǎng)站的布局，確定每個內(nèi)容的位置。

用戶通過 Tab 鍵導航網(wǎng)站交互元素時，焦點就是提供了當前所選組件的可視化指示，焦點可幫助用戶了解界面上哪些元素有鍵盤焦點，并幫助他們了解導航網(wǎng)站時的位置。很多網(wǎng)站都是用了瀏覽器默認的焦點樣式，但我們也可以根據(jù)內(nèi)容設計出符合網(wǎng)站風格，與品牌相呼應的焦點樣式。

英國政府網(wǎng)就是重新設計了焦點樣式，使用黃色來突出焦點，讓用戶更明確當前焦點所在位置。根據(jù)不同的元素，樣式也會有所變化。

蘋果官網(wǎng)的焦點樣式也進行了重新設計，在圓角輸入框上焦點也做了相應的調(diào)整，使焦點和頁面元素更為融合。

為非文本內(nèi)容添加替代文本

視障人士經(jīng)常會利用屏幕閱讀器來“聆聽”我們的網(wǎng)站，網(wǎng)站上的文字、圖片、組件等信息都是通過屏幕閱讀器說出來。這時候如何為這些非文本內(nèi)容添加描述準確的輔助替代文本就非常重要。

以下圖為例，左圖搜索框按鈕的替代文本為“按鈕”，這種描述就會很抽象，增加了視障人士的理解門檻，容易讓他們產(chǎn)生一個疑問：這是一個什么作用的按鈕？相對來說，右圖的處理則清晰很多，按鈕的替代文本很明確地告訴用戶這是一個搜索按鈕。

圖片很多時候在設計中用于傳達特定的感覺和渲染氛圍，如果需要通過用替代本文來傳達圖片信息的時候，我們可以嘗試用簡練的語言去描述圖片內(nèi)容，讓視障人士能快速獲取信息，在腦海里形成畫面，而不只是告訴他們這是一張圖片。

如果我們沒有對圖片添加替代文本，屏幕閱讀器就會直接把一串字符的文件名字讀出來。嘗試打開屏幕閱讀器，閉上眼睛去“聽”這種圖片，是一種非常難受的體驗。

除此之外，英國政府網(wǎng)還有很多細節(jié)的處理值得學習。他們添加的標簽描述都很清晰，焦點切換到列表的第一項時會告訴用戶這個列表總共有多少個項目，下拉菜單目前是一個怎樣的狀態(tài)，讓視障人士對于整個網(wǎng)站有一個布局感受，同時也大大提高了他們安全感。

提供多種驗證碼方式

賬號注冊是用戶開始業(yè)務辦理的第一步，可是往往這一步就給了視障人士一個很大阻力。目前很多政務服務網(wǎng)注冊流程的驗證方式都只提供圖形驗證碼，但屏幕閱讀器是無法識別驗證碼中的文本信息。如果注冊流程都有障礙的話，其他業(yè)務辦理即使有做無障礙改造，對視障人士來說都是沒有意義的。我們除了圖形驗證碼之外，還應該提供多種驗證方式讓用戶選擇，如手機驗證碼、語音驗證碼等。

蘋果網(wǎng)站的注冊流程中，驗證方式除了提供圖形驗證碼之外，還會提供語音驗證碼。

快速訪問內(nèi)容

對于只使用鍵盤導航的用戶來說，在熟悉網(wǎng)站后，他們是希望直接訪問頁面內(nèi)容的。但是很多網(wǎng)站的頂部導航存在多個菜單，在用戶獲取頁面內(nèi)容之前，他們需要逐個切換鏈接才可以去到頁面內(nèi)容部分，打開一個新的頁面，又是重復這樣的步驟。

面對這樣的問題，我們可以提供更友好的解決方案。當用戶開始使用鍵盤導航頁面時，提供一個“跳至內(nèi)容”的鏈接，直接跳過每個頁面重復的內(nèi)容，提高視障人士或者鍵盤使用者的操作效率。

在使用鍵盤導航時，F(xiàn)acebook 還提供了頁面內(nèi)模塊和其他頁面的導航菜單，讓用戶可以更快速地跳到指定的內(nèi)容上，使用起來更高效。

4. 為聽力障礙人士設計

為視頻添加字幕

網(wǎng)站上的視頻都應盡可能配上字幕，讓聽障人士可以結合視頻畫面理解內(nèi)容。在政務網(wǎng)站上，為辦事指南的視頻教程里添加字幕，也有助于聽障人士更好地獲取信息，更容易完成辦事流程。除此之外，我們也可以提供詳細的圖文指南讓用戶選擇。

5. 為運動障礙人士設計

支持鍵盤導航

部分運動障礙人士如果無法控制鼠標，其實也是需要使用鍵盤來導航網(wǎng)站的，網(wǎng)站支持鍵盤導航不只是為了盲人用戶而設定，對于其他的殘障人士也是非常重要。

交互元素易于點擊

在設計控件時，也應該更加關注運動障礙人士和老年用戶的使用體驗，適當增加可點擊的目標區(qū)域，讓按鈕、菜單選項和鏈接足夠大，以便他們更容易操作。

6. 為讀寫障礙人士設計

圖形、圖片和文字結合的排版

由于讀寫障礙人士對文字閱讀有一定的難度，閱讀方面會出現(xiàn)跳字漏行、增字等情況。網(wǎng)站上應盡量減少同一位置上出現(xiàn)大篇幅的文字，WCAG2.0 中也提到的單行寬度不超過 40 個中文字符或符號，保持簡練的文字表達和清晰的內(nèi)容，通過使用標題、圖片和列表來分解內(nèi)容，緩解他們的閱讀壓力，以便為用戶提供心理休息和提高內(nèi)容的可讀性。

保持一致性的對齊方式

整個網(wǎng)站都盡可能保持統(tǒng)一的對齊方式，英國政務網(wǎng)的每個模塊的內(nèi)容都采用左對齊的方式，遵循用戶從左到右瀏覽習慣，讓其更自然和高效。本來讀寫障礙人士對于閱讀就有障礙，如果出現(xiàn)多種對齊方式，則會讓他們更加眼花繚亂。

7. 為老年人設計

使用較大的字號

為了確保老年人用戶能清晰瀏覽網(wǎng)站，而且考慮到并不是每個用戶都使用高分辨率的顯示設備，大字號的界面對于他們來說是很重要的。同時，我們還需要避免出現(xiàn)擁擠的大段文字，盡量把信息進行合理的分解，增加留白空間，通過排版組合讓用戶更清晰明確地獲取信息。

英國政務網(wǎng)的文字體系里，整理都選用了較大的字號，最小的正文也使用到 19px字號。

考慮到用戶對于字號大小顯示的不同需求，香港政府網(wǎng)的頂部導航還提供了字形大小的入口，指引用戶在不同瀏覽器下如何設置字號大小，讓他們可以設置最適合自己閱讀的顯示效果。

減少手動輸入

很多老年人達到了一定年齡，身體機能和記憶力會開始逐漸衰退，這使得他們操作網(wǎng)站界面變得更加困難，拼寫輸入就是其中一個很大障礙，我們應該盡量減少讓用戶手動拼寫輸入。在業(yè)務辦理流程中，對于填寫個人信息部分，可以優(yōu)先從賬號信息中拉取相關內(nèi)容，其他信息補充部分，能提供選擇項的內(nèi)容都盡可能使用選擇控件。

瀏覽路徑簡單明確

為了老年人能更好地瀏覽網(wǎng)站內(nèi)容，應該保持頁面清晰的布局和模塊劃分，為他們提供一個簡單明確的視覺動線，讓整個網(wǎng)站的內(nèi)容都是是直觀和易于理解。

小結

根據(jù)不同類型的用戶群體，我們應該思考如何為他們設計和提供更高效的服務，讓所有人都能平等、方便、無障礙地獲取信息。

為視障人士設計

• 使用良好的顏色對比度
• 使用適合閱讀的字號
• 使用顏色、圖形和文字結合的方式傳達信息
• 支持鍵盤導航
• 為非文本內(nèi)容添加替代文本

為聽障人士設計

• 為視頻添加字幕
• 用標題、圖片、列表等方式分解內(nèi)容
• 保持內(nèi)容清晰簡潔
• 有邏輯的版面布局

為運動障礙人士設計

• 支持鍵盤導航
• 交互元素易于點擊

為讀寫障礙人士設計

• 使用圖形、圖片和文字結合的排版
• 保持一致性的對齊方式
• 保持內(nèi)容清晰簡潔

為老年人設計

• 使用較大的字號
• 瀏覽路徑簡單明確
• 減少手動輸入
• 交互元素易于點擊

無障礙設計并不意味著會讓網(wǎng)站變得不好看，相反，它會在我們思考的過程中融入一些條件限制。在這些條件限制中去探索如何讓我們的設計能適用于所有用戶，為每一個人設計，為每一個人提供更好的政務服務。

參考文獻

《Designing accessible products》 Adhithya

《Accessible Interface Design》 Nick Babich

《Designing for accessibility is not that hard》 Smashing Magazine

《Designing For Accessibility And Inclusion》 Pablo Stanley

《How to make accessibility easier for service teams》 Angela Collins Rees

《7 Things Every Designer Needs to Know about Accessibility》 Jesse Hausler

《Web 內(nèi)容無障礙指南 (WCAG) 2.0》

感謝你的閱讀，本文出自 Tencent CDC，轉(zhuǎn)載時請注明出處，謝謝合作。
格式為：Tencent CDC（http://cdc.tencent.com/2018/08/13/【to-g設計賦能】政務網(wǎng)站信息無障礙設計-研究篇/）