無障礙回應式設計

我們知道,回應式設計是提供最佳跨裝置體驗的絕佳方式。 但回應式設計也有助於提升無障礙體驗

假設有類似 Udacity 的網站:

Udacity 網站

不便閱讀小字的低視能使用者可能會放大網頁 最多可達 400% 這個網站的設計靈活靈敏 使用者介面就會自行重新排列「較小的可視區域」(適用於較大的網頁) 這項功能很適合需要放大螢幕的電腦使用者 以及使用行動裝置的螢幕閱讀器這是最理想的雙贏局面; 以下網頁放大為 400%:

Udacity 網站縮放到 400%

事實上,憑藉回應式設計 遵守 1.4.4 的 WebAIM 檢查清單規則。 表示將文字放大倍數時,「...」網頁應該要易於閱讀且能正常運作。

本指南並未涵蓋所有回應式設計。 但以下分享幾個訣竅,有助您使用回應式體驗 讓使用者更容易存取你的內容

使用可視區域中繼標記

<meta name="viewport" content="width=device-width, initial-scale=1.0">

設定 width=device-width 時,系統會根據螢幕寬度 (以裝置獨立像素為單位) 並設定 initial-scale=1 會在 CSS 像素和裝置獨立像素之間建立 1:1 的關係。 這樣就能指示瀏覽器根據螢幕大小 因此使用者不會只看到許多冗長的文字

詳情請參閱「根據可視區域調整內容大小」。

允許使用者縮放

你可以使用可視區域中繼標記來避免縮放 透過設定 maximum-scale=1user-scaleable=no。 請避免這樣做,並讓使用者視需要放大畫面。

靈活設計

避免指定特定螢幕大小,而是改用彈性格線 在內容定義時變更版面配置。 如上方 Udacity 範例所示,這個做法可確保設計回應 因為螢幕較小或縮放等級較高

如要進一步瞭解這些技巧,請參閱回應式網頁設計基本概念一文。

為文字使用相對單位

充分利用彈性的電網 使用 em 或 rem 等相對單位表示文字大小,而不是像素值。 部分瀏覽器僅支援在使用者偏好設定中調整文字大小 而如果您在文字中使用像素值,這項設定不會影響複製作業。 不過,如果整體使用相對單位 網站副本就會更新,反映使用者的偏好設定

這樣可以讓整個網站在使用者縮放畫面時重排 所需的閱讀體驗

避免讓視覺檢視畫面與來源順序中斷連線

訪客使用鍵盤瀏覽您的網站 會依照 HTML 文件內容的順序進行。 使用 FlexboxGrid 等新型版面配置方法時, 必須很容易讓視覺呈現方式與來源順序不符 這會導致使用鍵盤移動的人在頁面上四處移動,導致畫面不順。

請務必以 Tab 鍵瀏覽內容,測試每個中斷點的設計 網頁的流程是否仍然合理?

進一步瞭解來源和影像螢幕中斷連線

善用空間線索提升防護品質

撰寫顯微鏡時,請避免使用指出元素在網頁中位置的語言。 例如,參考「在左手邊」這不合理 當導覽位於畫面頂端

確保輕觸目標在觸控螢幕裝置上夠大

在觸控螢幕裝置上,確保輕觸目標的大小夠大 讓你不用點擊其他連結,即可輕鬆啟用 任何可輕觸元素的理想尺寸為 48px 請參閱輕觸目標的詳細指南。