使用aria-describedby属性为交互控件提供描述性标签____20160503

说明

该技巧的目的是说明怎么样使用WAI-ARIA aria-describedby属性为用户界面元素提供编程式确定的描述信息。aria-describedby属性通过一个id参照表可以链接描述信息到一个或更多元素。id参考列表包含一个或多个不同的元素id；

注意：aria-describedby属性不是设计来参考外部资源的描述，因为它是一个id，必须引用相同DOM文件中的元素。

样例

样例1：使用`aria-describedby`属性描述临近`button`的行为

在线样例

样例2：使用`aria-describedby`属性将说明与表单联系起来

效果

样例3：使用`aria-describedby`为`button`提供详细信息

效果

选择该网页的字体大小

选择该网页的颜色

自定义此页面上使用的布局和样式

样例4：使用`aria-describedby`属性为表单区域连接提示

role="tooltip"表示提示文本
aria-hidden字符串。可选值为true和false, true表示元素隐藏(不可见)，false表示元素可见。

效果

行内：提示样例1 ...

提示样例1

创建账户

名:

样例5：XHML

该样例使用MIME类型的应用在XHTML中编码。该MIME不是在所有客户端都支持。aria-describedby属性直接被加入到XHTML标记中，不需要额外的脚本。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="CH-zh">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<title>aria-describedby属性的说明</title>
<style type="text/css">
	div.form p { clear:left; margin: 0.3em 0;}
	.left {
	  float:left;
	  width:400px;
	}
	.right {
	  width:100px;
	  text-align:right;
	}
</style>
</head>
<body>
	<p>该页面上的按钮使用可访问丰富互联网应用aria-describedby属性提供按钮行为的更多详细信息。</p>
	<div class="form">
		<p><span class="left" id="fontDesc" >选择该页面使用的字体样式和大小</span>
		<span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
		字体</button></span></p>
		<p><span class="left" id="colorDesc" >选择该页面使用的颜色</span>
		<span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
		颜色</button></span></p>
		<p><span class="left" id="customDesc" >自定义页面使用的布局和样式</span>
		<span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">
		自定义</button></span></p>
	</div>
</body>
</html>

效果

该页面上的按钮使用可访问丰富互联网应用aria-describedby属性提供按钮行为的更多详细信息。

选择该页面使用的字体样式和大小

选择该页面使用的颜色

自定义页面使用的布局和样式

样例6：

该样例是使用脚本给页面上的按钮添加aria-describedby属性。该样例创建一个buttonIds数组来存放包含描述文本的元素的id。在windows对象的onload事件中调用setDescribedBy()。setDescribedBy()功能循环访问所有按钮元素调用每个按钮元素的setAttribute()来设置aria-describedby属性。每一个按钮的aria-describedby属性被设置了包含描述文本的元素id。使用用户代理或者支持，wai-aria的辅助技术，当用户界面控件接收到焦点时提供描述。

<html lang="CH-zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>aria-describedby属性说明</title>
<style type="text/css">
div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
  width:100px;
  text-align:right;
}
</style>
<script type="text/javascript">
//<![CDATA[

// 使用数组为页面上每个按钮链接一个按钮id
// 该元素的id包含描述按钮的文本
var buttonIds = new Array();
buttonIds["fontB"]= "fontDesc";
buttonIds["colorB"] = "colorDesc";
buttonIds["customB"] = "customDesc";

// 该功能在页面加载之后运行，并设置aria-describedBy
// 每个元素的属性引用id值的数组
function setDescribedBy(){
  if (buttonIds){
    var buttons = document.getElementsByTagName("button");
    if (buttons){
      var buttonId;
      for(var i=0; i<buttons.length; i++){
        buttonId = buttons[i].id;
        if (buttonId && buttonIds[buttonId]){
          buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
        }
      }
    }
  }
}

// 模拟行为功能——现在仅仅显示一个警告
function doAction(theAction){
  alert("执行 " + theAction + " 操作");
}

window.onload=setDescribedBy;

//]]>
</script>
</head>
<body>
<p>该页面上的按钮使用可访问丰富互联网应用<code>aria-describedby</code>属性提供按钮行为的更多详细信息。
</p>
<div class="form">
<p><span class="left" id="fontDesc" >选择该页面使用的字体样式和大小</span>
  <span class="right"><button id="fontB" onclick="doAction('Fonts');"> 字体 </button></span>
</p>
<p><span class="left" id="colorDesc" >选择该页面使用的颜色</span>
  <span class="right"><button id="colorB" onclick="doAction('Colors');"> 颜色 </button></span>
</p>
<p><span class="left" id="customDesc" >自定义该页面的布局和样式</span>
  <span class="right"><button id="customB" onclick="doAction('Customize');"> 自定义 </button></span>
</p>
</div>
</body>

效果

该页面上的按钮使用可访问丰富互联网应用aria-describedby属性提供按钮行为的更多详细信息。

选择该页面使用的字体样式和大小

选择该页面使用的颜色

自定义该页面的布局和样式

使用aria-describedby属性为交互控件提供描述性标签____20160503

说明

样例

样例1：使用aria-describedby属性描述临近button的行为

样例2：使用aria-describedby属性将说明与表单联系起来

样例3：使用aria-describedby为button提供详细信息

样例4：使用aria-describedby属性为表单区域连接提示