表格可访问性实用指南

2020年12月30日11:03:50 发表评论 56 次浏览

本文概述

介绍

从我们开始学习编码的那一刻起, 如果没有用户的帮助就很难做的一件事就是收集用户交互的数据。为了从用户那里收集数据, 我们需要某种形式的表格。

从收集评论到在我们的应用程序中注册, 登录, 购买或提供反馈, 我们都使用表格。表单是网络的重要组成部分, 因此, 我们必须确保每个人都可以与他们进行交互, 无论其是否残障。

为什么重要

可访问性通常仅被视为容纳盲人用户的一种方式, 但远远不止于此。残疾的形式多种多样, 包括手或手臂受伤等暂时性残疾, 互联网缓慢等情况性残疾以及失明等永久性残疾。

我们希望确保所有用户都可以使用表格, 而不会在任何时候都缺乏经验, 并且目标是使这些关键的用户交互尽可能地顺畅。使表格可访问时, 不仅对于残疾人, 而且对于所有人, 都更易于使用。

还需要注意的是, 对于企业来说, 它变得越来越重要-并逐渐成为法律要求-符合网络可访问性标准在许多国家/地区, 包括美国, 英国和加拿大。

在2016年, 目标公司已向全国盲人联合会支付了数百万美元因为其产品图片上没有替代文字, 以及其他可访问性问题。就在最近, 美国最高法院拒绝了多米诺骨牌公司的请愿书在低等法院败给了一名盲人, 该盲人尽管使用屏幕阅读器但无法在其网站上下达命令, 但仍对该公司提起诉讼。

越来越多的国家采用类似的法律并制定更多的标准, 这为网站提供了明确的步骤以实现可访问性, 这只是时间问题。

要考虑的事情

在我们尝试改善现有表单或创建新表单时, 需要考虑以下几点以确定我们需要采取的步骤:

  • 用户是否容易确定他们需要提供哪些信息以及采用哪种格式?
  • 有视觉障碍的人在使用表格时会遇到什么困难?
  • 屏幕阅读器可以很好地处理表格吗?
  • 表格是否合乎逻辑且易于理解?
  • 用户可以仅使用键盘填写表格吗?

如何制作无障碍表格

有多种方法可以帮助改进表单, 并使它们更接近所有人都可以完全访问。以下是一些建议:

编写语义HTML

这是第一, 因为如果使用正确的HTML元素, 已经可以解决许多可访问性问题。结束了100个HTML元素, 每个人都有执行任务的独特目的。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

表格可访问性实用指南1

由于HTML方面的不断改进, 由于自定义, 通常无需使用带有自定义JavaScript代码的其他元素, 使其功能类似于另一个元素。用一个纽扣元素放置在正确的位置, 而不是自定义div外观和功能就像一个按钮。这使屏幕阅读器更容易向用户提供有关该元素的更多信息。

使用适当的HTML输入类型

HTML输入类型很多, 每种类型的创建都是为了使从用户检索特定类型的数据更加容易。通过指定权利类型和名称属性-例​​如, 类型="密码"为了帮助隐藏显示的文字, type =" email"收集电子邮件-浏览器已经过优化, 可以接收数据并向用户提供自动填充建议。

电子邮件HTML输入类型

在移动设备上, 使用正确的输入类型将显示适当的键盘。例如, 当使用type =" tel", 键盘会显示一个键盘来输入电话号码, 而type =" email"显示带有@按钮优先。

手机上的电话HTML输入类型

在手机上输入类型=" tel"

在移动设备上发送电子邮件HTML输入类型

在手机上输入类型="电子邮件"

另外, 请使用<input type =" submit">为你的表单创建提交按钮。这将使用户只需按键盘上的Enter键即可提交。

将HTML输入类型连接到其标签

我认为标签是HTML中最被低估的元素之一。它们功能强大, 可以使很多事情工作得更好。除了了解输入请求什么数据的呈现目的之外, 还可以采取进一步的措施。

通过使用对于属性, 可以提高可用性。

<label for="hungry">Are you hungry?:</label>
<input type="checkbox" name="hungry" id="hungry">

这样, 我们为每个输入元素获得了更大的目标尺寸, 因为单击标签可以使输入成为焦点。这对行动不便的人特别有用, 尤其是当他们必须选择较小的元素(例如收音机或复选框)时。屏幕阅读器还可以读出连接的标签作为输入, 而不是简单地对准焦点时的输入类型。

标签已连接到其复选框

单击标签将触发该复选框。

的对于的属性<标签>标签应等于id相关元素的属性将它们绑定在一起, 如上面的示例所示。对于没有视力障碍的用户, 将标签与其连接表单字段进行视觉关联也应该很容易。

仅使用占位符描述预期的价值

在某些情况下, 用户只剩下占位符而不是标签, 告诉他们在每个输入中应该输入什么。这种方法的问题在于, 一旦用户开始键入, 占位符就会消失。

认知障碍者也倾向于使用占位符, 因为它可以被认为是预先填充的文本。请避免通过占位符提供说明;它们不能替代标签。

提供其他帮助文字

根据表单所需的数据类型, 良好的做法是在需要时在表单顶部添加说明。由于只有一个<标签>每个字段都允许使用元素, 在需要为输入提供描述性文本的情况下, 可以使用咏叹调描述属性。当表单字段成为焦点时, 屏幕阅读器会同时宣布标签和此帮助文本。

<label for="employment_date">Employment date:</label>
<input type="date" name="employment_date" id="employment_date" aria-describedby="employment_date_help">
<span id="employment_date_help">MM/DD/YYYY</span>

另外, 建议你输入示例输入数据, 而不要使用冗长的描述性消息, 因为这样便于用户理解。

与组相关的表单控件

如果你需要提供多个控件以实现特定目的(通常在使用单选按钮或复选框时), 强烈建议你使用<fieldset> </ fieldset>元素将它们分组, 然后使用<legend> </ legend>提供他们的描述性文字。

带字段集的分组控件

具有字段集的分组控件。

使用<fieldset> </ fieldset>和<legend> </ legend>确保将焦点集中在分组控件上后, 向屏幕阅读器用户阅读文本说明。

无障碍验证

表单上的验证是使用JavaScript在服务器端或客户端进行的。 HTML5提供了一系列内置功能, 可帮助验证电子邮件地址等输入。发生错误时, 务必以易于访问的方式向用户显示错误, 这包括使使用屏幕阅读器的用户更容易进行操作。

为此, 错误消息应与属性一起显示角色="警报"因为屏幕阅读器支持此功能, 因此会立即将错误通知用户。错误消息还可以包括建议或示例, 以使用户更容易纠正错误。

一种常见的做法是总结所有错误并将其添加到表单顶部, 但是最好将错误与输入直接关联。在下面添加错误消息, 然后将其与咏叹调-, 并直观地指出哪些输入字段有错误。

对于必填的输入字段, 应该使用标签来标识它们。 HTML5还提供了需要可以添加到表单控件以指示它们是必需的属性。现代Web浏览器支持此属性, 并向用户传达缺少的必需输入。

总结

表单对于Web应用程序的一般可用性至关重要, 因为表单用于互联网上各种类型的交互。使用正确的HTML元素使我们更近了一步, 但是做出有意识的决定来放置其他内容可以确保每个用户, 无论他们的残疾或缺乏, 都将能够使用我们的表单。

要找到更多使用户可以访问整个Web体验的方法, Web内容可访问性指南(WCAG)2.0提供说明, 使残障人士和残障人士都能访问内容。

随着我们改善表单的可访问性和可用性, 每个人都将从中受益。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: