我们知道,最好采用自适应设计,以提供最佳的多设备体验。 而自适应设计也能在无障碍功能方面取得理想成效。
以 Udacity 这样的网站为例:
![Udacity 网站](https://web.developers.google.cn/static/articles/accessible-responsive-design/image/the-udacity-site-9a62429b3fdaf.jpg?authuser=7&hl=ro)
低视力用户难以阅读小号字体,可能会放大页面, 可能高达 400% 由于本网站采用的是自适应设计 界面会根据“较小视口”重新排列(实际上对于较大的网页) 非常适合需要放大屏幕的桌面设备用户 也同样适用于移动设备屏幕阅读器用户人人皆大欢喜。 下面是同一页面放大至 400% 的效果:
![Udacity 网站放大至 400%](https://web.developers.google.cn/static/articles/accessible-responsive-design/image/the-udacity-site-zoomed-0b57559dcf8ec.jpg?authuser=7&hl=ro)
事实上,只要采用自适应设计, 符合 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 键在内容上导航,以测试您的设计, 浏览网页的流程是否仍然有意义?
详细了解来源显示和视觉显示断开连接。
小心空间线索
撰写显微镜时,请避免使用表明网页上某个元素位置的语言。 例如,所谓的导航“位于左侧”在移动版中毫无意义 当导航位于屏幕顶部时。
确保点按目标在触摸屏设备上足够大
在触摸屏设备上,确保点按目标足够大 ,使其无需点击其他链接即可轻松激活。 48px 是所有可点按元素的理想尺寸。 详细了解点按目标。