WAI-ARIA

Web Accessibility Initiative’s Accessible Rich Internet Applications

无障碍网页倡议–无障碍的富互联网应用，也简称ARIA

是一种技术规范，自称“有桥梁作用的技术” 。

所以这样说，是因为在HTML提供相应的语义功能之前，它会使用属性来填补一些语义上的空白。

地标角色（landmark role）

地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定role属性就可以了。

一些可用的地标角色：

 <body>

 <!-- 开始页面容器 -->

 <div class="container">

   <header role="banner">

     ...

     <nav role="navigation">

       ... [包含多个链接的无序列表] ...

     </nav>

   </header>

   <!-- 应用CSS后的第一栏 -->

   <main role="main">

     <article>

       ...

     </article>

     <article>

       ...

     </article>

     ... [其他区块] ...

   </main>


 
												


											
HTNL5-ARIA role属性的更多相关文章
	

    
						
  1. 无障碍开发（二）之ARIA role属性
		
    role属性 role属性值 含义 HTML示意 说明 alert 表示警告 <p id="ajax_error_alert" role="alert"& ...
    
		
    2. 
								
  2. html 里面的 role 属性是什么意义和用途
		
    使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,属于WAI-ARIA. 例如点击的按钮,就是role="button":会让这个元素可点击:本质上是增强语义性,当 ...
    
		
    3. 
						
  3. html 里面的 role 属性是什么意思
		
    role="button" role是什么意思? html 里面的 role 属性是什么意义和用途 使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,属于WAI-A ...
    
		
    4. 
						
  4. 辛星浅析html5中的role属性
		
    我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...
    
		
    5. 
						
  5. boostrap-非常好用但是容易让人忽略的地方【6】：role属性
		
    普通样式,鼠标hover没有任何效果 <span>content</span> 加上role属性的样式,鼠标hover会有cursor:pointer的效果 <span  ...
    
		
    6. 
						
  6. Bootstrap学习遇到的role属性--- 无障碍网页应用属性
		
    以前接触过Bootstrap,但也只是仅仅接触,现在重新学习下,今天看到一个例子中的属性有一个role, 查阅资料发现这个是--WAI-ARIA无障碍设计属性: 通俗说是该设计为了一些盲人,失聪,残疾 ...
    
		
    7. 
						
  7. type和role属性有什么区别呢
		
    type是规定标签的类型,比如<input />标签中使用type="button"就是代表一个按钮 使用type="text" 就是一个文本框,t ...
    
		
    8. 
						
  8. WAI-ARIA无障碍网页应用属性完全展示
		
    本文为原创辛苦之作,尊重劳动,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wordpress ...
    
		
    9. 
						
  9. WAI-ARIA无障碍网页应用属性完全展示——张鑫旭
		
    一.你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员.尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. shell脚本启动所有集群节点
			
    #profile变量追加到.bashrc中 cat /etc/profile >> ~/.bashrc #start-all-cluster.sh  启动脚本 #!/bin/bash ec ...
    
			
    2. 
						
  2. Candy Treasure Box
			
    This is an interesting puzzle game. In the game, you need to use your brain, think carefully, operat ...
    
			
    3. 
						
  3. redhat quay 安装试用
			
    最近redhat 开源了quay 容器镜像管理平台,参考官方文档跑的时候需要订阅,各种不好使,然后就自己基于源码构建了 一个镜像(使用官方的dockerfile,构建出来的太大了1.9G 以及push ...
    
			
    4. 
						
  4. 回溯法 | n皇后问题
			
    今早上看了一篇英语阅读之后,莫名有些空虚寂寞冷.拿出算法书,研读回溯法.我觉得n皇后问题完全可以用暴力方式,即先对n个数进行全排列,得到所有结果的下标组合,问题规模为n!. 全排列花了比较久的时间才编 ...
    
			
    5. 
						
  5. 第02组Beta冲刺（2/4）
			
    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...
    
			
    6. 
						
  6. nginx 实际部署配置文件示例
			
    user nobody; worker_processes ; error_log logs/error.log; pid logs/nginx.pid; events { worker_connec ...
    
			
    7. 
						
  7. Hotspot的栈
			
    各种类型的线程他们所需要的栈的大小其实是可以通过不同的参数来控制的: java_thread的stack_size,其实就是-Xss或者-XX:ThreadStackSize的值 compiler_t ...
    
			
    8. 
						
  8. Spring Security教程之session管理（十一）
			
    1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护 Spring Security通过http元素下的子元素s ...
    
			
    9. 
						
  9. 计算机原理学习（1）-- 冯诺依曼体系和CPU工作原理
			
    前言 对于我们80后来说,最早接触计算机应该是在95年左右,那个时候最流行的一个词语是多媒体. 依旧记得当时在同学家看同学输入几个DOS命令就成功的打开了一个游戏,当时实在是佩服的五体投地.因为对我来 ...
    
			
    10. 
						
  10. 【Gamma阶段】第六次Scrum Meeting
			
    冰多多团队-Gamma阶段第六次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 语音输入shell应用:基于pytorch ...
    
			
    11.