成都網(wǎng)站建設(shè)：要訪問的響應(yīng)式網(wǎng)頁設(shè)計

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

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

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

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

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

為你的網(wǎng)站的每一個方面的可用性的關(guān)注。這可能是更容易開始移動第一因為你有限的設(shè)計特點，然后移動到桌面，支持更大的屏幕尺寸。

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

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

印刷對比度

提供足夠的白色空間

列和網(wǎng)格

導(dǎo)航行為

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

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

無障礙設(shè)計

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

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

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

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

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

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

我真的很喜歡WebAIM項目因為它的工具和資源，可以幫助你找到訪問界面元素。也一定要看看這些相關(guān)的資源。

knowbility

Web標準項目

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

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

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

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

這使用戶可以訪問子環(huán)節(jié)時，他們需要的，但是他們在隱藏頁面的鏈接將無關(guān)的內(nèi)容。

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

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

但在較小的屏幕菜單轉(zhuǎn)換成一個單一的鏈接標記為“按類別瀏覽。當用戶點擊它會與所有的類別列為鏈接打開一次菜單。

這工作不像典型的下拉而是轉(zhuǎn)換成側(cè)滑動菜單。這種效果是因為每一個環(huán)節(jié)都有一個大的tappable區(qū)，而不是一個小的子菜單圖標添加到主菜單。

沃爾瑪有一個非常類似的訪問菜單，移動通過一個水龍頭類。

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

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

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

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

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

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

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

觸摸支持UI

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

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

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

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

幻燈片

視頻播放器

lightboxes /投資組合

下拉式導(dǎo)航

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

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

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

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

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

高興的重排

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

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

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

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

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

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

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

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

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

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

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

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

文章名稱：成都網(wǎng)站建設(shè)：要訪問的響應(yīng)式網(wǎng)頁設(shè)計
文章分享：http://www.muchs.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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)