放置标签增强关系的可预测性____20160503

原文地址


说明

当表单区域的label被放置在用户期待看见的位置,用户将会更容易理解复杂表单、更容易定位特定区域。大多数表单的label被放置在区域之前,也就是,对于从左到右的语言,label应该在区域的左边或上边,对于从右到左的语言,label应该在区域的右边或上边。单选按钮和复选按钮的标签被放置在区域之后。

这些位置被定义好,是因为这些是区域、单选按钮、复选按钮的常规位置(和最好预测)。

label被放置在输入区域之前,是因为有时输入区域会在长度上有变化。将label放置在前面,允许label对齐。也让屏幕放大器用户更易定位,因为label紧跟在label之前,也可以垂直查找(当区域是垂直排列时)。最后,如果区域有数据在里面,先阅读label再是内容,用户将会更容易理解和检查数据。

当复选框和单选按钮的宽度不一致时,它们有一个一致的宽度。先是单选和复选按钮,这样允许按钮和标签垂直对齐。


样例

样例1:label在文本输入框的上面

Label在文本输入框的上面

样例2:label在文本输入框的左侧

Label在文本输入框的左侧

样例3:label在单选按钮的右侧

Label在单选按钮的右侧

无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: