天堂网www天堂在线中文,手机看片av永久免费,色窝窝无码一区二区三区成人网站,香蕉大视频一二三区乱码

前言

“信息無(wú)障礙”譯自“Accessibility”，指的是任何人在任何情況下都能平等、方便、無(wú)障礙地獲取信息并利用信息。以互聯(lián)網(wǎng)環(huán)境為例，互聯(lián)網(wǎng)產(chǎn)品可以被老年人、視障者、聽(tīng)障者、讀寫(xiě)障礙人士等用戶順利使用。 近年來(lái)，隨著互聯(lián)網(wǎng)的快速發(fā)展，很多人已經(jīng)開(kāi)始廣泛使用電子政務(wù)，政府也越來(lái)越多地以在線方式向大家提供信息和服務(wù)。據(jù)國(guó)家統(tǒng)計(jì)局和殘疾人聯(lián)合會(huì)數(shù)據(jù)顯示，我國(guó) 65 歲及以上的老年人有1.4 億，殘疾人士有 8502 萬(wàn)，分別人數(shù)為：視力殘疾 1263 萬(wàn)人；聽(tīng)力殘疾 2054 萬(wàn)人；言語(yǔ)殘疾130 萬(wàn)人；肢體殘疾 2472 萬(wàn)人；智力殘疾 568 萬(wàn)人；精神殘疾 629 萬(wàn)人；多重殘疾 1386 萬(wàn)人。目前我國(guó) 31 個(gè)省、276 個(gè)地市、1197 個(gè)縣級(jí)的殘聯(lián)都開(kāi)通了網(wǎng)站，積極推動(dòng)殘疾人證智能化工作，發(fā)展“互聯(lián)網(wǎng)+殘疾人服務(wù)”。為了讓殘障人士能無(wú)障礙地使用電子政務(wù)，給他們提供更便捷、高效的服務(wù)，政務(wù)網(wǎng)站的無(wú)障礙建設(shè)尤其重要。網(wǎng)站構(gòu)建的所有內(nèi)容都應(yīng)該盡可能具有包容性，易讀性和可讀性，為每一個(gè)人設(shè)計(jì)，為每一個(gè)人服務(wù)。

殘障人士分析

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

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

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

1. 為低視力人士設(shè)計(jì)

使用良好的顏色對(duì)比度

確保顏色對(duì)比度符合 WCAG 2.0（內(nèi)容無(wú)障礙指南）標(biāo)準(zhǔn)，是信息無(wú)障礙中非常重要的一步。如果我們?cè)谠O(shè)計(jì)當(dāng)中做到這一點(diǎn)，也可以保障低視力人士能更好地獲取信息。 根據(jù) WCAG 2.0 的標(biāo)準(zhǔn)：

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

在附屬內(nèi)容中，未激活的界面組件、純粹的裝飾、文本作為標(biāo)志或品牌名稱的一部分，這些情況都沒(méi)有最低對(duì)比度限制。 WebAIM 可以幫助我們測(cè)試對(duì)比度，并且可以在線調(diào)整符合標(biāo)準(zhǔn)的顏色Contrast Grid 可以測(cè)試多個(gè)顏色組合是否符合 WCAG 2.0 的對(duì)比度標(biāo)準(zhǔn)使用 Contrast Grid 測(cè)試了兩個(gè)國(guó)內(nèi)省級(jí)政務(wù)服務(wù) 網(wǎng)站的顏色，發(fā)現(xiàn)基本上只有主要文字和次要文字的顏色能達(dá)到標(biāo)準(zhǔn)，用于網(wǎng)站上大面積的品牌藍(lán)色（鏈接色）在大于 18px 字號(hào)下才符合對(duì)比度要求。英國(guó)政府網(wǎng)是目前全球數(shù)字政府中做的最好的政務(wù)網(wǎng)站，在英國(guó)，政務(wù)服務(wù)是所有服務(wù)里面使用時(shí)間最久、提供量最大的服務(wù)。他們網(wǎng)站設(shè)計(jì)也很注重信息無(wú)障礙，在這方面付出了很大的努力。檢測(cè)后發(fā)現(xiàn)英國(guó)政府網(wǎng)使用的顏色都有足夠高的對(duì)比度，滿足了 WCAG 2.0 的標(biāo)準(zhǔn)，而且整體顏色都使用了偏低飽和度和明度的顏色。加強(qiáng)顏色的對(duì)比度，不只是為了讓低視力人士能更好地使用我們的產(chǎn)品，同時(shí)也可以讓使用較差顯示設(shè)備的用戶、老年人有更好的產(chǎn)品體驗(yàn)。 

