如何使 WordPress 网站易于访问

已发表: 2023-07-07

这篇文章是由 Equalize Digital 的首席执行官 Amber Hinds 客座撰写的,Equalize Digital 是一家经过认证的 B Corporation,专门从事 WordPress 辅助功能。 如果您想了解有关 Equalize Digital 及其服务的更多信息,请访问该公司网站。


世界各地有数百万人患有影响他们使用互联网的方式的残疾,在一场大流行增加了对轻松网上购物、食品订购甚至远程医疗保健服务的需求之后,网络可访问性比以往任何时候都更加重要。

本 Web 可访问性指南讨论了可访问性是什么、为什么重要以及如何使 WordPress 网站可访问,包括通过测试识别常见问题。

视障男子听手机

在本文中,我将介绍:

  • 什么是网络可访问性?
  • 为什么可访问性很重要
  • 有哪些常见的可访问性问题?
  • 测试 WordPress 网站的可访问性
  • 保持网站可访问

什么是网络可访问性?

简而言之,无障碍网站是所有人都可以使用的网站,包括无法通过典型键盘和鼠标设置与网络交互的人,以及具有各种智力或身体差异的人。

网站中必须内置特定功能,以使残疾人可以使用和理解网站。 听觉、视觉、认知、运动或学习障碍需要调整和网站修改才能使其可用。 根据具体情况,残疾人使用各种辅助设备(例如屏幕阅读器)来访问网站。

网页设计师和开发人员需要确保其网站的内容和功能是可感知的、可操作的、可理解的和健壮的 (POUR),这意味着内容和功能可以被所有设备上的所有人访问和理解。

使网站更易于访问的一些功能示例包括:

  • 视频和音频文件的隐藏式字幕和文字记录
  • 图像上的替代文字
  • 跳过链接以协助键盘导航
  • 适当的颜色对比使文本更具可读性

为什么可访问性很重要

网站的可访问性对每个使用网络的人都会产生影响。 如果您或您客户的网站可以访问,这将确保每个人都可以平等地访问在线信息、必需品、娱乐、购物等,无论其能力如何。

但网站的可访问性不仅仅与良好的业力有关;还与良好的业力有关。 它还对搜索引擎排名、新销售和网站访问者、法律复杂性和品牌形象产生现实影响。

搜索引擎排名

进行可访问性修复可以提高网站的搜索引擎排名。 许多辅助功能(例如图像上的替代文本和带有标题的正确结构化内容)有助于辅助功能和搜索引擎优化 (SEO)。 在搜索结果页面上排名较高可以提高新客户或客户的知名度,从而增加网站流量、转化率、博客或新闻订阅者等。

销量增加

CDC 指出,截至 2018 年,四分之一的美国人患有残疾。 美国残疾人每年在网上可自由支配的支出超过 2000 亿美元。 辅助功能使更多人能够找到和使用网站,从而增加新销售、转化和回头客的机会。 当当今世界许多网站无法访问时,任何可访问的网站都将在竞争中脱颖而出。

这是法律要求的

所有网站都需要满足《美国残疾人法案》(ADA) 中规定的网络可访问性标准。 根据《美国残疾人法》,确立了将网站设立为公共场所的法律先例。 这意味着商业网站(本质上是其数字店面)需要以与实体企业建筑相同的方式进行访问。

地方、州和联邦政府机构网站以及联邦资助的组织和项目的任何网站也必须符合第 508 条的标准。此外,还有各种州和国际法律要求网站可访问。

如果网站不符合这些指南中规定的可访问性要求,该组织可能面临诉讼的风险,或者在某些情况下面临政府罚款的风险。 据 Usablenet 统计,2020 年,美国共提起了 3,550 起网站可访问性诉讼。 保持法律合规性是开展业务的重要组成部分,拥有无障碍网站是企业履行法律义务的一种方式。

品牌形象

采取措施使其 WordPress 网站更易于访问的公司和非营利组织表明他们正在履行社会责任,并确认他们希望让互联网成为每个人的地方。 组织对无障碍的承诺向人们表明他们以一种深刻的人性化方式受到关心,这可以建立忠诚度并提升品牌形象。

有哪些常见的辅助功能问题?

