bts防弹少年团演唱会

bts防弹少年团演唱会

表单可访问性的7种方式可以促进转换

《表单可访问性的7种方式可以促进转换》

无法访问的网站失去了销售。

我们来看看数字:

我将向您展示您应该关注可访问性的五个原因以及可访问%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1%E5%B0%86%E6%8F%90%E9%AB%98%E8%BD%AC%E6%8D%A2%E7%8E%87%E7%9A%84%E4%B8%83%E7%A7%8D%E6%96%B9%E6%B3%95%E3%80%82″>

你为什么要关心使你的表格可访问?

表单可访问性被描述为“他们可以访问使用屏幕阅读器或键盘的人。” WebAIM%E7%BB%A7%E7%BB%AD%E8%AF%B4“>

5个理由:

  1. 这是明智和关心的事情。 互联网是丰富资源和服务的接入点,对残疾人来说可能是非常有益的。 额外费用委员会发现,残疾人%E6%AF%8F%E6%9C%88%E9%9C%80%E8%A6%81%E6%94%AF%E4%BB%98现在Disability Now的第一位盲人编辑Ian” macrae>说,网上购物是一种“解放体验”,他认为这比“ %E8%B5%B0%E9%81%8D%E5%95%86%E5%BA%97%E7%9A%84%E9%BA%BB%E7%83%A6“>
  2. 这是法律要求。 在英国,请参阅2010%E5%B9%B4%E2%80%9C%E5%B9%B3%E7%AD%89%E6%B3%95%E6%A1%88%E2%80%9D%E7%AC%AC29%E8%8A%82“>
  3. 可访问性和搜索引擎优化(SEO) %E5%AF%86%E5%88%87%E7%9B%B8%E5%85%B3“>
  4. 设计可访问性%E5%AF%B9%E6%AF%8F%E4%B8%AA%E4%BA%BA%E9%83%BD%E6%9C%89%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%9A%84%E5%A5%BD%E5%A4%84
  5. 如果更多的人能够填写表单这增加了更多的人填写表单的机会。 此外,更好的用户体验等同于减少摩擦,提高转换率和%E6%94%B6%E5%85%A5“>

事实上,您的%E8%A1%A8%E5%8D%95%E8%B6%8A%E5%AE%B9%E6%98%93%E8%8E%B7%E5%BE%97%EF%BC%8C%E5%B0%B1%E8%B6%8A%E6%9C%89%E6%9C%BA%E4%BC%9A%E6%8F%90%E9%AB%98%E8%BD%AC%E5%8C%96%E7%8E%87%E5%92%8C%E6%94%B6%E5%85%A5%E3%80%82″>

注意:我将在本文中多次引用屏幕阅读器。 这些是%E6%96%87%E6%9C%AC%E5%88%B0%E8%AF%AD%E9%9F%B3%E8%BD%AF%E4%BB%B6%E5%8C%85” webaim>

更易于访问的表单的7个步骤(这也会增加您的转化次数)

1.优化表单的标签导航

Tab%E9%94%AE%E9%A1%BA%E5%BA%8F%E6%98%AF%E4%B8%80%E7%A7%8D%E6%A0%87%E8%AE%B0%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E4%BB%A5%E4%BE%BF%E7%94%A8%E6%88%B7%E6%8C%89%E7%85%A7%E6%82%A8%E5%B8%8C%E6%9C%9B%E7%9A%84%E9%A1%BA%E5%BA%8F%E9%80%9A%E8%BF%87%E9%93%BE%E6%8E%A5%E5%92%8C%E4%BA%A4%E4%BA%92%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E9%80%89%E9%A1%B9%E5%8D%A1%E3%80%82″>

%E9%94%AE%E7%9B%98%E5%AF%BC%E8%88%AA%E5%AF%B9%E4%B8%89%E7%BB%84%E4%BA%BA

  1. 依赖键盘控件的辅助功能软件的用户。
  2. 喜欢通过鼠标进行键盘导航的用户。
  3. 移动用户。

标签顺序不直观时令人困惑..更糟糕的是,如果无法通过键盘访问某个元素,则用户可能无法完成表单。

移动设备上的键盘导航应该可以更快,更准确地在表单字段之间移动。 但是,如果Tab键顺序不正确,则屏幕可能会跳转或用户可能会错过未标记的字段。

《表单可访问性的7种方式可以促进转换》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

如何操纵Tab键顺序

HTML链接,按钮和表单字段(即任何输入类型=“x”)都可以自然访问,

元素不是。 Tab键顺序遵循源代码中交互元素的顺序。 可以对元素进行样式设置,使其在页面上以不同的顺序显示在源代码中的位置。

要查看Tab键顺序与视觉演示不匹配时的情况,请观看此视频的前30秒:

[…]“/>

编写反映页面可视流的源代码会更好,但是,您可以使用tabindex操作Tab键顺序。 这允许您标记未被识别为交互的元素,例如div,或更改焦点的顺序。

要创建选项卡索引,只需添加tabindex =“#”,为每个实例提供您希望它落入的数字顺序(例如

Tab键顺序适用于整个页面。 如果您的源代码创建了逻辑制表顺序,但您有一个需要添加的Javascript小部件,那么您可以使用tabindex =“0”。 这使得元素可以按“ %E7%9B%B8%E5%AF%B9%E4%BA%8E%E5%85%83%E7%B4%A0%E5%9C%A8%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84%E4%BD%8D%E7%BD%AE“>

2.很好地标记你的字段

您的表单字段标签应尽可能清晰。 Baymard Institute发现“ 92%EF%BC%85%E7%9A%84%E9%A1%B6%E7%BA%A7%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1%E7%BD%91%E7%AB%99%E5%9C%A8%E7%BB%93%E8%B4%A6%E8%BF%87%E7%A8%8B%E4%B8%AD%E6%B2%A1%E6%9C%89%E8%B6%B3%E5%A4%9F%E7%9A%84%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E6%8F%8F%E8%BF%B0%E2%80%9D%E3%80%82″>

在Design Modo的%E4%BF%A1%E7%94%A8%E5%8D%A1%E6%94%AF%E4%BB%98%E8%A1%A8%E7%9A%84

《表单可访问性的7种方式可以促进转换》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

在Threadless的示例中,标签显示为“名称(显示在卡上)”,“卡号(无破折号或空格)”和“安全代码(背面3个,美国证券交易所代码:4个正面)”。 这可以避免犹豫和错误,帮助用户更快地完成表单。

HTML标记

字段标签并不总是标有标签标签。 使用CSS,它们看起来像一个标签。 事实上,在视觉上,它们看起来很好。 但是,它们不可访问,因为没有标签标签,文本与其相应的字段没有关联。

标签标签还会增加输入字段的可点击区域,使灵活性有限的用户更容易选择他们想要与之交互的表单字段。

没有标签标签:

《表单可访问性的7种方式可以促进转换》

带有标签标签:

《表单可访问性的7种方式可以促进转换》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

标签放置

在桌面上查看时,标签与字段的对齐无关紧要。 事实上,很少有研究同意最好放一个表格标签:

  • Matteo Penzo表示输入区域上方的标签%E6%95%88%E7%8E%87%E6%9C%80%E9%AB%98%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%AE%83%E4%BB%AC%E9%9C%80%E8%A6%81%E6%9C%80%E5%B0%91%E7%9A%84%E7%9C%BC%E7%9D%9B%E5%9B%BA%E5%AE%9A%E3%80%82″>
  • CX Partners同意用户发现使用垂直字段标签%E6%89%AB%E6%8F%8F%E8%A1%A8%E5%8D%95
  • 然而,他们还发现左边的标签是左边的标签是最可读的。
  • UX Movement发现,在填写表单的用户之前和之后%E6%89%AB%E6%8F%8F%E6%97%B6“>

Formulate%E5%AF%B9%E8%BF%99%E4%BA%9B%E7%A0%94%E7%A9%B6%E7%9A%84%E6%96%B9%E6%B3%95%E5%92%8C%E7%9B%AE%E6%A0%87

但是,对于移动设备,您可以通过将标签放在字段上方来节省页面宽度。 Luke W简要说明了%E9%A1%B6%E9%83%A8%EF%BC%8C%E5%8F%B3%E4%BE%A7%E5%92%8C%E5%B7%A6%E4%BE%A7%E5%AF%B9%E9%BD%90%E7%9A%84%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9“>

当您将标签放在表单字段中时%EF%BC%8C%E4%BC%9A%E5%87%BA%E7%8E%B0%E8%AE%BF%E9%97%AE%E7%9A%84

如果您仍想在表单字段中使用标签,请按照Stefano” j attardi> 。 该指南显示了如何使用Javascript来保持标签固定,直到用户开始输入。 这允许屏幕阅读器读取标签和有视力的用户以查看标签,直到他们开始输入。

如果您的表单在移动设备上经常查看,请将标签放在字段上方以节省页面宽度。

3.灵活处理数据输入

除了编写易于理解的标签之外,您还应该指定所需的数据格式(如果需要)。 密码创建就是一个很好的例子。 如果您的密码验证严格,请通过列出条件告诉您的用户如何首次传递密码。

《表单可访问性的7种方式可以促进转换》

日期字段是数据格式化可能成为可访问性问题的示例。 在世界各地,不同的国家使用不同的日期格式(你好美国表兄弟)。 在字段标签中指定DD / MM / YY,DD / MM / YYYY或MM / DD / YY,以便尽早清除您期望的格式。

日历提供可以帮助选择日期的上下文。 在一项关于旅游网站的调查中, 71%EF%BC%85%E7%9A%84%E5%8F%97%E8%AE%BF%E8%80%85%E8%A1%A8%E7%A4%BA%EF%BC%8C%E4%BB%96%E4%BB%AC%E5%8F%91%E7%8E%B0%E5%9C%A8%E4%BB%96%E4%BB%AC%E6%89%80%E9%80%89%E6%8B%A9%E7%9A%84%E6%97%A5%E6%9C%9F%E7%9A%84%E4%BB%BB%E4%BD%95%E4%B8%80%E6%96%B9%E7%9C%8B%E5%88%B0%E6%97%A5%E6%9C%9F%E6%98%AF%E6%9C%89%E5%B8%AE%E5%8A%A9%E7%9A%84%E3%80%82″ class=”pure-img aligncenter size-full wp-image-11468″ src=”https://conversionxl.com/wp-content/uploads/2015/07/geico.jpg” alt=”GEICO” width=”550″ height=”400″>

名称字段也会导致可访问性问题。 葡萄牙语名称非常长,因此具有字符限制的字段通常会阻止用户填写表单。 在某些文化中,人们没有名字和姓氏。 没有字符限制的单字段只询问“全名”或“支付卡上显示的名称”应该可以消除因%E6%96%87%E5%8C%96%E6%97%A0%E6%B3%95%E8%AE%BF%E9%97%AE%E8%80%8C%E5%AF%BC%E8%87%B4%E7%9A%84%E4%B8%A2%E5%A4%B1%E8%BD%AC%E6%8D%A2%E3%80%82″>

《表单可访问性的7种方式可以促进转换》

4.构建有用的错误验证

用户犯错误。 清晰的标签和灵活的数据格式有助于防止错误,但您还需要允许错误并使您的错误消息有用。

如果用户犯了一个他们发现很难或无法纠正的错误, %E4%BB%96%E4%BB%AC%E5%BE%88%E5%8F%AF%E8%83%BD%E4%BC%9A%E9%80%80%E5%87%BA%E4%BD%A0%E7%9A%84%E8%A1%A8%E6%A0%BC“>

编写有用的错误消息

不要仅依靠视觉提示来指示错误,例如只是用红色突出显示问题。 盲人和色盲用户将无法看到出现错误。 仅仅因为这个原因你需要一个很好的错误信息。

Netflix在表单上方显示错误消息并仅突出显示错误字段为红色。 可能会错过错误或难以找到字段。

《表单可访问性的7种方式可以促进转换》

