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.

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

  1. bootstrap中container和container-fluid的区别与用法

    对bootstrap框架有一定了解的朋友都知道,一般页面布局中的开头会使用到container或container-fluid类,那么它们有什么区别呢?不急!下面为您讲解. 我们先来看看官方对这两个类 ...

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

    ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...

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

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  4. Web 开发中应用 HTML5 技术的10个实例教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  5. bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢?

    bootstrap 中是通过写less文件来生成css文件,用什么工具来编写呢? 如果用sublime的话如何实现代码保存后浏览器刷新成最新的代码样式? 或者有什么其他好用的工具? 从网上找了很多方法 ...

  6. 针对BootStrap中tabs控件的美化和完善

    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎.但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题.另外,Bootstrap中的tabs必 ...

  7. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  8. 12、Bootstrap中文文档(其它插件分享)

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  9. BootStrap中的button使用

    原文地址:http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm 站点中事件的触发往往依赖于button或者超链接.因此,button能够觉得是 ...

随机推荐

  1. 为啥百度、网易、小米都用Python?Python的用途是什么?

      Python是一门脚本语言.由于能将其他各种编程语言写的模块粘接在一起,也被称作胶水语言.强大的包容性.强悍的功能和应用的广泛性使其受到越来越多的关注,想起一句老话:你若盛开.蝴蝶自来. 假设你感 ...

  2. 一次python 内存泄漏解决过程

    最近工作中慢慢开始用python协程相关的东西,所以用到了一些相关模块,如aiohttp, aiomysql, aioredis等,用的过程中也碰到的很多问题,这里整理了一次内存泄漏的问题 通常我们写 ...

  3. python之字符串操作方法

    定义及特性: 以引号(单引号,双引号,三引号)包围且不能修改 a= ' \t aBcdE fgFijDlmNopq rSt uTwxy z 123 !@# \t ' 一.判断字符串,返回bool值:F ...

  4. 码云git 使用配置

    码云git 使用配置:www.gitee.com安装:1.Git-2.18.0-64-bit.exe:2.GitExtensions-2.51.04.msi:3.GitExtensionsVSIX.v ...

  5. 【iCore4 双核心板_uC/OS-II】例程四:软件定时器

    一.实验说明: 一些应用程序执行它们的任务时需要延迟一段特定的时间,因此uC/OS-II为我们提供了一些相应的 延时函数,本例程我们使用软件定时器定时500ms点亮相应的LED实现三色LED循环闪烁. ...

  6. nginx+lua的基本原理概念介绍

    一. 概述 Nginx是一个高性能,支持高并发的,轻量级的web服务器.目前,Apache依然web服务器中的老大,但是在全球前1000大的web服务器中,Nginx的份额为22.4%.Nginx采用 ...

  7. session_id()和session_regenerate_id()对原来session文件和其中数据是怎么处理的

    一.session_id()对原来session文件和里面的数据,是怎么处理的? 测验办法:<?php $sid = md5("aaad");session_id($sid) ...

  8. sfc /scannow命令如何能用虚拟光驱完成修复?(xp下的办法)

    我们先光盘文件或用WinRAR压缩软件将ISO文件解压缩到本地磁盘某目录下,如e:\winxp:   在ISO文件上右击,在弹出的菜单中选择“解压到”:   文件较多,久等一会解压完成后文件夹下有很多 ...

  9. mybatis打印完整的sql

    mybatis log plugin

  10. [3]java1.8线程池—ThreadPoolExecutor

    Wiki 上是这样解释的:Thread Pool 作用:利用线程池可以大大减少在创建和销毁线程上所花的时间以及系统资源的开销! 下面主要讲下线程池中最重要的一个类 ThreadPoolExecutor ...