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

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

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

響應式設計原則

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

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

在這個過程中你也會考慮可達性和人們如何努力用你的網站在小屏幕上。如果你的移動布局增加文字大小？應的按鈕/鏈接更容易點擊？

有一定的主題，你需要考慮網站的響應和訪問。這里有一些需要考慮的要點：

印刷對比度

提供足夠的白色空間

列和網格

導航行為

動態特征（圖像滑塊，視頻，等等）

所有這些功能時必須考慮創建一個響應性和可訪問的網站。二者不直接相關，但是當他們結合創造一個和諧的界面，功能很好的人。

無障礙設計

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

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

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

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

都是主要的元素tappable或紙質文檔？有足夠大的tappable領域大多數用戶有自己的自來水在合適的地方注冊？

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

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

knowbility

Web標準項目

無障礙網頁設計的可用性指南

導航結構

盡可能嘗試所有的導航菜單恢復盡可能簡單。這并不總是最好有多級下拉菜單響應設計。

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

這使用戶可以訪問子環節時，他們需要的，但是他們在隱藏頁面的鏈接將無關的內容。

下拉菜單也可以。但你必須更細致、周到的用戶可能不在瀏覽互聯網專家。

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

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

這工作不像典型的下拉而是轉換成側滑動菜單。這種效果是因為每一個環節都有一個大的tappable區，而不是一個小的子菜單圖標添加到主菜單。

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

如果你建立與鍵盤輔助然后航行秩序是非常重要的一個導航。這可通過CSS和有很多指南為了幫助這項任務。這個TAB順序屬性也是非常重要的鍵盤導航。

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

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

如果你正在尋找其他的導航輔助資源，我強烈推薦以下相關文章。

30無障礙網頁提示

讓你的網站訪問

創建一個完全可訪問的導航欄

觸摸支持UI

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

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

在一個網頁需要用戶交互的許多動態因素。他們中的大多數已經從鼠標點擊在臺式機/筆記本環境演變。

如果你的布局會響應你的動態元素也應該。這里有一些動態元素，應該支持觸摸輸入的例子。

幻燈片

視頻播放器

lightboxes /投資組合

下拉式導航

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

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

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

有一點要記住的關于智能手機是他們缺乏懸停事件。點擊一個元素通常被認為是一個積極的事件，所以重要的是要處理的事件的準確在觸摸設備

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

高興的重排

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

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

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

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

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

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

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

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

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

這是一個非常微妙的變化，它可能不會影響人們瀏覽你的網站的大部分。但它是值得的少數人利益的努力做。

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

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

文章名稱：成都網站建設：要訪問的響應式網頁設計
文章分享：http://www.js-pz168.com/news13/318563.html

成都網站建設公司_創新互聯，為您提供Google、品牌網站制作、App開發、服務器托管、網站制作、外貿網站建設

廣告

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