WebAIM  - 无障碍记

创建辅助表单万博体育官网网址
万博体育官网网址残疾人专用表单控件

文本输入

<标签对于=“名”>名称:
<输入ID = “名称”类型=“文本”自动填充=“名称”>

匹配对于ID重视与表单控件的标签联系起来。因为ID属性值必须是唯一的每个页面上,表单控件只能有一个相关联的<标签>

注意

标签的另一个好处是,用户可以在标签上点击将焦点设置到表单控件。这是非常有用的小屏幕上和对某些人肢体残疾,针对小复选框和单选按钮时尤为如此。

点击标签也检查适当的形式标注的简单方法。如果点击标签组聚焦到或激活形式的控制,则该标签被编程有关。

文本区


<标签用于=“地址”>输入您的地址:点击
ID = “地址”自动填充= “街道地址”>

复选框

选择你的比萨浇头:


<字段集>
<传奇>选择您的比萨配料:
<输入的ID =“火腿”类型=“复选框”名称=“浇头”值=“火腿”>
<标签=“火腿”>火腿结果
<输入的ID =“香肠”型=“复选框”名称=“浇头”值=“辣”>
<标签=“辣”>辣结果
<输入的ID =“蘑菇”类型=“复选框”名称=“浇头”值=“蘑菇”>
<标签=“蘑菇”>蘑菇结果
<输入的ID =“橄榄”类型=“复选框”名称=“浇头”值=“橄榄”>
<标签= “橄榄”>橄榄

<字段集>包含该组的复选框,并且<图例>标签组。屏幕阅读器可重复的图例组中的每个控制,使图例文本应简要的描述。

单选按钮

选择送货方式:

<字段集>
<图例>选择一个航运方法:
<输入的ID =“过夜”类型=“无线电”名称=“出货”的值=“过夜”>
<标签=“过夜”>隔夜结果
<输入的ID =“2天”类型=“无线电”名称=“出货”的值=“2天”>
<标签=“2天”>两个天结果
<输入的ID =“接地”类型=“无线电”名称=“出货”的值=“接地”>
<标签= “接地”>接地
注意

当一个更高级别的标签是必要的字段集和传说,才应使用。单复选框或基本单选按钮,从他们的标签有意义本身并不需要字段集和传说。

嵌套的fieldsets会导致奇屏幕阅读器的行为,应该避免。

其他输入类型

其他<输入>类型 -密码文件日期时间(及各种数据/时间的替代品),电子邮件联系电话网址颜色范围- 还必须有相关的使用描述性文本<标签>元素。

选择菜单


<标签=“favcity”>你最喜欢哪个城市?
<选择ID = “favcity” 名称= “选择”>
<选项值= “1”>阿姆斯特丹
<选项值= “2”>布宜诺斯艾利斯
<选项值= “3”>德里
<选项值= “4”>香港
<选项值= “10”>伦敦
<选项值= “6”>洛杉矶
<选项值= “7”>莫斯科
<选项值= “8”>孟买
<选项值= “9”>纽约
<选项值= “10”>圣保罗
<选项值= “11”>东京

分组选项

期权长列表可以用分组。然而,由于有时忽略了屏幕阅读器环境,不要依赖这种技术来传达重要方面。


<标签=“favcity2”>你最喜欢哪个城市?
<选择ID = “favcity2” 名称= “favcity2”>

<选项值= “3”>德里
<选项值= “4”>香港
<选项值= “8”>孟买
<选项值= “11”>东京


<选项值= “1”>阿姆斯特丹
<选项值= “10”>伦敦
<选项值= “7”>莫斯科


<选项值= “6”>洛杉矶
<选项值= “9”>纽约


<选项值= “2”>布宜诺斯艾利斯
<选项值= “10”>圣保罗

多选菜单

多选择菜单允许用户选择多个选项。


注意

避免使用多选菜单。并非所有的浏览器都提供了他们直观的键盘导航。许多用户不知道使用控制/命令或Shift +单击选择多个项目。A组的复选框提供了一个更方便的方式类似的功能。万博体育官网网址

纽扣

屏幕阅读器宣布嵌套文本<按钮>元件,并且属性为输入按钮。表单按钮绝不能是空的。

值=“提交搜索”>
值=“复位”>
<按钮>启用

复位按钮不应该使用除非特别需要,因为它们很容易误点击。

图像按钮

图像按钮()必须具有相当的ALT文本。否则,屏幕阅读器用户将只听到“按钮”,没有指示的按钮做什么。

ALT = “搜索”SRC = “submit.png”>

JavaScript的跳转菜单

跳转菜单是<选择>(或窗口小部件行为类似一个自定义的),该触发器页改变或导航,当用户点击鼠标的选项。

当使用键盘导航,只浏览使用箭头键的选项可以触发这种改变。这个意外的导航可以混淆视听,迷惑的键盘和屏幕阅读器的用户。跳转菜单应该有一个标准来代替<选择>菜单和按钮,与该按钮充当触发。确切的行为跨浏览器和操作系统的不同而不同。

坏榜样

这是问题的一个典型例子。在某些浏览器,浏览到第一个选项将被触发自发当用户试图探索的选项。

好的例子

从触发提交在所有浏览器按钮支持键盘辅助功能。用户可以使用向上探索的选项/下箭头键,然后单击提交按钮。

重要的属性

自动完成

表单域收集某些类型的用户特定信息需要适当的自动完成属性识别输入的目的。当普通的字段类型(姓名,地址,出生日期等)始终在网络上代表的用户都能受益。以编程方式确定每个字段的目的的能力,使得填写表格更容易,尤其是对人有认知障碍。

<标签用于= “NAME2”>名称:
<输入ID = “NAME2”类型=“文本”自动完成=“名”>

必填项

必填字段通常带有星号,但屏幕阅读器并不总是宣布这个角色。我们推荐以下两种技术,或者干脆包括标签“需要”这个词之一。

这没关系使用星号作为一个视觉提示,只要它是伴随着下面的屏幕阅读器友好的技术之一。

咏叹调,需要

运用咏叹调-需要=“真”属性的表单控件将导致与标签,这一切沿着屏幕阅读器宣布“必需的”。无验证或“执法”机制来随着这个属性,它没有视觉冲击力。

<输入的ID = “NAME3” 类型= “文本” 自动填充= “名称”咏叹调-需要=“真”>

需要

该HTML需要同样的属性使屏幕阅读器宣布“必需的”,同时也引发了浏览器与视觉提示,如果用户离开领域的空白,以警告用户。当它出现时屏幕阅读器也宣布提示内容。

<输入的ID = “NAME4” 类型= “文本” 自动填充= “名称”需要>

无效的领域

当执行表单验证,应用ARIA-无效= “真”属性窗体控件将导致屏幕阅读器宣布“无效”时conrol获得焦点,而这一切。没有视觉冲击力。您可以应用此必填字段用户留空或在一些其他的方式验证失败的字段。这有利于谁也看不出这通常被用来标记错误直观的图标和颜色变化的用户。

<输入的ID = “NAME5” 类型= “文本” 自动填充= “名称”ARIA-无效= “真”>