我的公司 Equalize Digital 是一家无障碍咨询公司,为企业、非营利组织和政府机构的网站进行无障碍审核。 在我们的所有测试中,我们发现所有网站都重复出现许多可访问性问题。 这些常见问题是相对简单的问题,但通常会被开发人员、设计人员和内容创建者所忽视。

如果您想确保您构建或管理的网站可以访问,请首先检查是否存在以下问题:

替代文本缺失或质量低下

替代文本是屏幕阅读器用来向盲人描述图像内容或目的的文本。 如果替代文本留空,屏幕阅读器将完全跳过它,或者可能会读取图像的文件名,当文件名是一串数字或不描述外观时,这毫无帮助。 如果没有适当的替代文本,盲人和视障用户将无法了解图像的上下文或理解。

低质量的替代文本是有问题的,因为它无法准确描述图像或过于冗长,可能会导致混乱。 不需要将“图片”、“图像”、“图形”、“图像”等单词和短语添加到替代文本中,因为屏幕阅读器会宣布存在图像或图形。

如果您的替代文本长度超过 125-150 个字符,某些屏幕阅读器会中断并停止阅读。 在替代文本中添加句号可能会导致屏幕阅读器暂停,从而可能使听众感到困惑或导致他们相信替代文本已经结束。

色彩对比度不足

在网页设计中,颜色对比度是指背景颜色和文本、按钮或图标等彩色元素之间的亮度度量。 背景颜色和前景色的比例必须为 4.5:1,标准尺寸的文本才被认为足够。 您可以通过将两种颜色的十六进制代码输入免费的颜色对比度检查器来测试颜色对比度。

不明确的锚文本

锚文本是网页上可点击的单词或单词组。 单击锚文本可能会将您带到新网站、下载文档、在新选项卡中打开图像或视频。 如果锚文本脱离上下文没有意义或无法描述链接的目的,则被认为是不明确的。 不明确的锚文本的一些示例包括“链接”、“单击此处”、“了解更多”或“继续”。 在向内容添加链接时,至关重要的是,如果有人独立地仅听到链接(没有任何周围的文本),他们就会知道链接指向哪里或单击链接时会发生什么。

缺少字幕和文字记录

字幕采用语音内容和非语音内容(例如视频中的音效、音乐或笑声),并通过文本进行描述。 它们在视频期间出现在屏幕上,因此聋哑和听力障碍用户可以了解视频中发生的情况。 此外,字幕必须符合视频的时间安排。 需要注意的是,字幕必须准确; 需要检查自动生成的字幕的准确性。

文字记录是音频剪辑或视频中所说内容的书面记录。 文字记录提供了理解视频内容或音频文件的辅助手段。 它们应该与视频的字幕一起使用,以便人们可以阅读文字记录而不是观看视频。 这很重要,因为并非所有用户都能阅读字幕。 成绩单还具有可以轻松翻译成其他语言的优点,并且可以帮助搜索引擎优化。

测试 WordPress 网站的可访问性

测试网站可访问性的最佳方法是执行自动、手动和用户测试的组合。

自动辅助功能测试

使用人工智能扫描工具执行自动可访问性测试。 有许多免费和付费工具可以提供各种辅助扫描功能。 选择自动化工具时,需要记住以下几点:

  • 网站的大小。 如果您的网站较小,免费工具可能适合您。 如果您有一个较大的网站,例如带有博客或电子商务部分且包含数千个帖子的网站,则付费工具可能更合适。
  • 您需要多少支持。 如果您需要帮助查找网站上的可访问性错误以便修复它们,免费工具可能是一个不错的选择。 如果您需要帮助了解可访问性错误,或者希望其他人修复这些错误,请尝试查找具有内置或开发人员提供的支持选项的工具。 如果您是辅助功能修复的新手,那么获得可用的支持是关键。
  • 用户体验。 一些自动辅助功能工具可以直接在您的网站上使用,例如通过浏览器扩展或在 WordPress 仪表板中使用。 其他工具要求您使用与您的网站完全独立的界面。 如果您希望在使用网站时查看可访问性错误,请选择提供现场报告的工具。 这使您在编辑网站内容时可以更轻松地持续检查网站的可访问性。

