HTML5 aria- and role
在video-js的demo中看到了很多aria-*,不知道干嘛的。google一下,发现aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等。
google到了一个youtube的视频,讲解的很清楚,有代码有示例。估计是Google Developer Day 2011的分享演讲。真是个有责任感人性化的公司啊!
主要内容是说明并演示了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"$amp;>amp;$lt;/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.
如需深入学习,可以看张鑫旭的网站,真的整理得超级好!http://www.zhangxinxu.com/wordpress/?p=2277
HTML5 aria- and role的更多相关文章
- 辛星浅析html5中的role属性
我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...
- [翻译]如何在HTML5中有效使用ARIA
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...
- 无障碍开发(二)之ARIA role属性
role属性 role属性值 含义 HTML示意 说明 alert 表示警告 <p id="ajax_error_alert" role="alert"& ...
- 无障碍开发(六)之ARIA在HTML中的使用规则
ARIA使用规则一 如果你使用的元素( HTML5 )具有语义化,应该使用这些元素,而不应该重新定义一个添加ARIA的角色.状态或属性的元素. 浏览器的语义化标签已经默认隐含ARIA语义,像nav,a ...
- html5相关
1.语义化标签: header\section\aside\footer 2.音视频播放: video\audio 其中video支持ogg\mpeg4\webm格式的视频: 3.canvas 一.画 ...
- 无障碍网页设计(WCAG2.0)
无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- jQuery mobile 核心功能
原文地址:http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/about/features.html 基于 jQuery 核心,使用和jQue ...
- bootstrap 中关于 HTML5 aria-* and role的用法
HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...
随机推荐
- linux安装memcached及memcache扩展
一.安装libevent函数库 下载地址:http://libevent.org 默认被安装到:/usr/local/lib目录下 安装memcached之前需要先安装libevent函数库. 可以通 ...
- linux笔记四-------用户和组的管理
1.linux多用户.多任务操作系统 cat /etc/passwd //查看当前系统用户信息 cat /etc/group //查看当前系统组别信息 2.rbac:基于角色进行权限分配 用 ...
- 手动创建oem
[oracle@std bin]$ /u02/app/product//db_1/bin/emca -config dbcontrol db -repos create STARTED EMCA at ...
- Windows NT驱动程序的基本结构和实例
Windows驱动程序分为两类:一类是不支持即插即用功能的NT式驱动程序:另一类是支持即插即用功能的WDM驱动程序. NT式驱动的基本结构: 1)驱动加载过程与驱动入口函数DriverEntry: 驱 ...
- c#根据后台数据,自动生成checkbox
前端在aspx中,添加生成checkbox的容器div: <div id="container" runat="server"></div&g ...
- 我的web框架设计
做了很久的web开发,学了webform和mvc自己总结了,觉得当下的构架还是有改进的可能的. 其实首先说下我的一些认识(个人认知,欢迎讨论,谢绝砸砖). 我觉得对计算机和数据的操作,本身就是一个单向 ...
- nginx服务器状态监控
Nginx开启监控需在编译时加入with-http_stub_status_module,查看当前Nginx编译参数:/usr/local/nginx/sbin/nginx -V 1.以二级目录方式开 ...
- 文件上传去除"Content-Disposition: form-data"
某个项目中为了统一处理文件上传业务,创建了一个FileUpload Handle,由于上传客户端用到各种技术,当时为了方便断点续传,就直接接收请求中的文件内容(可能是分片),所以处理的不是规范的htt ...
- [LeetCode]题解(python):119 Pascal's Triangle II
题目来源 https://leetcode.com/problems/pascals-triangle-ii/ Given an index k, return the kth row of the ...
- iOS,视图控制器相关(UIViewController)
1.视图控制器各个方法调用时机 2.选项卡(Tab Bar)和导航栏(Navigation Bar) 3.有无控制器的页面跳转 4.页面跳转隐藏底部选项卡 5.获取导航栏和状态栏高度,隐藏导航栏返回按 ...