无障碍性设计指南之 Web 表单设计

阅读时长 5 分钟读完

Web 表单是 Web 应用程序中最常用的元素之一。然而,很多 Web 表单并不是对所有人都友好的。对于视力受损、听力受损、肢体残疾、认知障碍等人群,使用 Web 表单可能会带来困难。因此,本文将介绍无障碍性设计指南之 Web 表单设计,以帮助开发者创建易于使用的 Web 表单。

如何创建无障碍的 Web 表单

1. 标记表单元素

在 HTML 中,表单元素应该使用标准的 HTML 标记。例如,文本输入应该使用 <input type="text"> 标记,密码输入应该使用 <input type="password"> 标记,单选按钮应该使用 <input type="radio"> 标记等等。这样做可以让用户代理(如屏幕阅读器)正确地解释表单元素。

2. 提供标签

每个表单元素都应该有一个标签来描述它。标签应该与表单元素相关联,使得用户代理可以将标签与表单元素关联起来。有两种方法可以将标签与表单元素相关联:

  • 使用 <label> 标记
  • 使用 aria-label 属性

使用 <label> 标记可以让用户点击标签时自动将焦点移动到相应的表单元素上。例如:

使用 aria-label 属性可以在没有可见标签的情况下提供标签。例如:

3. 提供说明

对于一些复杂的表单元素,需要提供更详细的说明。例如,日期选择器、时间选择器等。可以使用 aria-describedby 属性将说明与表单元素关联起来。例如:

4. 提供错误提示

当用户提交表单时,如果表单元素的值不符合要求,则应该提供错误提示。错误提示应该清楚地说明错误的原因,并指出如何纠正。可以使用 aria-invalid 属性将错误提示与表单元素关联起来。例如:

5. 提供键盘快捷键

对于一些肢体残疾或者认知障碍的用户,使用键盘进行操作可能更为方便。因此,需要为表单元素提供键盘快捷键。例如:

  • <input type="checkbox">:使用空格键选中或取消选中
  • <input type="radio">:使用 Tab 键选中下一个选项,使用箭头键进行选项切换
  • <select>:使用 Tab 键移动到下一个选项,使用箭头键进行选项切换

示例代码

下面是一个无障碍的 Web 表单的示例代码:

-- -------------------- ---- -------
------
  ------ ---------------------------
  ------ ----------- ------------- ---------

  ------ --------------------------
  ------ --------------- ------------- ---------

  ------ -----------------------
  ------ ------------ ---------- -------- --------------------
  -- --------------------------------

  ------ ------------------------
  ------- ----------- ---------
    ------- ---------------------
    ------- -----------------------
    ------- -------------------------
  ---------

  ----------
    ---------------------------
    ------ --------------- ---------- ------------ --------------
    ------ ----------------------
    ------ --------------- ----------- ------------ ---------------
    ------ -----------------------
    ------ --------------- ----------- ------------ ---------------
    ------ -----------------------
  -----------

  ----------
    -------------------------
    ------ --------------- ---------- ------------ --------------
    ------ ----------------------
    ------ --------------- ---------- ------------ --------------
    ------ ----------------------
    ------ --------------- ------------ ------------ ----------------
    ------ ------------------------
  -----------

  ------- -------------------------
-------

总结

无障碍性设计可以让所有人都能够方便地使用 Web 应用程序。在 Web 表单设计中,我们需要标记表单元素、提供标签、提供说明、提供错误提示以及提供键盘快捷键等。通过这些方法,我们可以创建无障碍的 Web 表单,让所有人都能够方便地使用我们的应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/658e24f3eb4cecbf2d3f822a

纠错
反馈