2. 為色盲色弱人士設(shè)計(jì)

避免僅使用顏色傳遞信息

顏色在設(shè)計(jì)中起著重要作用，能喚起情感，感受和想法，并且可以幫助增強(qiáng)品牌的信息和感知。然而，當(dāng)用戶無(wú)法看到它們或以不同方式感知它們時(shí)，顏色的作用就會(huì)消失。對(duì)于無(wú)法辨別顏色的色盲色弱人士，如果只用顏色作為傳達(dá)信息，提示信息重要性或區(qū)分視覺(jué)元素的唯一途徑，他們是很難感知的。 Stark（Sketch插件）可以模擬不同類型的色盲色弱人士所看到的效果，來(lái)幫助我們?cè)O(shè)計(jì)某個(gè)政務(wù)網(wǎng)站上的注冊(cè)表單，在沒(méi)有填寫(xiě)任何信息的情況下點(diǎn)擊注冊(cè)按鈕，必填項(xiàng)出現(xiàn)的錯(cuò)誤提示是在下方用了紅色的文字，這種方式對(duì)于普通用戶來(lái)說(shuō)是可以感知的。右側(cè)圖則是模擬紅綠色盲人士看到的效果，這種情況下，錯(cuò)誤提示的引導(dǎo)性就會(huì)降低很多。英國(guó)政府網(wǎng)的錯(cuò)誤提示對(duì)于色盲色弱人士就友好很多，除了紅色的提示文字外，輸入框的邊框還會(huì)加粗處理，并且加上豎線提示對(duì)應(yīng)沒(méi)填寫(xiě)的表單項(xiàng)，提醒用戶注意。除此之外，其實(shí)還有很多視覺(jué)處理的方法來(lái)達(dá)到傳遞信息的目的，例如在輸入框內(nèi)或者提示文字前加上感嘆號(hào)的圖標(biāo)，這種方式對(duì)于普通用戶來(lái)說(shuō)，也會(huì)有更明確的提示。 

3. 為失明人士設(shè)計(jì)

支持鍵盤(pán)導(dǎo)航

網(wǎng)站支持鍵盤(pán)導(dǎo)航是無(wú)障礙很最關(guān)鍵的一個(gè)方面，無(wú)障礙指南中提到要使所有功能都能通過(guò)鍵盤(pán)來(lái)操作，對(duì)于依賴于屏幕閱讀器的失明人士和沒(méi)有精確肌肉控制的人士，都需要使用鍵盤(pán)來(lái)導(dǎo)航內(nèi)容。 當(dāng)你瀏覽網(wǎng)站時(shí)，整個(gè)頁(yè)面導(dǎo)航順序應(yīng)該是有邏輯，可預(yù)測(cè)和直觀的。選項(xiàng)的順序應(yīng)該遵循規(guī)則：從左到右，從上到下，由頂部導(dǎo)航到內(nèi)容內(nèi)容區(qū)，最后是頁(yè)腳。 我們可以嘗試只用鍵盤(pán)操作來(lái)測(cè)試網(wǎng)站，使用 Tab 鍵移動(dòng)焦點(diǎn)，用 Enter 鍵選擇元素。測(cè)試所有的交互元素是否可預(yù)測(cè)且有序。如果可以在沒(méi)有鼠標(biāo)的情況下瀏覽整個(gè)網(wǎng)站的所有內(nèi)容，證明這個(gè)網(wǎng)站已經(jīng)滿足了支持鍵盤(pán)導(dǎo)航的基本要求。 下圖是國(guó)內(nèi)某個(gè)政務(wù)網(wǎng)站首頁(yè)的導(dǎo)航區(qū)，標(biāo)注的數(shù)字是獲取焦點(diǎn)的順序，在用鍵盤(pán)導(dǎo)航的過(guò)程中，整個(gè)頁(yè)面導(dǎo)航順序都比較混亂，某些元素也無(wú)法通過(guò)鍵盤(pán)來(lái)獲取。相反，英國(guó)政府網(wǎng)和澳大利亞政府網(wǎng)首頁(yè)的導(dǎo)航邏輯就會(huì)比較清晰，整個(gè)網(wǎng)站遵循從左到右，從上到下的原則，每個(gè)交互元素都可以通過(guò)鍵盤(pán)來(lái)獲取，讓用戶感知到整個(gè)網(wǎng)站的布局，確定每個(gè)內(nèi)容的位置。用戶通過(guò) Tab 鍵導(dǎo)航網(wǎng)站交互元素時(shí)，焦點(diǎn)就是提供了當(dāng)前所選組件的可視化指示，焦點(diǎn)可幫助用戶了解界面上哪些元素有鍵盤(pán)焦點(diǎn)，并幫助他們了解導(dǎo)航網(wǎng)站時(shí)的位置。很多網(wǎng)站都是用了瀏覽器默認(rèn)的焦點(diǎn)樣式，但我們也可以根據(jù)內(nèi)容設(shè)計(jì)出符合網(wǎng)站風(fēng)格，與品牌相呼應(yīng)的焦點(diǎn)樣式。 英國(guó)政府網(wǎng)就是重新設(shè)計(jì)了焦點(diǎn)樣式，使用黃色來(lái)突出焦點(diǎn)，讓用戶更明確當(dāng)前焦點(diǎn)所在位置。根據(jù)不同的元素，樣式也會(huì)有所變化。蘋(píng)果官網(wǎng)的焦點(diǎn)樣式也進(jìn)行了重新設(shè)計(jì)，在圓角輸入框上焦點(diǎn)也做了相應(yīng)的調(diào)整，使焦點(diǎn)和頁(yè)面元素更為融合。

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

