訪問(wèn)的網(wǎng)站是支持所有的瀏覽器類型和所有殘疾人用戶。這對(duì)W3C是一個(gè)很大的話題，它是在每年的普及。

無(wú)障礙設(shè)計(jì)是困難的。有很多目標(biāo)要求考慮。但即使是在正確的方向上嬰兒的步驟，可以使一個(gè)不同的世界。

本指南中的我想考慮可達(dá)性的價(jià)值，它涉及到響應(yīng)式設(shè)計(jì)。大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師與響應(yīng)的布局可以去了，所以如果你可以添加到您的工作流訪問(wèn)你會(huì)達(dá)到一個(gè)更廣泛的觀眾。

響應(yīng)式設(shè)計(jì)原則

一個(gè)響應(yīng)式布局的目標(biāo)是在每一個(gè)設(shè)備的功能。無(wú)論屏幕大小和分辨率，你應(yīng)該總是使用快速響應(yīng)的設(shè)計(jì)。

為你的網(wǎng)站的每一個(gè)方面的可用性的關(guān)注。這可能是更容易開(kāi)始移動(dòng)第一因?yàn)槟阌邢薜脑O(shè)計(jì)特點(diǎn)，然后移動(dòng)到桌面，支持更大的屏幕尺寸。

在這個(gè)過(guò)程中你也會(huì)考慮可達(dá)性和人們?nèi)绾闻τ媚愕木W(wǎng)站在小屏幕上。如果你的移動(dòng)布局增加文字大??？應(yīng)的按鈕/鏈接更容易點(diǎn)擊？

有一定的主題，你需要考慮網(wǎng)站的響應(yīng)和訪問(wèn)。這里有一些需要考慮的要點(diǎn)：

印刷對(duì)比度

提供足夠的白色空間

列和網(wǎng)格

導(dǎo)航行為

動(dòng)態(tài)特征（圖像滑塊，視頻，等等）

所有這些功能時(shí)必須考慮創(chuàng)建一個(gè)響應(yīng)性和可訪問(wèn)的網(wǎng)站。二者不直接相關(guān)，但是當(dāng)他們結(jié)合創(chuàng)造一個(gè)和諧的界面，功能很好的人。

無(wú)障礙設(shè)計(jì)

有很好的理由去通過(guò)一個(gè)可訪問(wèn)性檢查表考慮如何訪問(wèn)你的網(wǎng)站應(yīng)該。這可能與基本特征為屏幕閱讀器的圖像ALT標(biāo)簽。它也可能涉及到色彩的對(duì)比對(duì)于有視力障礙的用戶。

任何事情之前，你應(yīng)該首先考慮什么類型的可訪問(wèn)性問(wèn)題你愿意支持設(shè)計(jì)。

例如常見(jiàn)的可達(dá)性問(wèn)題是誰(shuí)不上網(wǎng)鼠標(biāo)用戶。在這種情況下，您可以創(chuàng)建鍵盤快捷鍵使用屬性TAB順序。這樣的人沒(méi)有老鼠可以瀏覽網(wǎng)站只是他們的鍵盤。

現(xiàn)在考慮智能手機(jī)和平板電腦用戶誰(shuí)沒(méi)有鼠標(biāo)或鍵盤。如果你的布局是響應(yīng)那就適合這些較小的觸摸屏設(shè)備。但布局可用？

都是主要的元素tappable或紙質(zhì)文檔？有足夠大的tappable領(lǐng)域大多數(shù)用戶有自己的自來(lái)水在合適的地方注冊(cè)？

頁(yè)面的某些領(lǐng)域需要比別人更多的關(guān)注。但是如果你愿意把你的腳趾到小通達(dá)我建議開(kāi)始慢慢地。你最好一次支持的一個(gè)特點(diǎn)。

我真的很喜歡WebAIM項(xiàng)目因?yàn)樗墓ぞ吆唾Y源，可以幫助你找到訪問(wèn)界面元素。也一定要看看這些相關(guān)的資源。

knowbility

Web標(biāo)準(zhǔn)項(xiàng)目

無(wú)障礙網(wǎng)頁(yè)設(shè)計(jì)的可用性指南

導(dǎo)航結(jié)構(gòu)

盡可能嘗試所有的導(dǎo)航菜單恢復(fù)盡可能簡(jiǎn)單。這并不總是最好有多級(jí)下拉菜單響應(yīng)設(shè)計(jì)。

有些網(wǎng)站喜歡面包多頁(yè)面設(shè)計(jì)使瀏覽網(wǎng)站更容易一點(diǎn)。例如nngroup網(wǎng)站的所有主要部分的頂部導(dǎo)航。但有些部分像報(bào)告頁(yè)面包括一個(gè)報(bào)告類別的側(cè)邊欄導(dǎo)航。

這使用戶可以訪問(wèn)子環(huán)節(jié)時(shí)，他們需要的，但是他們?cè)陔[藏頁(yè)面的鏈接將無(wú)關(guān)的內(nèi)容。

下拉菜單也可以。但你必須更細(xì)致、周到的用戶可能不在瀏覽互聯(lián)網(wǎng)專家。

滑動(dòng)凈值目標(biāo)網(wǎng)站的是一個(gè)很好的例子。在你得到一個(gè)大的類別下拉菜單桌面版本的網(wǎng)站。

但在較小的屏幕菜單轉(zhuǎn)換成一個(gè)單一的鏈接標(biāo)記為“按類別瀏覽。當(dāng)用戶點(diǎn)擊它會(huì)與所有的類別列為鏈接打開(kāi)一次菜單。

這工作不像典型的下拉而是轉(zhuǎn)換成側(cè)滑動(dòng)菜單。這種效果是因?yàn)槊恳粋€(gè)環(huán)節(jié)都有一個(gè)大的tappable區(qū)，而不是一個(gè)小的子菜單圖標(biāo)添加到主菜單。

沃爾瑪有一個(gè)非常類似的訪問(wèn)菜單，移動(dòng)通過(guò)一個(gè)水龍頭類。

如果你建立與鍵盤輔助然后航行秩序是非常重要的一個(gè)導(dǎo)航。這可通過(guò)CSS和有很多指南為了幫助這項(xiàng)任務(wù)。這個(gè)TAB順序?qū)傩砸彩欠浅Ｖ匾逆I盤導(dǎo)航。

另一種方法是跳到導(dǎo)航鏈接，很多網(wǎng)站都有屏幕閱讀器和瀏覽器沒(méi)有CSS。這個(gè)工作最好在較小的響應(yīng)布局，導(dǎo)航往往停留在一個(gè)位置（通常是頁(yè)眉或頁(yè)腳）。

同理，你可以添加一個(gè)滾動(dòng)到頂部的鏈接保持固定在屏幕的底部。這讓游客返回頁(yè)面頂部的，無(wú)論他們?cè)趦?nèi)容。

如果你正在尋找其他的導(dǎo)航輔助資源，我強(qiáng)烈推薦以下相關(guān)文章。

30無(wú)障礙網(wǎng)頁(yè)提示

讓你的網(wǎng)站訪問(wèn)

創(chuàng)建一個(gè)完全可訪問(wèn)的導(dǎo)航欄

觸摸支持UI

觸摸支持Web可訪問(wèn)性是至關(guān)重要的。一些網(wǎng)民甚至沒(méi)有臺(tái)式電腦，所以他們唯一的方式是通過(guò)觸摸屏設(shè)備在線。

你網(wǎng)站上的所有元素應(yīng)該通過(guò)觸摸或滑動(dòng)的交互。鍵盤可訪問(wèn)性是同樣重要的觸摸支持，雖然他們的目標(biāo)受眾的不同。

在一個(gè)網(wǎng)頁(yè)需要用戶交互的許多動(dòng)態(tài)因素。他們中的大多數(shù)已經(jīng)從鼠標(biāo)點(diǎn)擊在臺(tái)式機(jī)/筆記本環(huán)境演變。

