深入理解Bootstrap
上QQ阅读APP看书,第一时间看更新

1.8 HTML5辅助设计

在Bootstrap组件里,很多示例里都出现了不是以data-开头的自定义属性,我们称之为辅助属性。这些属性是HTML5新提出的概念,用于支持残障人士、老年人、文化水平不高或暂时患病的人使用屏幕阅读器进行页面访问。这种逐渐增强和易访问的丰富Internet应用程序简称CSS。示例如下:

<div role="navigation " aria-labelledby="myModalLabel" aria-hidden="true"></div>

上述示例中的aria-hidden="true"表示对屏幕阅读器隐藏该div元素,我们称该ariahidden为CSS状态属性。

上述示例中的aria-labelledby="myModalLabel"告诉屏幕阅读器,这是一个modal,一般用在区域元素上,它的值一般和标题或是标签元素的ID对应。

假定屏幕阅读器遇到包含role=navigation的页面且其上还有一个div元素,屏幕阅读器就会知道该div元素用于导航,用户将能直接使用导航功能而非通过所有链接选择标签。role支持的属性值如表1-7所示。

表1-7 常用role属性列表

更多关于CSS的详细内容,可以阅读下面两篇文章:

http://msdn.microsoft.com/zh-cn/magazine/jj863135.aspx

http://www.zhangxinxu.com/wordpress/?p=2277