中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作為設(shè)計(jì)師，我們有能力和責(zé)任確保每個(gè)人都能訪問(wèn)我們?cè)O(shè)計(jì)的內(nèi)容，無(wú)論其能力，背景或使用場(chǎng)景如何，做好產(chǎn)品可訪問(wèn)性可以為每個(gè)人帶來(lái)更好的體驗(yàn)。

如何做到為所有人設(shè)計(jì)？

數(shù)字產(chǎn)品可訪問(wèn)性是指構(gòu)建可供廣泛人群使用的數(shù)字內(nèi)容和應(yīng)用的實(shí)踐，包括具有視覺(jué)、運(yùn)動(dòng)、聽(tīng)覺(jué)、語(yǔ)言或認(rèn)知障礙的個(gè)人。

使網(wǎng)站為所有人設(shè)計(jì)，被人過(guò)度神話了，認(rèn)為那樣做既困難成本也高，但實(shí)際上并非如此。從設(shè)計(jì)初期就開(kāi)始考慮產(chǎn)品可訪問(wèn)性，其實(shí)并不會(huì)增加額外的功能或內(nèi)容，因此也不應(yīng)該會(huì)有額外的成本和努力。

但是，要修復(fù)一個(gè)已經(jīng)無(wú)法訪問(wèn)的網(wǎng)站可能就需要費(fèi)一番精力了。我以前在Carbon Health工作時(shí)，我們使用AXE 插件來(lái)檢查了網(wǎng)站的可訪問(wèn)性，我們發(fā)現(xiàn)僅在主頁(yè)上就28個(gè)違規(guī)行為需要解決。

雖然聽(tīng)起來(lái)很復(fù)雜，但我們發(fā)現(xiàn)這些問(wèn)題并不難以糾正，只是需要花費(fèi)一些時(shí)間和成本來(lái)研究這些問(wèn)題，最后差不多幾天功夫我們就全部解決了。

我想分享一些我們?cè)眠^(guò)的簡(jiǎn)單步驟，來(lái)改善你的網(wǎng)站可訪問(wèn)性。這些原則將側(cè)重于網(wǎng)站和移動(dòng)端。

在開(kāi)始之前，先來(lái)談?wù)劄槭裁醋鲞@些優(yōu)化很重要？

為什么設(shè)計(jì)需要考慮可訪問(wèn)性？?

作為設(shè)計(jì)師，我們有能力和責(zé)任確保每個(gè)人都能訪問(wèn)我們?cè)O(shè)計(jì)的內(nèi)容，無(wú)論其能力，背景或使用場(chǎng)景如何，做好產(chǎn)品可訪問(wèn)性可以為每個(gè)人帶來(lái)更好的體驗(yàn)。

美國(guó)有超過(guò)5600萬(wàn)人（近五分之一）和全世界超過(guò)10億殘疾人。 在2017年，有814起網(wǎng)站可訪問(wèn)性訴訟在聯(lián)邦和州法院提起，僅這兩項(xiàng)數(shù)據(jù)就可以讓我們相信設(shè)計(jì)可用性的重要性。

可訪問(wèn)性還有一個(gè)很好的商業(yè)案例：研究表明，可訪問(wèn)的網(wǎng)站有更好的搜索結(jié)果，能夠覆蓋更多的受眾，對(duì)SEO友好，下載時(shí)間更快，同時(shí)還鼓勵(lì)使用更好的代碼結(jié)構(gòu)，他們也總是會(huì)有更好的可用性。

以下講到的7個(gè)方面是很容易做到，可以幫助你的產(chǎn)品更接近滿足Web內(nèi)容可訪問(wèn)性規(guī)范（WCAG 2.0）AA級(jí)標(biāo)準(zhǔn)。同時(shí)建議最好也去研究下最常用的輔助功能——包括屏幕閱讀器，屏幕放大器和語(yǔ)音識(shí)別工具。

1. 增加足夠的顏色對(duì)比度

對(duì)Guadalupe來(lái)說(shuō)，按鈕具有更好的色彩對(duì)比度將更易閱讀

顏色對(duì)比是一個(gè)經(jīng)常被忽視的Web可訪問(wèn)性問(wèn)題，如果對(duì)比度低，弱視的人很難從背景顏色中讀取文本。 在關(guān)于視力損傷和失明的情況說(shuō)明書(shū)中，世界衛(wèi)生組織（WHO）估計(jì)有2.17億人患有中度至重度視力障礙。因此，考慮文本和背景之間的充分對(duì)比是至關(guān)重要的。

