我們知道，以回應式設計的方式提供最佳的多裝置體驗是個好主意，但回應式設計也為無障礙功能的一大利器。
假設有一個類似 Udacity 的網站：
低視能使用者難以閱讀小型印刷品時，網頁放大幅度高達 400%。由於網站的設計採用回應式設計，因此使用者介面會自行重新排列「較小可視區域」(實際上適用於較大的網頁)，因此對於需要放大螢幕的電腦使用者，以及行動裝置螢幕閱讀器使用者來說，這一點非常實用。這是最理想的雙贏局面。以下是放大為 400% 的網頁：
事實上，光是設計回應式設計，我們才符合 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 像素，詳情請參閱輕觸目標相關說明。