視障人士經(jīng)常會(huì)利用屏幕閱讀器來(lái)“聆聽(tīng)”我們的網(wǎng)站，網(wǎng)站上的文字、圖片、組件等信息都是通過(guò)屏幕閱讀器說(shuō)出來(lái)。這時(shí)候如何為這些非文本內(nèi)容添加描述準(zhǔn)確的輔助替代文本就非常重要。 以下圖為例，左圖搜索框按鈕的替代文本為“按鈕”，這種描述就會(huì)很抽象，增加了視障人士的理解門(mén)檻，容易讓他們產(chǎn)生一個(gè)疑問(wèn)：這是一個(gè)什么作用的按鈕？相對(duì)來(lái)說(shuō)，右圖的處理則清晰很多，按鈕的替代文本很明確地告訴用戶這是一個(gè)搜索按鈕。圖片很多時(shí)候在設(shè)計(jì)中用于傳達(dá)特定的感覺(jué)和渲染氛圍，如果需要通過(guò)用替代本文來(lái)傳達(dá)圖片信息的時(shí)候，我們可以嘗試用簡(jiǎn)練的語(yǔ)言去描述圖片內(nèi)容，讓視障人士能快速獲取信息，在腦海里形成畫(huà)面，而不只是告訴他們這是一張圖片。 如果我們沒(méi)有對(duì)圖片添加替代文本，屏幕閱讀器就會(huì)直接把一串字符的文件名字讀出來(lái)。嘗試打開(kāi)屏幕閱讀器，閉上眼睛去“聽(tīng)”這種圖片，是一種非常難受的體驗(yàn)。除此之外，英國(guó)政府網(wǎng)還有很多細(xì)節(jié)的處理值得學(xué)習(xí)。他們添加的標(biāo)簽描述都很清晰，焦點(diǎn)切換到列表的第一項(xiàng)時(shí)會(huì)告訴用戶這個(gè)列表總共有多少個(gè)項(xiàng)目，下拉菜單目前是一個(gè)怎樣的狀態(tài)，讓視障人士對(duì)于整個(gè)網(wǎng)站有一個(gè)布局感受，同時(shí)也大大提高了他們安全感。

提供多種驗(yàn)證碼方式

賬號(hào)注冊(cè)是用戶開(kāi)始業(yè)務(wù)辦理的第一步，可是往往這一步就給了視障人士一個(gè)很大阻力。目前很多政務(wù)服務(wù)網(wǎng)注冊(cè)流程的驗(yàn)證方式都只提供圖形驗(yàn)證碼，但屏幕閱讀器是無(wú)法識(shí)別驗(yàn)證碼中的文本信息。如果注冊(cè)流程都有障礙的話，其他業(yè)務(wù)辦理即使有做無(wú)障礙改造，對(duì)視障人士來(lái)說(shuō)都是沒(méi)有意義的。我們除了圖形驗(yàn)證碼之外，還應(yīng)該提供多種驗(yàn)證方式讓用戶選擇，如手機(jī)驗(yàn)證碼、語(yǔ)音驗(yàn)證碼等。蘋(píng)果網(wǎng)站的注冊(cè)流程中，驗(yàn)證方式除了提供圖形驗(yàn)證碼之外，還會(huì)提供語(yǔ)音驗(yàn)證碼。

快速訪問(wèn)內(nèi)容

對(duì)于只使用鍵盤(pán)導(dǎo)航的用戶來(lái)說(shuō)，在熟悉網(wǎng)站后，他們是希望直接訪問(wèn)頁(yè)面內(nèi)容的。但是很多網(wǎng)站的頂部導(dǎo)航存在多個(gè)菜單，在用戶獲取頁(yè)面內(nèi)容之前，他們需要逐個(gè)切換鏈接才可以去到頁(yè)面內(nèi)容部分，打開(kāi)一個(gè)新的頁(yè)面，又是重復(fù)這樣的步驟。 面對(duì)這樣的問(wèn)題，我們可以提供更友好的解決方案。當(dāng)用戶開(kāi)始使用鍵盤(pán)導(dǎo)航頁(yè)面時(shí)，提供一個(gè)“跳至內(nèi)容”的鏈接，直接跳過(guò)每個(gè)頁(yè)面重復(fù)的內(nèi)容，提高視障人士或者鍵盤(pán)使用者的操作效率。在使用鍵盤(pán)導(dǎo)航時(shí)，F(xiàn)acebook 還提供了頁(yè)面內(nèi)模塊和其他頁(yè)面的導(dǎo)航菜單，讓用戶可以更快速地跳到指定的內(nèi)容上，使用起來(lái)更高效。 

4. 為聽(tīng)力障礙人士設(shè)計(jì)

為視頻添加字幕

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

5. 為運(yùn)動(dòng)障礙人士設(shè)計(jì)

支持鍵盤(pán)導(dǎo)航

部分運(yùn)動(dòng)障礙人士如果無(wú)法控制鼠標(biāo)，其實(shí)也是需要使用鍵盤(pán)來(lái)導(dǎo)航網(wǎng)站的，網(wǎng)站支持鍵盤(pán)導(dǎo)航不只是為了盲人用戶而設(shè)定，對(duì)于其他的殘障人士也是非常重要。

交互元素易于點(diǎn)擊

在設(shè)計(jì)控件時(shí)，也應(yīng)該更加關(guān)注運(yùn)動(dòng)障礙人士和老年用戶的使用體驗(yàn)，適當(dāng)增加可點(diǎn)擊的目標(biāo)區(qū)域，讓按鈕、菜單選項(xiàng)和鏈接足夠大，以便他們更容易操作。 

6. 為讀寫(xiě)障礙人士設(shè)計(jì)

圖形、圖片和文字結(jié)合的排版

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

保持一致性的對(duì)齊方式

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

7. 為老年人設(shè)計(jì)

使用較大的字號(hào)

為了確保老年人用戶能清晰瀏覽網(wǎng)站，而且考慮到并不是每個(gè)用戶都使用高分辨率的顯示設(shè)備，大字號(hào)的界面對(duì)于他們來(lái)說(shuō)是很重要的。同時(shí)，我們還需要避免出現(xiàn)擁擠的大段文字，盡量把信息進(jìn)行合理的分解，增加留白空間，通過(guò)排版組合讓用戶更清晰明確地獲取信息。 英國(guó)政務(wù)網(wǎng)的文字體系里，整理都選用了較大的字號(hào)，最小的正文也使用到 19px字號(hào)。考慮到用戶對(duì)于字號(hào)大小顯示的不同需求，香港政府網(wǎng)的頂部導(dǎo)航還提供了字形大小的入口，指引用戶在不同瀏覽器下如何設(shè)置字號(hào)大小，讓他們可以設(shè)置最適合自己閱讀的顯示效果。

減少手動(dòng)輸入

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

瀏覽路徑簡(jiǎn)單明確

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

小結(jié)

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

為視障人士設(shè)計(jì)

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

為聽(tīng)障人士設(shè)計(jì)

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

為運(yùn)動(dòng)障礙人士設(shè)計(jì)

• 支持鍵盤(pán)導(dǎo)航
• 交互元素易于點(diǎn)擊

為讀寫(xiě)障礙人士設(shè)計(jì)

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

為老年人設(shè)計(jì)

• 使用較大的字號(hào)
• 瀏覽路徑簡(jiǎn)單明確
• 減少手動(dòng)輸入
• 交互元素易于點(diǎn)擊

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

參考文獻(xiàn)

《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)容無(wú)障礙指南 (WCAG) 2.0》

本文轉(zhuǎn)自 Tencent CDC