根據(jù)W3C規(guī)定，文本與其背景之間的對(duì)比度應(yīng)該至少為4.5比1（符合AA級(jí)別）。對(duì)于較大和較重的字體，比率相對(duì)寬泛一些，因?yàn)樗鼈冊(cè)谳^低對(duì)比度下也能容易閱讀。比如：使用的字體為18pt或14pt粗體，則最小對(duì)比度將降至3比1。

有些工具可以幫你快速檢查，如果你使用的是Mac，建議使用對(duì)比應(yīng)用（https://usecontrast.com），使用此工具可以使用顏色選擇器立即檢查對(duì)比度。如果您想獲得更詳細(xì)的分?jǐn)?shù)，我建議您在WebAIM（https://webaim.org/resources/contrastchecker）顏色對(duì)比檢查器上輸入顏色值。

此工具將計(jì)算常規(guī)和較大文本，得出級(jí)別（A，AA，AAA）的分?jǐn)?shù)，你可以更改顏色值并實(shí)時(shí)查看結(jié)果。

參考資料：WCAG Visual Contrast

2. 不能僅使用顏色來(lái)區(qū)分關(guān)鍵信息

對(duì)René來(lái)說(shuō)，當(dāng)圖形對(duì)色盲患者友好時(shí)，他會(huì)感到很開(kāi)心！

當(dāng)你在傳達(dá)重要的事情、響應(yīng)動(dòng)作或提示時(shí)，不要把顏色作為唯一的視覺(jué)線索，弱視或色盲的人可能很難理解你的內(nèi)容。

嘗試使用顏色以外的符號(hào)，例如：文本標(biāo)簽或圖案。在界面上顯示錯(cuò)誤時(shí)，不要太依賴顏色，添加圖標(biāo)或在消息中寫(xiě)上一個(gè)標(biāo)題，考慮為段落中的鏈接文本添加視覺(jué)提示（如：字體加粗或增加下劃線），以便鏈接能突出顯示。

如果只使用顏色來(lái)區(qū)分?jǐn)?shù)據(jù)，那么具有更復(fù)雜信息(如柱狀圖和曲線圖)的元素就特別難閱讀。使用其他視覺(jué)元素來(lái)傳達(dá)信息，如形狀、標(biāo)簽和大小。還可以嘗試將多種模式進(jìn)行組合，以使差異更明顯。

Trello的色盲模式（https://twitter.com/trello/status/543420024166174721?lang=en）就是一個(gè)很好的例子，啟用后，通過(guò)添加紋理標(biāo)簽?zāi)茏尵W(wǎng)站變得更容易訪問(wèn)。

一個(gè)很好的技巧是將你設(shè)計(jì)的內(nèi)容以黑白模式打印出來(lái)，看看你是否仍然可以理解其中的所有內(nèi)容。你還可以使用Color Oracle（下載鏈接：http://colororacle.org）這樣的應(yīng)用，它可以實(shí)時(shí)顯示具有常見(jiàn)色覺(jué)障礙的人看到的內(nèi)容，這些提示可幫助你確保站點(diǎn)中的信息障礙與顏色無(wú)關(guān)。

參考資料：WCAG Visual Contrast Without Color

3. 設(shè)計(jì)可用焦點(diǎn)狀態(tài)

Tyler 的假手可以輕松切換按鈕焦點(diǎn)狀態(tài)

你是否注意到有時(shí)會(huì)出現(xiàn)在鏈接，輸入框和按鈕周?chē)乃{(lán)色輪廓？

這些藍(lán)色輪廓稱為焦點(diǎn)指示符，默認(rèn)情況下，瀏覽器使用CSS偽類在元素選中時(shí)顯示這些輪廓。你可能會(huì)發(fā)現(xiàn)這些默認(rèn)焦點(diǎn)指示符不是很漂亮，然后一門(mén)心思的想要隱藏掉它們。但是，如果你去掉了這些默認(rèn)樣式，請(qǐng)務(wù)必將其替換為其他內(nèi)容。

焦點(diǎn)指示符可幫助人們了解哪個(gè)元素具有鍵盤(pán)焦點(diǎn)，并幫助他們?cè)跒g覽站點(diǎn)時(shí)清楚自己的位置。這些都是對(duì)盲人，需要屏幕閱讀器，行動(dòng)不便，受過(guò)腕管損傷以及喜歡這種導(dǎo)航的高級(jí)用戶有用的技術(shù)。

甚至我們中的一些人，也會(huì)使用鍵盤(pán)作為他們?yōu)g覽網(wǎng)頁(yè)的主要方式！應(yīng)該可以聚焦的元素有：鏈接、表單字段、小部件、按鈕和菜單項(xiàng)，他們需要有一個(gè)焦點(diǎn)指示符，使它們看起來(lái)與周?chē)脑夭煌?/p>

你可以設(shè)計(jì)一個(gè)符合你網(wǎng)站風(fēng)格的焦點(diǎn)指示符，并與你的品牌保持風(fēng)格一致。創(chuàng)建一個(gè)高度可見(jiàn)的狀態(tài)，并具有良好的對(duì)比度，使得它從其他內(nèi)容中脫穎而出。

參考資料：W3C Focus Visible

4. 在表單和輸入項(xiàng)外添加標(biāo)簽和說(shuō)明

Mr. López 不斷嘗試將占位符文本轉(zhuǎn)換為列表項(xiàng)標(biāo)簽

僅使用占位符文本作為標(biāo)簽是設(shè)計(jì)表單時(shí)最大的錯(cuò)誤之一，當(dāng)位置有限或想讓設(shè)計(jì)更簡(jiǎn)單和現(xiàn)代時(shí)，我們可能會(huì)想要順應(yīng)這種趨勢(shì)。占位符文本通常是灰色的，對(duì)比度不高，因此很難閱讀。

如果你像我一樣，你通常會(huì)忘記你在寫(xiě)什么，所以一旦文本消失，很難知道這些字段是什么。使用屏幕閱讀器的人，通常使用Tab鍵瀏覽表單以跳過(guò)表單控件。依賴<label>元素讀取控件，通常會(huì)跳過(guò)任何非標(biāo)簽文本（如：占位符文本）。

始終幫助人們了解他們應(yīng)該做什么，并以一種明確的形式給出。最好是標(biāo)簽不會(huì)消失，即使這個(gè)人正在輸入信息，人們不應(yīng)該失去他們的寫(xiě)作背景。當(dāng)設(shè)計(jì)師在他們的表單中隱藏描述時(shí)，其實(shí)是犧牲了可用性而追求簡(jiǎn)潔。

這種做法并不意味著你必須用不必要的信息來(lái)混淆你的設(shè)計(jì)，只是確保提供必要的線索，太多的指導(dǎo)性文本可能和太少的問(wèn)題一樣，目標(biāo)是確認(rèn)每個(gè)人有足夠的信息，來(lái)完成他們的任務(wù)而沒(méi)有障礙。

參考資料：WebAIM Creating Accessible Forms

5. 為圖片和其他非文本內(nèi)容準(zhǔn)備有用的替代文本

Robin在圖片中發(fā)現(xiàn)了一個(gè)新的朋友

弱視的人經(jīng)常利用屏幕閱讀器來(lái)“聽(tīng)”網(wǎng)頁(yè)。這些工具會(huì)將文本轉(zhuǎn)換成語(yǔ)音，這樣人們就可以在網(wǎng)站上聽(tīng)到單詞。

有兩種方法可以顯示替代文本：

1. 在圖片的屬性 <alt>中；
2. 在圖片本身的背景或環(huán)境中。

嘗試描述圖片中發(fā)生的事情，以及它對(duì)故事的重要性，而不僅僅是說(shuō)“圖片”。
如果圖片純粹是裝飾性的，或者由于上下文已經(jīng)解釋了內(nèi)容而變得多余，嘗試添加一個(gè)空的<alt>屬性將使屏幕閱讀器跳過(guò)它。如果不寫(xiě)任何替代文字，一些屏幕閱讀器將讀取文件名，這樣的用戶體驗(yàn)會(huì)很糟糕。

谷歌正在研究一種圖像字幕人工智能，它能以94%的準(zhǔn)確度描述照片（https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy）。這個(gè)模型是開(kāi)源的，仍在研究中，希望我們能看到它在不同的產(chǎn)品中使用。與此同時(shí)，我們應(yīng)該在我們的內(nèi)容中手動(dòng)添加描述圖像含義和功能的文本。

參考資料：W3C Using Alt Attributes

6. 在內(nèi)容上使用正確的標(biāo)記

Noah 一直想成為一名建筑師

標(biāo)題，標(biāo)記內(nèi)容開(kāi)始的地方。它們是給文本加上的標(biāo)簽，用來(lái)定義其風(fēng)格和目的，標(biāo)題還創(chuàng)建了頁(yè)面內(nèi)容的層次結(jié)構(gòu)。

大字號(hào)的標(biāo)題有助于讀者更好地理解內(nèi)容的順序，同樣，屏幕閱讀器也使用標(biāo)題標(biāo)簽來(lái)閱讀內(nèi)容。這樣，弱視的人通過(guò)閱讀內(nèi)容中的每個(gè)標(biāo)題來(lái)獲得頁(yè)面的大致內(nèi)容。

在開(kāi)發(fā)站點(diǎn)時(shí)使用適當(dāng)?shù)慕Y(jié)構(gòu)元素很重要，HTML元素向?yàn)g覽器傳達(dá)它們包含的內(nèi)容類型，瀏覽器應(yīng)如何呈現(xiàn)或處理這些內(nèi)容。頁(yè)面的組件和結(jié)構(gòu)形成內(nèi)容樹(shù)，讀取內(nèi)容樹(shù)是屏幕閱讀器的強(qiáng)大功能，它們被盲人使用，使得他們可以“聽(tīng)”頁(yè)面內(nèi)容。

不正確使用標(biāo)記會(huì)影響可訪問(wèn)性，不要僅將HTML標(biāo)記用于樣式效果，屏幕閱讀器通過(guò)標(biāo)題結(jié)構(gòu)（真正的標(biāo)題，而不僅僅是大字號(hào)和粗體樣式的文本）按層次結(jié)構(gòu)瀏覽網(wǎng)頁(yè)。 使用你網(wǎng)站的用戶可以收聽(tīng)所有標(biāo)題的列表，按標(biāo)題類型跳轉(zhuǎn)內(nèi)容，或直接導(dǎo)航到頂級(jí)標(biāo)題<h1>。

（譯者注：以前我最初寫(xiě)重構(gòu)代碼的時(shí)候，就困惑一個(gè)問(wèn)題，h1-h5標(biāo)簽除了自帶樣式和利于SEO等作用外，還有什么其他用途？看了本文才知道，原來(lái)還有幫助盲人聽(tīng)書(shū)這么重要的作用）

參考資料：WebAIM Semantic Structure

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

Gael 在聽(tīng)網(wǎng)站的時(shí)候使用鍵盤(pán)導(dǎo)航

鍵盤(pán)可訪問(wèn)性是Web可訪問(wèn)性的最關(guān)鍵方面之一，有運(yùn)動(dòng)障礙的人，依賴于屏幕閱讀器的盲人，沒(méi)有精確肌肉控制的人，甚至高級(jí)用戶都依賴鍵盤(pán)來(lái)導(dǎo)航內(nèi)容。

如果你像我一樣，經(jīng)常使用鍵盤(pán)上的Tab鍵來(lái)瀏覽網(wǎng)頁(yè)上的交互元素：鏈接、按鈕或輸入項(xiàng)，我們前面討論的焦點(diǎn)狀態(tài)，提供了當(dāng)前選擇的組件的可視化指示器。

當(dāng)你瀏覽頁(yè)面時(shí)，交互元素的順序很重要，導(dǎo)航必須有邏輯且直觀。選項(xiàng)卡順序應(yīng)遵循頁(yè)面的閱讀順序：從左到右、從上到下——標(biāo)題、主導(dǎo)航、內(nèi)容按鈕和輸入項(xiàng)，最后是頁(yè)腳。

一個(gè)好的做法是僅使用鍵盤(pán)測(cè)試你的網(wǎng)站，使用Tab鍵選擇鏈接和表單，使用Enter鍵測(cè)試以選擇元素。 驗(yàn)證所有交互式組件是否可控且有序，如果你可以在沒(méi)有鼠標(biāo)的情況下瀏覽所有網(wǎng)站，那么你的網(wǎng)站就做的很棒了！

最后一點(diǎn)，但并非不重要，請(qǐng)注意導(dǎo)航的大小——包括鏈接的數(shù)量和文本的長(zhǎng)度。對(duì)于有運(yùn)動(dòng)障礙的人來(lái)說(shuō)，通過(guò)長(zhǎng)菜單進(jìn)行切換可能會(huì)很困難，對(duì)于使用屏幕閱讀器的人來(lái)說(shuō)，聽(tīng)冗長(zhǎng)的鏈接可能很麻煩——盡量保持簡(jiǎn)潔。

提供ARIA Landmarks（https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/aria-landmarks/）或HTML5結(jié)構(gòu)元素（如<main>或<nav>）將使導(dǎo)航更容易。

參考資料：W3C Keyboard

超越這些準(zhǔn)則