如果你的布局會(huì)響應(yīng)你的動(dòng)態(tài)元素也應(yīng)該。這里有一些動(dòng)態(tài)元素，應(yīng)該支持觸摸輸入的例子。

幻燈片

視頻播放器

lightboxes /投資組合

下拉式導(dǎo)航

最難的部分是獲得足夠的支持，在所有觸摸屏設(shè)備。容易的部分是你可以找到免費(fèi)資源，為你做這些事，噸。

JavaScript最近幾年發(fā)展迅速，許多幻燈片插件是默認(rèn)支持觸摸。

swipeshow和slides.js是兩個(gè)不可思議的選擇，都是自由的，支持所有主要瀏覽器。

有一點(diǎn)要記住的關(guān)于智能手機(jī)是他們?nèi)狈彝Ｊ录｜c(diǎn)擊一個(gè)元素通常被認(rèn)為是一個(gè)積極的事件，所以重要的是要處理的事件的準(zhǔn)確在觸摸設(shè)備

同時(shí)思考如何填充影響你的導(dǎo)航鏈接。在一個(gè)鏈接的贅肉也讓用戶點(diǎn)擊和瀏覽網(wǎng)站更容易，但它也需要更多的空間。你會(huì)發(fā)現(xiàn)，甜蜜點(diǎn)的所有的鏈接，他們是足夠大的挖掘，但是不能太大以至于超過(guò)屏幕。

高興的重排

重新排列的內(nèi)容，為游客提供了一個(gè)快速的方法來(lái)瀏覽網(wǎng)站。離開(kāi)與線高度和較大的文本很多房間。

想在你的布局相比是更明智的。文字應(yīng)該很容易閱讀和瀏覽的距離。

這個(gè)君子的主頁(yè)是有很多填充的高對(duì)比度的文本一個(gè)像樣的例子。屏幕閱讀器可以使這種對(duì)比毫無(wú)意義，但絕大多數(shù)用戶都有CSS啟用。

文本的對(duì)比度是一個(gè)相當(dāng)復(fù)雜的公式由W3C審查創(chuàng)造。而不是運(yùn)行這個(gè)公式自己只是利用像一個(gè)工具斯努克對(duì)比檢查

你只需輸入背景和前景顏色為獲得比轉(zhuǎn)換的領(lǐng)域。這會(huì)告訴你如果顏色組合通過(guò)WCAG 2合規(guī)以及一些指標(biāo)。

這也許是一個(gè)你可以為你的網(wǎng)站測(cè)試的最簡(jiǎn)單的事情。這是超級(jí)容易檢查顏色，它更容易為高對(duì)比度的修正。只要將塔周圍的酒吧里要么使文本或減輕背景（或反之亦然）。

我想說(shuō)的內(nèi)容，最后一點(diǎn)是HTML的組織。當(dāng)CSS是禁用的用戶只是得到一個(gè)原始HTML頁(yè)面。這可能不漂亮，但很容易從可達(dá)性立場(chǎng)消耗。

你如何編寫HTML將如何影響布局時(shí)出現(xiàn)的CSS被刪除。

例如這個(gè)堆棧的答案給出了一個(gè)解決方案首先出現(xiàn)在HTML工具欄。這看起來(lái)很奇怪當(dāng)CSS被刪除。這個(gè)解決方案更因?yàn)閮?nèi)容的HTML在側(cè)邊欄的HTML。

這是一個(gè)非常微妙的變化，它可能不會(huì)影響人們?yōu)g覽你的網(wǎng)站的大部分。但它是值得的少數(shù)人利益的努力做。

響應(yīng)式設(shè)計(jì)的主題是巨大的，而Web可訪問(wèn)性更大。我希望本指南涵蓋主題的絕對(duì)必要的解釋他們是如何一起工作來(lái)提高可用性。

慢慢的這些區(qū)域并愿意分時(shí)。但如果你只聽(tīng)從建議在本指南中你仍然會(huì)有一個(gè)令人難以置信的網(wǎng)站看起來(lái)偉大和正確全面的功能。