我們知道，回應式設計是提供最佳跨裝置體驗的絕佳方式。 但回應式設計也有助於提升無障礙體驗
假設有類似 Udacity 的網站：
不便閱讀小字的低視能使用者可能會放大網頁 最多可達 400% 這個網站的設計靈活靈敏 使用者介面就會自行重新排列「較小的可視區域」(適用於較大的網頁) 這項功能很適合需要放大螢幕的電腦使用者 以及使用行動裝置的螢幕閱讀器這是最理想的雙贏局面； 以下網頁放大為 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=1 或 user-scaleable=no。
請避免這樣做，並讓使用者視需要放大畫面。
靈活設計
避免指定特定螢幕大小，而是改用彈性格線 在內容定義時變更版面配置。 如上方 Udacity 範例所示，這個做法可確保設計回應 因為螢幕較小或縮放等級較高
如要進一步瞭解這些技巧，請參閱回應式網頁設計基本概念一文。
為文字使用相對單位
充分利用彈性的電網 使用 em 或 rem 等相對單位表示文字大小，而不是像素值。 部分瀏覽器僅支援在使用者偏好設定中調整文字大小 而如果您在文字中使用像素值，這項設定不會影響複製作業。 不過，如果整體使用相對單位 網站副本就會更新，反映使用者的偏好設定
這樣可以讓整個網站在使用者縮放畫面時重排 所需的閱讀體驗
避免讓視覺檢視畫面與來源順序中斷連線
訪客使用鍵盤瀏覽您的網站 會依照 HTML 文件內容的順序進行。 使用 Flexbox 和 Grid 等新型版面配置方法時， 必須很容易讓視覺呈現方式與來源順序不符 這會導致使用鍵盤移動的人在頁面上四處移動，導致畫面不順。
請務必以 Tab 鍵瀏覽內容，測試每個中斷點的設計 網頁的流程是否仍然合理？
進一步瞭解來源和影像螢幕中斷連線。
善用空間線索提升防護品質
撰寫顯微鏡時，請避免使用指出元素在網頁中位置的語言。 例如，參考「在左手邊」這不合理 當導覽位於畫面頂端
確保輕觸目標在觸控螢幕裝置上夠大
在觸控螢幕裝置上，確保輕觸目標的大小夠大 讓你不用點擊其他連結，即可輕鬆啟用 任何可輕觸元素的理想尺寸為 48px 請參閱輕觸目標的詳細指南。