這七條準(zhǔn)則是一個(gè)很好的開(kāi)始，如果你想要做更多的事情來(lái)使你的產(chǎn)品更容易訪問(wèn)，我鼓勵(lì)你去做以下一些事：

• 確立一個(gè)可訪問(wèn)性審查制度 ?使用審查制度來(lái)確定你的產(chǎn)品，是否與輔助技術(shù)兼容并符合WCAG 2.0 ?AA級(jí)別標(biāo)準(zhǔn)，使用審查結(jié)果修復(fù)問(wèn)題并進(jìn)行再次測(cè)試。
• 任命審查員，你可以任命你公司的人做經(jīng)常性的無(wú)障礙審查，可以是你的QA團(tuán)隊(duì)中的某個(gè)人。如果找不到有經(jīng)驗(yàn)的人，你可以雇傭一個(gè)外部供應(yīng)商來(lái)做。
• 讓可訪問(wèn)性成為你設(shè)計(jì)研究的一部分，在做研究時(shí)，驗(yàn)證你關(guān)于可訪問(wèn)性的假設(shè)是否正確，以及是否存在任何改進(jìn)的潛在機(jī)會(huì)。招募?xì)埣踩丝赡苄枰龈嗟墓ぷ?，?qǐng)毫不猶豫地聯(lián)系協(xié)會(huì)和社區(qū)，人們?cè)敢馓峁椭?/li>

總結(jié)

如以上所述，七個(gè)指導(dǎo)原則將幫助你的web設(shè)計(jì)，更接近于滿足web內(nèi)容可訪問(wèn)性指導(dǎo)方針AA級(jí)別標(biāo)準(zhǔn)（https://www.w3.org/TR/WCAG21）。

我正在努力改進(jìn)可訪問(wèn)性設(shè)計(jì)，也正在努力練習(xí)我講到的東西。我曾經(jīng)認(rèn)為它太難了并且也不重視，其實(shí)我誤解了，如今我邀請(qǐng)你同我一起，將可訪問(wèn)性設(shè)計(jì)加入到設(shè)計(jì)流程中，并繼續(xù)討論可訪問(wèn)性的重要性。

作為設(shè)計(jì)師，我們有責(zé)任倡導(dǎo)無(wú)障礙設(shè)計(jì)。有了它，我們使技術(shù)能為所有人服務(wù)，不管他們的能力、經(jīng)濟(jì)狀況、年齡、教育或地域。

做有責(zé)任感的設(shè)計(jì)師，謝謝！

題外話

原作者的文章題目是：《Designing for accessibility is not that hard》，意思是《為可訪問(wèn)性設(shè)計(jì)沒(méi)有那么難》。其實(shí)我一開(kāi)始是有把可訪問(wèn)性和可用性混淆的，后面查了相關(guān)資料，才發(fā)現(xiàn)這確實(shí)是2個(gè)不同的概念，所以想在文末解釋下可用性和可訪問(wèn)性的區(qū)別。

可用性：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過(guò)程中用戶的主觀感受可好，是從用戶的角度來(lái)看產(chǎn)品的質(zhì)量?？捎眯院靡馕吨a(chǎn)品質(zhì)量高，是企業(yè)的核心競(jìng)爭(zhēng)力。

可訪問(wèn)性：Web內(nèi)容對(duì)于殘障用戶的可閱讀和可理解性。

1. 無(wú)論用戶是否殘障，都得通過(guò)用戶代理（User Agent）來(lái)訪問(wèn)Web內(nèi)容。因此要提高可訪問(wèn)性，首先得考慮各種用戶代理 ：桌面瀏覽器、語(yǔ)音瀏覽器、移動(dòng)電話、車(chē)載個(gè)人電腦等等。在Google, 專門(mén)聘請(qǐng)了一些殘障雇員，來(lái)幫助提高產(chǎn)品的可訪問(wèn)性。
2. 還得考慮用戶訪問(wèn)Web內(nèi)容時(shí)的環(huán)境限制 。比如：嘈雜的環(huán)境、過(guò)暗或過(guò)亮的房間、或者是免提等各種情況。這是更高一層次的可訪問(wèn)性要求，做到了，能造就產(chǎn)品在特定領(lǐng)域的核心競(jìng)爭(zhēng)力。

想進(jìn)一步深入了解的話，有篇文章也可以推薦大家看看，可用性和可訪問(wèn)性之間的差異是什么？https://www.jianshu.com/p/8a0cd5403ffc

譯者：彩云Sky，微信公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 PEXELS，基于 CC0 協(xié)議