使用临近按钮来标记区域的目的____20160504

原文地址


说明

当一个按钮在输入区域中承担一个功能,且该按钮有一个清楚的文本标签,且被渲染在临近输入区域,该按钮也为输入区域承担标签的作用。该标签帮助我们理解输入区域的目的,而不需要在网页上引入重复文本。标记输入区域的按钮通常在紧跟在输入区域后面。

注:该区域必须也有一个编程式确定的名字。


样例

样例1:搜索功能

当一个网页包含文本输入框和一个搜索按钮来实现搜索功能,这个按钮被放置在文本输入框的右边,这样就能很清楚的知道文本输入框是输入文本的地方;

一个具有文本的按钮被放置在输入区域的右边,来标记输入区域.

样例2:选择表单

美国用户必须填表单,因为法律和要求在不同的州是不一样的,用户需要选择自己州的表单样式。一个下拉菜单允许用户去选择一个州。临近按钮的标签为选择州表单。点击按钮,可以跳转到该州的表单网页。


无障碍效果

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

测试人:

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