bootstrap 中关于 HTML5 aria-* and role的用法

HTML5 aria-* and role

在bootstrap中看到role和aria-*,不知道干嘛的。google一下,发现aria的意思是Accessible Rich
Internet Application。
Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等。

HTML5针对html tag增加的属性:role 和 aria-*。

role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button。

ARIA Roles

Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget like a button.

而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如,

<div role="checkbox" aria-checked="checked"></div>

辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。

Add ARIA for screen readers

ARIA attributes provides semantic information to screen readers that is normally conveyed visually.

Note that using ARIA does not automatically implement the
standard widget behavior, you‘ll still need to add focus management and
keyboard navigation yourself.

原文地址:https://www.cnblogs.com/demonxian3/p/9440410.html

时间: 2024-10-11 22:17:03

bootstrap 中关于 HTML5 aria-* and role的用法的相关文章

[翻译]如何在HTML5中有效使用ARIA

ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们,如何让他们使用起来更容易. 使用ARIA的一种方式,是添加ARIA到我们的html中.你可能对在HTML中使用语义化元素很熟悉了,如nav,button,header.使用它们,可以很容易表达块的作用.这些元素可以更好地表达页面中内容的意思,我们可以把这些元素和ARIA组合使用.不过,在一起使用它们

bootstrap中dialog水平垂直居中

方法一: HTML: <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">     Launch demo modal </button> <!-- Modal --> <div class="modal fade" id=&q

bootstrap中form-inline不生效

在container下, <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <form class="form-inline" role="form"> {% csrf_token %} <input type="hidden" id="index" value="1&qu

BootStrap中的按钮使用

原文地址:http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm 网站中事件的触发往往依赖于按钮或者超链接,因此,按钮可以认为是网站不可或缺的组件.而BootStrap也包含了大量的按钮,但是与其他的库有很大的区别.本文则是对如何在BootStrap中使用按钮进行了讲解. 按钮样式 任何只要赋予了.btn这个类的Dom对象会自动继承默认样式:圆角灰色按钮.除此之外,BootStrap也提供了其他的样式选项,如下表所示: 类名 描述 颜色 实

bootstrap中popover.js(弹出框)使用总结+案例

bootstrap中popover.js(弹出框)使用总结+案例 *bootstrap官方说明:http://v3.bootcss.com/javascript/#popovers 一. popover常用配置参数: 1 //常用配置参数: 2 $(document).ready(function() { 3 $('#temp').popover( 4 { 5 trigger:'click', //触发方式 6 template: '', //你自定义的模板 7 title:"标题",

Bootstrap中样式Jumbotron,row, table的实例应用

之前只是大概预览了下Bootstrap中涉及到的相关元素,插件等的使用.接下来将通过实例演练加强对Bootstrap的了解.实例来自http://www.runoob.com/有兴趣的可以上去学习跟w3cschool上的差不多. 为了加深理解,决定先在本地用google浏览器测试后,再写到这里.加深印象. 第一:首先是基本的网页标签的定义.采用的是html5的写法如下: <!DOCTYPE html> <html> <head> <title>Bootstr

Bootstrap中的段落和强调内容

段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能). 3.颜色为深灰色(#333): 4.字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(fon

Bootstrap 中文文档教程

Bootstrap 中文文档教程 全局样式和grid布局—Bootstrap中文使用指南 全局样式1.要求html5文档类型 Bootstrap使用的css属性和html元素依赖于html5的文档类型声明,请确保每个Bootstrap的页面包含下面的代码: <!DOCTYPE html> <html> ... </html> 2.排版和链接样式 全局的排版和链接样式放在scaffolding.less文件内(关于less教程后面会有详细说明).默认做了如下处理: 移除b

bootstrap 中的table样式

在bootstrap中,有丰富的表格样式,这里简单的记录下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con