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

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

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

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

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

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

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

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

印刷對比度

提供足夠的白色空間

列和網(wǎng)格

導(dǎo)航行為

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

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

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

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

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

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

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

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

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

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

knowbility

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

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

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

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

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

這使用戶可以訪問子環(huán)節(jié)時(shí)，他們需要的，但是他們在隱藏頁面的鏈接將無關(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)擊它會與所有的類別列為鏈接打開一次菜單。

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

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

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

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

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

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

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

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

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

觸摸支持UI

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

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

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

如果你的布局會響應(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)狈彝Ｊ录?。點(diǎn)擊一個(gè)元素通常被認(rèn)為是一個(gè)積極的事件，所以重要的是要處理的事件的準(zhǔn)確在觸摸設(shè)備

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

高興的重排

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

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

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

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

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

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

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

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

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

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

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

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

文章名稱：成都網(wǎng)站建設(shè)：要訪問的響應(yīng)式網(wǎng)頁設(shè)計(jì)
文章分享：http://www.rwnh.cn/news13/318563.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站制作、App開發(fā)、服務(wù)器托管、網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)