辅助功能
Foundation for Sites 是一个完全可访问的框架。在您创建可访问页面时,请牢记以下一些通用准则。
除了 Foundation 组件内置的辅助功能外,请务必遵循最佳实践,使您的网站更易于访问。
关心辅助功能或想做出贡献?提交 Pull Request 或参与 [GitHub 上的对话](https://github.com/foundation/foundation-sites/labels/accessibility)。
基本原则
- 正确构建您的文档。在标记导航、列表、链接、控件等时,请使用正确的 HTML 标签。
- 标记所有内容。如果控件或表单元素没有文本标签,请添加一个。您可以使用 可见性类 在视觉上隐藏标签,同时保持可访问性。在所有图像上使用
alt
属性来描述它们是什么。 - 不要依赖纯粹的视觉线索。即使页面正在被朗读给用户,或者用户是色盲并且不能利用基于颜色的标签,页面内容也应该是有意义的。
- 使所有内容都可以在键盘和鼠标上使用。幸运的是,我们所有的组件都可以使用键盘、鼠标和触摸屏开箱即用。
残疾类型
视觉
视障用户可能视力低下或完全失明。对于低视力用户来说,适当的印刷对比度(大小和颜色)很重要。前景色应从背景色中脱颖而出。您可以使用工具来计算前景和背景颜色的对比度。普通文本的对比度至少应为 1:4.5,大文本的对比度至少应为 3:1。盲人用户通过使用 屏幕阅读器 来阅读网页内容。屏幕阅读器会大声朗读网页内容,或将其写成盲文,使用 HTML 中的某些线索来推断含义。
运动
有运动障碍的用户可能难以使用鼠标,或者根本不使用鼠标。因此,您的网站必须完全可以通过键盘访问。视障用户通常也只使用键盘浏览网站。
仅使用键盘时,Tab 键是在页面中导航的主要方式。但是,大多数屏幕阅读器都包含许多快捷键,可以跳过页面。例如,屏幕阅读器可以阅读页面上的每个标题或每个链接,从而更容易在页面上找到正确的内容。
更复杂的组件(如菜单、选项卡或滑块)通常也可以使用箭头键,而不仅仅是 Tab 键。默认情况下,我们所有的 JavaScript 插件都提供高级键盘支持。
听觉
如果您的网站上有视频,请提供字幕,以便失聪或听力障碍的用户可以正确查看内容。
Foundation 和辅助功能
所有 Foundation 组件都可通过键盘访问并且对屏幕阅读器友好。我们所有的代码示例都包含所需的辅助功能钩子,但在某些情况下,您作为开发人员可能需要微调这些钩子的使用方式。我们的 JavaScript 插件将自动为您向 HTML 添加许多必需的属性。请参阅每个组件的文档,了解如何确保您的标记对屏幕阅读器友好。
Foundation 的 CSS 使用了库 what-input,它可以检测用户当前的输入设备并相应地调整 CSS。我们使用它来禁用鼠标用户的轮廓,但键盘用户不需要,他们需要轮廓来了解页面上的哪个元素具有焦点。
如果您使用的是 Sass 版本的 Foundation,则可以使用此混合宏在您自己的组件上启用该功能
.element {
@include disable-mouse-outline;
// ...
}