编写%E5%A5%BD%E7%9A%84%E9%94%99%E8%AF%AF%E6%B6%88%E6%81%AF%E7%9A%84%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%8E%9F%E5%9B%A0%E6%98%AF%E5%B8%AE%E5%8A%A9%E7%94%A8%E6%88%B7%E7%90%86%E8%A7%A3%E9%97%AE%E9%A2%98%EF%BC%8C%E4%BB%A5%E4%BE%BF%E4%BB%96%E4%BB%AC%E5%8F%AF%E4%BB%A5%E4%BF%AE%E5%A4%8D%E5%AE%83%E3%80%82″>

您的错误消息应该告诉用户错误原因和/或澄清问题。 因此,由于它被留空而产生错误的字段可能会出现错误消息“这是必填字段”。

对于电子邮件地址之类的内容,您可以尝试在发生错误之前检测拼写错误并建议编辑。 如果信用卡号太短,请告诉用户,而不是像“请输入有效的卡号”这样的模糊信息。

Gmail的注册表单会检测错误并相应地调整错误消息。 请参阅密码字段中的示例。 在第一个实例中,密码太短,因此Gmail会反馈错误消息“短密码很容易猜到。 试试一个至少8个字符。“

《表单可访问性的7种方式可以促进转换》

在我的第二次尝试中,我用特殊字符填充了字段,例如£%*%(*)。 这次Gmail的错误消息显示“您的密码允许以下内容:az,AZ,0-9和常见标点符号。

《表单可访问性的7种方式可以促进转换》

我希望如果先前已经说明了密码创建的标准,但这是将错误消息适应错误的一个很好的例子。

请记住将错误消息标记为标签,以便屏幕阅读器正确识别它。

创建轻松访问错误修复

用户如何访问错误字段非常重要。 内联验证会在用户输入时验证用户的输入,并在出现任何错误时立即反馈错误消息。 这对所有用户都有帮助,但对于那些难以浏览表单以便追溯纠正错误的用户特别有用,例如可访问性软件的用户。

《表单可访问性的7种方式可以促进转换》

Luke Wroblewski %E4%BD%BF%E7%94%A8%E5%86%85%E8%81%94%E9%AA%8C%E8%AF%81%E8%BF%9B%E8%A1%8C%E4%BA%86%E4%B8%80%E4%BA%9B

  • 成功率提高22%
  • 将错误减少22%
  • 用户满意度提高31%
  • 完成时间减少42%
  • 减少眼睛固定次数47%

查看有关%E4%BD%BF%E7%94%A8HTML5%E9%AA%8C%E8%AF%81%E8%A1%A8%E5%8D%95%E7%9A%84%E8%BF%99%E4%BA%9B%E8%AF%B4%E6%98%8E%E3%80%82″ lawson>

如果您不使用内联验证,则有其他方法可以确保用户即使是盲人用户也能明白错误。 验证表单后,将键盘焦点更改为第一个字段并显示错误。 这将提醒用户错误并允许他们快速纠正错误。

您还可以添加链接以允许键盘用户直接导航到下一个错误,如SimplyAccessible%E6%89%80%E7%A4%BA“>

《表单可访问性的7种方式可以促进转换》

5.小心使用图标字体

图标字体是通常用于添加想法的图形表示的矢量图标,例如用于表示用户或用户名的人的图标。

图标用于整个页面的很多网站,Github网站就是一个很好的例子:

《表单可访问性的7种方式可以促进转换》

图标字体也用在表单中,例如电子邮件地址字段,密码字段等。

《表单可访问性的7种方式可以促进转换》

无论他们看起来多么漂亮, %E9%87%8D%E8%A6%81%E7%9A%84%E6%98%AF%E8%BD%AC%E6%8D%A2“>

Seren Davies在她的演示文稿Death” to icon fonts>中展示了一个使用图标字体的页面截图。 她还使用覆盖页面上文本的系统字体,使她更容易阅读。

《表单可访问性的7种方式可以促进转换》

如您所见,图标字体看起来像矩形。

