我们知道，采用自适应设计能够提供最佳的多设备体验，不失为一个好主意，但自适应设计也可以提高无障碍功能。
以 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），而不是使用像素值。某些浏览器仅支持根据用户偏好设置调整文字大小，如果您对文字使用像素值，此设置不会影响您的文案。不过，如果您自始至终都使用相对单位，则网站文案会进行更新，以反映用户的偏好。
这样一来，整个网站就可以在用户进行缩放时重排，从而打造他们使用您的网站所需的阅读体验。
避免断开视觉视图与源代码顺序的连接
访问者使用键盘按 Tab 键浏览您的网站时，将遵循 HTML 文档中的内容顺序。使用 Flexbox 和 Grid 等现代布局方法时，很容易使视觉呈现与源代码顺序不符。这可能会导致使用键盘在页面中四处移动的用户感到困惑。
请务必通过 Tab 键在内容间移动以测试每个断点处的设计，使页面中的流动是否合理？
详细了解来源与可视化显示屏断开连接。
注意空间线索
撰写显微图时，请避免使用可指示元素在网页上的位置的语言。 例如，在移动版中，当导航位于屏幕顶部时，称之为“位于左侧”的导航毫无意义。
确保点按目标在触摸屏设备上足够大
在触摸屏设备上，请确保您的点按目标足够大，以便用户无需触碰其他链接即可轻松激活。任何可点按元素的合适尺寸均为 48 像素，请阅读有关点按目标的更多指南。