互联网面向所有人：使你的网站更易访问的6条tips

这是随附的CSS：

4.使用rem或em代替px

当用户需要将其浏览器设置调整为默认的较大文本大小以实现视觉可访问性时，可以期望在不破坏UI的情况下扩大页面上的文本。如果文字是以像素或px编码的，则大小和行间距将无法正确响应，因为它们是固定尺寸，并且文字会很小。

这是来自24a11y.com的示例，其中相同的文本仅以px，rem / px和rem编写。如你所见，当用户将其默认浏览器字体设置更改为“非常大”时，px中的第一个示例不会响应大小更改：

由24a11y.com提供

这样并不是很方便。在第二个示例中，使用px设置行高，可以看到行之间的间距保持不变，从而导致文本显得混乱并且难以阅读。如果像上一个示例那样使用rem或em来调整文本大小，用户将体验到更好的结果，因为这些格式本质上都是可伸缩的。

5.请勿改动对焦功能!

那些手部或手臂有身体残疾的用户可能无法使用鼠标来浏览网站，对于这些用户，他们可能仅依靠键盘在屏幕上导航，这就是默认焦点功能发挥作用的地方。按Tab键，则将看到元素自动以蓝色轮廓高亮显示，指示当前在哪个元素上。

一些开发人员可能认为该功能在视觉上对他们的工作没有吸引力，因此将其关闭，但是如果没有明确指出使用者在页面上的位置，那么依赖此功能的人将如何享受其用户体验呢?

所以，如果出于任何原因必须进行调整，请确保仍在为用户提供清晰可见的页面位置指示。

由Dockyard提供

6.保持色彩对比度

对于色盲或其他难以区分颜色的用户来讲，重要的是要保持较高的色彩对比度。WCAG指南要求文本和背景色的低符合率为4.5：1，增强等级的低符合率为7：1。对于较大的字体大小(如标题)，最小值为3：1，增强型为4.5：1。可以检查颜色选择，以确保它们符合WebAIM.org之类的网站。

这是一个符合WCAG的出色色彩对比度的示例，它通过了增强的评级：

由WebAIM.org提供

除了选择合适的颜色对比度之外，另一种做法是包含文本或图标以指示“成功”或“错误”消息，而不是仅仅使用绿色或红色进行通信。对于有色盲的人，这些颜色可能特别难以区分。

这绝不是一个可以称得上详尽的清单，只是一个接触Web可访问性的开始。作为开发人员，请确保你的产品对所有人都是可访问且具有包容性的。毕竟，互联网面向所有人开放。