如何在您的 WordPress 网站中加入 Web 可访问性

已发表: 2020-02-15

WordPress是最流行的网站建设平台。 根据 W3techs 的数据,35.7% 的网站使用 WordPress,这使其在全球内容管理系统 (CMS) 市场份额中达到惊人的 62.5%。

但是,在创建 WP 网站时,Web 可访问性可能是您最不想考虑的事情。

但是,WordPress 可访问性编码标准声明“在 WordPress 中发布的所有新代码或更新代码都必须符合 AA 级的 Web 内容可访问性指南 2.0。

换句话说,如果您拥有 WP 网站,可访问性是一个关键因素。

幸运的是,让您的 WP 网站可访问并非不可能。 但是,在讨论如何做之前,让我们先了解一下 Web 可访问性的构成。

A. Web 可访问性的四大支柱

为 Web 制定国际标准的万维网联盟 (W3C) 已经提出了以下四个 Web 可访问性原则:

  1. 可感知的:您需要以每个人都能感知的方式呈现您网站上的所有信息和元素。
  2. 可操作:所有可导航和交互的元素都必须可由不同的用户操作。
  3. 可理解每个人都应该能够理解您网站上的信息和用户界面。
  4. 健壮:各种类型的辅助技术和用户应该能够阅读您网站上的内容。

B. WordPress Web 可访问性最佳实践

牢记上述原则,您可以采取以下步骤使您的 WordPress 网站可供残疾人士访问:

  1. 提高文本可访问性

每个人,包括视障者,都应该能够阅读您网站上的文字。 虽然您可以默认使用大尺寸字体,但提供可调整大小的文本将进一步提高可读性。 视障用户可以使用此功能根据自己的方便增加字体大小。

此外,请确保在必要时添加替代文本,例如 Alt 标签。 WP Accessibility 是 WordPress 可访问性插件之一,它可以帮助您添加可调整大小的文本、颜色对比、添加帖子标题以阅读更多链接并提供合适的替代文本。

  1. 结构化前端和后端

您的每个网页都需要有一个结构良好的前端和后端。 它不仅提高了内容的整体可读性,而且使辅助工具更容易将信息传达给残疾用户。 您可以使用语义标题标签和元描述等 HTML 元素来改进后端。

确保使用项目符号列表、短段落以及组织良好且中肯的内容应该有助于改进前端。 您还应该使用适当的标题和标题来定义各种内容小节。 避免使用华丽的动画和 GIF,因为它们不便于访问。

此外,添加跳过链接以使屏幕阅读器用户更轻松地进行内容导航。 这种简单的可访问性功能允许用户从内容的一个部分跳转到另一部分,而无需浏览不必要的材料。

  1. 键盘导航以获得更好的交互

您还需要确保您的网站可通过键盘导航。 它应该包括链接和菜单,尤其是下拉菜单。 所有用户都应该能够使用 Tab(向前)和 Shift+Tab(向后)访问链接、菜单、按钮和表单等元素。

您还需要使用可见的焦点指示器,它可以显示禁用用户在网页上的位置。 WordPress 主题通常可能会重置默认的焦点样式。 确保使用不会重置此功能的 WordPress 主题。 Divi 可访问性主题可以帮助您通过可访问的下拉菜单和可聚焦元素的视觉轮廓设置键盘友好型导航。

  1. 添加 ARIA 地标

ARIA 代表 Accessible Rich Internet Applications。 借助 ARIA 地标角色,您可以定义网页的不同区域,让辅助技术用户轻松浏览您的网站。

最常见的 ARIA 地标角色包括横幅、主要、补充、内容信息、搜索和导航。

  • 横幅:定义网站标题,例如徽标、公司名称或网站标题。
  • Main:定义网页的主要内容。
  • 补充:检测作为主要内容的重要组成部分的支持内容。
  • 内容信息:提供有关父文档的信息,例如脚注、版权和隐私声明。
  • 搜索:表示您网站上的搜索表单。
  • 导航:标记网页的导航元素。

使用 ARIA 地标的最大优势是它们可以使用已经具有语义的 HTML5 元素。 因此,您可以将它们与现有 WordPress 主题中的 HTML5 元素一起使用。

  1. 互动元素:色彩对比

对于 CTA 和表单等交互式元素,请始终使用高对比度颜色作为文本背景。 WCAG 2.0 AA 级要求普通文本的对比度至少为 4:5:1,大文本的对比度至少为 3:1,而 AAA 级要求普通文本的对比度至少为 7:1,4:5: 1 用于大文本。

通常,白色背景上的黑色文本提供最佳的颜色对比。 您也可以在黄色背景上使用黑色文本,反之亦然。 但是,请避开组合,例如红色背景上的绿色文本或绿色背景上的红色文本。

离别词

网站可访问性还扩展到您网站上的其他交互元素,例如多媒体。 确保没有任何多媒体(如视频、音频、滑块或轮播)具有默认的自动播放选项,因为它对残疾用户来说是一个重大障碍。 相反,所有多媒体内容都应该在用户交互之后才开始播放。

除了视频脚本、音频描述和字幕外,请确保使用可访问的媒体播放器。 您可以使用像 Able Player 这样的插件,它允许您在 WordPress 网站的任何页面上添加包含在可访问媒体播放器中的视频和音频。

使您的 WordPress 网站可访问将需要您更改其设计和开发流程,并且可以通过顾问的手动过程来完成。 自动网络可访问性解决方案需要少量的时间和资源投资,这将带来许多好处,包括积极的品牌形象、更广泛的市场范围、更好的搜索排名,更不用说增加销售额了。

如果您仍然对如何使您的 WordPress 网站易于访问有疑问,请随时将您的查询放在评论中。

Digiprove 密封件This content has been Digiproved © 2020 Tribulant Software