必须下载图标字体并且通常非常大,从而减慢了网页的速度。 如果网页加载时间超过三秒,则40%EF%BC%85%E7%9A%84%E7%94%A8%E6%88%B7%E4%BC%9A%E5%8F%8D%E5%BC%B9“>

替代图标字体

SVG“>

《表单可访问性的7种方式可以促进转换》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

在您的设计部门进行辩论? 使用此表来比较SVG%E4%B8%8E%E5%9B%BE%E6%A0%87%E5%AD%97%E4%BD%93“>

6.避免下拉菜单

下拉菜单要求用户多次交互才能访问菜单并进行选择。 对于具有受限运动技能或键盘用户的用户,与下拉菜单进行交互需要更长的时间。

《表单可访问性的7种方式可以促进转换》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

键入比从下拉菜单中选择所需的工作量少,用户必须滚动才能找到相关答案。

自动填充,根据用户输入的内容在表单字段下方显示建议,可以使表单填写更快,并避免需要下拉菜单,例如居住国选择或内部网站搜索。 当Printerland增强其内部搜索时,他们发现%E4%B8%8E%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85%E5%BB%BA%E8%AE%AE%E4%BA%A4%E4%BA%92%E7%9A%84%E8%AE%BF%E9%97%AE%E8%80%85

《表单可访问性的7种方式可以促进转换》

屏幕阅读器自然无法访问建议列表,因为用户必须离开“表单模式”才能导航列表。 遵循Vision” australia>确保每个人都可以使用。

摆脱下拉菜单也会使表单显得更短,从而减少耗时 – 转换可能会留下表格的有视觉用户的奖励。

Luke Wroblewski讨论了%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%A0%E4%B8%8D%E5%BA%94%E8%AF%A5%E4%BD%BF%E7%94%A8%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E5%B9%B6%E5%BB%BA%E8%AE%AE%E8%BF%99%E4%BA%9B%E6%9B%BF%E4%BB%A3%E5%93%81%EF%BC%9A”>

  • 步进者即加号和减号按钮,用于指定数量,例如旅行者数量。
  • 广播组织即“是一组密切相关但相互排斥的选择”,例如经济,商务和头等舱旅行。
  • 切换例如启用或禁用搜索过滤器的功能。
  • 滑块,例如指定价格范围。
  • 按钮输入,“显示否则将隐藏在下拉列表中的选项”。
  • 单个输入字段而不是多个下拉菜单,例如日期选择。

7.避免使用CAPTCHA

当然你现在已经听过了: CAPTCHAs%E4%BC%9A%E6%9D%80%E6%AD%BB%E8%BD%AC%E6%8D%A2“>

《表单可访问性的7种方式可以促进转换》

以下是CAPTCHA破坏您的转化的方式:

CAPTCHA的替代品

我们需要CAPTCHA的良好替代品。

  • 允许用户跳过CAPTCHA,例如Google。 选择跳过验证码的用户可能必须稍后使用手机验证新帐户。

《表单可访问性的7种方式可以促进转换》

要避免CAPTCHA的一些替代方案

蜂蜜罐

蜂蜜罐是隐藏的领域。 这个想法是用户不会看到该领域,但spambots会。 问题是使用屏幕阅读器或其他辅助技术与表单交互的用户将向蜜罐祈祷。 这很公平。 这将产生令人沮丧的体验,并可能失去您的转换。

游戏化的CAPTCHAs

这涉及要求用户完成诸如制作虚拟热巧克力,游戏化验证等任务。

《表单可访问性的7种方式可以促进转换》

遗憾的是,这可能会造成与尝试解决一样多的可访问性问题:

  • 具有受限运动技能的用户将发现难以单击并拖动正确的项目。
  • 盲人用户仍然需要替代此选项。
  • 由于语言或文化参考,这项任务可能在文化上无法进入。

结论

当您设计可访问性时,您可以增加所有人的用户体验。 更好的用户体验可以促进转换,所以这不是一个艰难的决定。此外,作为决策时的经验法则,我总是选择最具包容性的。 如果有一种更易于理解的方式来设计或编码您的表单,为什么不选择它就会失去转换?

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注