WAVE 和 Axe 是两种可以在任何网站上使用的流行免费工具。 这些工具都具有可用于测试单个 URL 的 Chrome 和 Firefox 扩展(一次一个),以及允许批量测试和附加功能的付费计划。

辅助功能检查器 WordPress 插件

如果您想运行批量辅助功能扫描并在 WordPress 仪表板中查看报告,那么 WordPress 辅助功能检查器插件是最好的工具。 您可以在 WordPress.org 上免费下载该插件的基本版本。

WordPress 插件的辅助功能检查器

辅助功能检查器扫描页面和帖子是否存在辅助功能错误或潜在问题,并将其直接显示在该页面或帖子的编辑屏幕上。 这些页内报告不仅可用于首先检查网站是否可访问,还可用于监控持续的可访问性。

运行测试的辅助功能检查器插件的屏幕截图

Accessibility Checker 运行 40 多种不同的检查,包括针对上述确定的常见问题。 免费版本扫描帖子和页面,专业版本包括自定义帖子类型和存档页面的完整站点扫描。 错误标记或审查的项目可以被忽略,从而可以跟踪随着时间的推移进行的辅助功能修复。 对于机构、开发人员和 WordPress 用户来说,这是一个很棒的工具。

手动测试

不幸的是,自动扫描无法识别网站上的每个可访问性问题 - 有些问题只能由体验该网站的人来确定。 使用辅助功能检查器等自动化工具测试网站后,接下来执行手动测试,以确保所有人都可以使用它,无论他们使用哪种设备。

手动可访问性测试的第一步是确认用户仅使用键盘即可完全导航。 转到网站的前端,使用制表符和箭头键在网站中移动,确保您不会在移动时迷失位置,并且可以使用网站的所有部分。

键盘测试后,您可以继续进行屏幕阅读器测试。 屏幕阅读器是盲人和视障人士用来理解网页内容的一种辅助技术软件​​。 如果您拥有 Mac,则可以使用计算机内置的 VoiceOver 软件。 如果您没有 Mac,则可以下载免费的开源屏幕阅读器 NVDA 或购买流行的屏幕阅读器 JAWS。 最佳做法是使用两个或更多屏幕阅读器测试您的网站,因为并非所有屏幕阅读器对各个元素都说相同的内容。

要使用屏幕阅读器测试您的网站,请转到您要测试的页面,然后像在键盘导航测试期间一样仅使用选项卡和箭头键在页面中移动。 当您浏览页面时,请聆听屏幕阅读器所说的内容,并标记任何不正确或令人困惑的内容。 侦听自动播放并中断页面上其他内容的媒体文件或滑块。

执行键盘导航和屏幕阅读器测试后,您需要检查所有嵌入或链接的媒体文件。 媒体文件包括视频、音频文件、PDF、.Doc 或 .XLS 文件、图像或文本滑块以及第三方小部件或 iFrame。 确保残障人士可以访问、交互并理解所有嵌入或链接的媒体文件呈现的内容。

用户测试

在自动和手动可访问性测试之后,建议执行用户测试。 用户测试涉及雇用现实世界的辅助技术用户来测试您的网站是否存在可访问性错误。 通常,测试用户会收到来自 Web 开发人员的具有特定目标的简介。 然后测试用户将尝试实现这些目标并向开发人员提供反馈。

使用盲文键盘的视障女性

您可以通过付费或志愿者计划雇用个人测试用户,或者找到提供用户测试服务的辅助功能公司。

结论:保持网站可访问

需要注意的是,与 SEO 一样,可访问性是一个持续的过程,需要持续监控和修改。 为了确保您的网站保持可访问性,请制定计划:

  • 使用辅助功能检查器插件等工具定期监视和测试辅助功能错误。
  • 对 Web 开发人员、设计师和内容创建者进行 Web 可访问性最佳实践的培训。 如果您要为客户启动网站,请确保他们知道如何在启动后以可访问的方式添加内容。
  • 随时了解您必须遵守的任何无障碍指南或法律变更。

采取这些步骤将有助于确保您的网站保持可访问性,并且所有人无论能力如何,都可以平等地访问网络上的信息、产品和服务。