我們知道,以回應式設計的方式提供最佳的多裝置體驗是個好主意,但回應式設計也為無障礙功能的一大利器。
假設有一個類似 Udacity 的網站:
![Udacity 網站](https://web.dev/static/articles/accessible-responsive-design/image/the-udacity-site-9a62429b3fdaf.jpg?authuser=6&hl=zh-tw)
低視能使用者難以閱讀小型印刷品時,網頁放大幅度高達 400%。由於網站的設計採用回應式設計,因此使用者介面會自行重新排列「較小可視區域」(實際上適用於較大的網頁),因此對於需要放大螢幕的電腦使用者,以及行動裝置螢幕閱讀器使用者來說,這一點非常實用。這是最理想的雙贏局面。以下是放大為 400% 的網頁:
![Udacity 網站縮放至 400%](https://web.dev/static/articles/accessible-responsive-design/image/the-udacity-site-zoomed-0b57559dcf8ec.jpg?authuser=6&hl=zh-tw)
事實上,光是設計回應式設計,我們才符合 WebAIM 檢查清單 1.4.4 的規則,也就是規定網頁「...在文字大小加倍時,內容應該清晰易讀且可正常運作」。
本指南無法涵蓋所有回應式設計,不過以下幾項重點,有助您改善回應式體驗,並讓使用者更容易存取內容。
使用可視區域中繼標記
<meta name="viewport" content="width=device-width, initial-scale=1.0">
設定 width=device-width
會符合裝置獨立像素的螢幕寬度,而設定 initial-scale=1
則會在 CSS 像素和裝置獨立像素之間建立 1:1 的關係。如此即可指示瀏覽器根據螢幕大小調整內容,因此使用者不會只看到許多夾雜的文字。
詳情請參閱「根據可視區域調整內容大小」。
允許使用者縮放
您可以透過設定 maximum-scale=1
或 user-scaleable=no
,使用可視區域中繼標記來禁止縮放。請避免這個問題,建議您讓使用者可以在需要時放大畫面。
設計時可靈活調整
避免指定特定螢幕大小,並改用靈活的格線,在內容指定時變更版面配置。如同上述 Udacity 範例所示,這個方法可確保設計能回應空間較小而降低,是因為螢幕較小或縮放等級較高。
如要進一步瞭解這些技術,請參閱回應式網頁設計基本概念一文。
在文字中使用相對單位
為了充分利用彈性格線,請使用 em 或 rem 等相對單位來處理文字大小,而非像素值。部分瀏覽器僅支援在使用者偏好設定中調整文字大小,如果您使用像素值顯示文字,這項設定不會影響您的副本。不過,如果您在整個過程中使用了相對單位,網站文案就會更新,反映使用者的偏好設定。
這樣一來,整個網站就能在使用者縮放時自動重排,打造他們需要的閱讀體驗。
避免將視覺檢視畫面與來源順序取消連結
使用鍵盤分頁瀏覽您的網站的訪客,會按照 HTML 文件的內容順序進行瀏覽。使用 Flexbox 和 Grid 等新型版面配置方法時,輕鬆讓視覺算繪作業與來源順序不同。這會導致使用鍵盤在頁面四處移動,而使用者也可能會中斷。
請務必透過 Tab 鍵瀏覽內容,在每個中斷點測試設計,瀏覽頁面是否仍合理?
進一步瞭解來源和影像顯示畫面的連結中斷。
注意空間線索
撰寫顯微文案時,請避免使用指明元素在網頁上位置的語言。 舉例來說,在行動裝置上的導覽是位於畫面頂端的時,使用「左側」導覽就沒有任何意義。
確保輕觸目標在觸控螢幕裝置上夠大
在觸控螢幕裝置上,請確保輕觸目標的大小夠大,讓使用者在不接觸其他連結的情況下輕鬆啟用。任何可輕觸元素的大小上限為 48 像素,詳情請參閱輕觸目標相關說明。