我們知道，採用回應式設計可提供最佳的多裝置體驗，但回應式設計也能提供無障礙體驗。
假設有類似 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 像素，請參閱輕觸目標的詳細指南。