如何为 WordPress 创建可访问的 Web 表单

据CDC称， 26% 的成年人 在美国有某种形式的残疾。 未能让有视觉或认知障碍的人访问您的网站可能会导致流量流失、SEO 排名不佳，甚至是法律纠纷。

如今，几乎每个网站都包含某种表格——无论是产品订单表格还是联系表格等更简单的表格。 表单通常是网站中最难以访问的部分之一，这就是它们值得特别关注的原因！

无论您如何实现表单（使用自定义代码或插件），您都需要遵循某些准则和最佳实践，以确保您的表单完全可访问。

在这篇文章中，您将学习如何为 WordPress 创建可访问的 Web 表单。 这可以帮助您覆盖更多的受众、改善您网站的用户体验并增加您的收入。

什么是网站可访问性？

这 无障碍网页倡议 由万维网联盟运营的写道：

“Web 可访问性意味着网站、工具和技术的设计和开发使残疾人可以使用它们。 更具体地说，人们可以——感知、理解、导航和与网络交互——为网络做出贡献。”

对于有视觉、身体或认知障碍的用户来说，浏览网站、输入信息以及选择正确的链接或按钮可能是一项挑战。 可访问性涉及实施一组最佳实践，以使您的网站可以通过以下方式使用：

• 使用屏幕阅读器的视力障碍人士
• 使用键盘浏览网站的行动不便人士
• 有认知障碍的人
• 色盲的人
• 依赖语音搜索的人
• 不以英语为第一语言并使用翻译服务的人
• 需要使用按键输入信息的临时状况（例如断臂）的人

表单代表了最大的可访问性挑战之一，因为它们可能难以导航并且填写起来令人困惑。

可访问 Web 表单的重要性

表单充当您与客户之间的桥梁。 因此，确保残障人士可以访问您的表单至关重要。 以下是优化 Web 表单以实现整体 WordPress 可访问性的一些最重要的原因。

避免法律纠纷

您是否知道随着越来越多的州开始实施网络可访问性规定，可访问性可能很快成为您网站的法律要求？ 这已经 诉讼驱动 反对根据美国残疾人法案 (ADA) 提交的知名品牌。

增加您的收入

除了法律要求外，可访问性还可以帮助您增加收入。 例如，结果 2019 年英国 Click-Away 英镑调查 发现很大比例的残疾用户由于可访问性问题而离开网站，从而带来超过 170 亿美元的潜在支出。

改善用户体验

遵循可访问性最佳实践有助于使您的网站更易于浏览和阅读。 可访问性更改有助于改善您网站的所有访问者的用户体验，而不仅仅是残障人士。

提升您的搜索引擎优化

仔细注意您网站的结构并使页面更易于浏览，可以通过使搜索引擎更容易抓取来为您的网站提供 SEO 提升。 此外，在您的图像中添加描述性“替代文本”（称为 alt 标签）对于视障人士和搜索引擎在理解您的内容时都至关重要。

搜索引擎偏爱每个人都可以轻松消费的内容。 这就是为什么可访问性始终是 SEO 的一个重要因素。

吸引更多观众

根据欧盟委员会、联合国和其他组织的统计数据，可以肯定地假设世界上大约 20% 的人口患有某种形式的残疾。 考虑到这一点，实施可访问性最佳实践可以帮助您吸引更多客户。

创建可访问 Web 表单的指南

那么如何为您的 WordPress 网站创建可访问的表单呢？ 以下是一些需要遵循的准则。

使用为可访问性构建的表单插件

如果您想节省时间和精力，那么您应该使用已经包含辅助功能的 WordPress 表单插件。 当涉及到可访问的表单时，最好的插件之一是 Gravity Forms。

Gravity Forms 完全致力于可访问性。 这反映在他们最近的版本中，其中包括许多重要功能，可帮助您构建可访问的表单，以实现 WCAG 2.1 AA 合规性，全球标准。

