我們知道採用回應式設計是個好主意，可提供最佳多裝置體驗，但回應式設計也有助於提升無障礙功能。
以 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 像素，如需更多輕觸目標的指引，請參閱這篇文章。