Gravity Forms 2.5 包括各种可访问性增强，使其超越其他表单插件。 这包括针对盲人或有视觉障碍的用户的详细屏幕阅读器反馈，以及管理区域中关于存在可访问性问题的字段的警告。

但可访问性并不是使用重力形式的唯一原因。 还有许多强大的插件可以扩展重力形式，让您可以 构建强大的网络应用程序.

告知用户期待什么

一般清晰度对于整体用户体验很重要，而不仅仅是可访问性。 构建表单时，请确保它们易于扫描并且每个字段都有清晰的说明。 如果用户发现您的表单令人困惑，他们可能会沮丧地离开您的网站。

如果您有一个包含多个步骤的表单，请务必让用户知道他们处于哪个阶段以及还剩下多少步骤。 确保用户有办法返回到之前的步骤，以便他们可以根据需要更改或更新信息。

最后，为所有按钮和链接提供描述性文本，以便清楚单击它们时会发生什么。 不要使用“单击此处”作为链接文本，而是使用描述链接的内容，例如“我们的博客”。 按钮也是如此。 “提交”是枯燥而通用的，而是使用描述用户正在执行的操作的内容，例如“订阅”或“发送消息”。

字段标签和描述

编写标签时，确保它们有意义，并清楚简洁地告诉用户他们需要填写什么。 为了获得最佳的可访问性设置，请将标签放在字段输入上方清晰可见的位置，并且不要包含 HTML 或链接，因为这会混淆屏幕阅读器。

如果您使用的是表单插件，您还可以选择编写字段描述。 这些是可选的，但如果您需要提供有关该字段的额外信息，您可以使用它们。

颜色对比

您网站上使用的颜色是 重要的可达性因素. 颜色对比度是指前景中的字体与背景颜色之间的光线差异。 表格颜色选择不当会使人们难以阅读，尤其是那些有视力障碍的人。

对于 WordPress，表单的颜色通常由您的主题决定，但您可以通过添加自己的自定义 CSS 样式来覆盖它。 另外，请记住不要在表格说明中提及颜色。 例如，不要说“单击绿色按钮继续”，因为这可能会给色盲用户带来问题。

字体大小和粗细也是重要的可访问性选择。 确保您为表单选择的字体清晰易读。 那里有几个插件，例如 一键式辅助功能，允许用户使用不同的颜色组合查看您的网站。

条件逻辑

如果您的表单包含条件逻辑，请确保它不会影响可访问性。 例如，永远不要使用条件逻辑来隐藏“提交”按钮。

重新验证码

尽管 CAPTCHA 和 reCAPTCHA 可能是您的反垃圾邮件策略的重要组成部分，但它们在可访问性方面却是一场噩梦。 验证码通常要求用户填写信息或选择屏幕上的某些图像。 这不仅会导致糟糕的用户体验，而且对于那些有认知和/或视觉障碍的人来说也是一个挑战。

使用不会影响用户体验的蜜罐字段或以隐私为重点的垃圾邮件插件等替代方法，而不是验证码。 在这个地区众所周知的最爱是 阿基斯梅特，尽管它带有价格标签。

错误信息

确保错误消息是可操作的并且写得很清楚。 您的错误消息应提供有关错误或遗漏的反馈，并说明如何纠正它们。 例如，您可以说“您的密码太短”，而不是说“出现错误”。 请输入 12 个字符或以上的密码”。

请记住，您的工作是协助用户填写您的表格，以便这是一个快速而愉快的过程。 没有提供足够信息的错误消息会导致焦虑和沮丧。

键盘导航

许多残障用户无法使用鼠标，因此请确保您的表单仅可使用 Tab 键导航。 这包括关闭错误消息并返回之前的步骤。

强大的 HTML 标记

如果您喜欢从头开始构建表单，那么使用正确的 HTML 很重要，因为这是屏幕阅读器在传递信息时使用的内容。 例如，标签应该使用 标签而不是 或