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. PHP随机获取预设的值
			
    前面我们讲了php怎么获取随机数,<?php echo rand(1000,2000); ?> 一行代码就能搞定,如果要获取ASP,PHP,JAVASCRIPT,AJAX,CSS,JQUE ...
    
			
    2. 
						
  2. 【MyEclipse异常】更换工作空间无法启动的异常
			
    
			
    3. 
						
  3. 梅尔倒谱系数特征（Mel-frequency cepstral coefficients，MFCC）
			
    引言 感知实验表明,人耳对于声音信号的感知聚焦于某一特定频率区域内,而非在整个频谱包络中. MFCC特征是应用非常广泛的语音特征. 语音的MFCC特征是基于人耳感知实验得到,将人耳当成特定的滤波器,只 ...
    
			
    4. 
						
  4. pycharm的Structure中的图标含义
			
    1.在使用pycharm的Structure时可以看到有这些图标.图标上的字母是简写,具体含义如下在pycharm中是自动补全的变量的类别  p:parameter 参数  m:method 方法   ...
    
			
    5. 
						
  5. nginx 日志之 access_log过滤
			
    一个网站,会包含很多元素,尤其是有大量的图片.js.css等静态元素.这样的请求其实可以不用记录日志. 配置示例: location ~* ^.+\.(gif|jpg|png|css|js)$ { a ...
    
			
    6. 
						
  6. Eclipse和Tomcat安装使用
			
    Tomcat 1.下载地址:http://tomcat.apache.org/ 可以选择安装版或者压缩包版本 解压后: |-bin: 存放tomcat的命令. catalina.bat 命令: sta ...
    
			
    7. 
						
  7. springboot项目打包成jar/war包
			
    springboot项目打包过程中包含第三方jar 开发IDE是IntelliJ IDEA,数据库是mysql,内置服务器tomcat. 打包步骤: 1. 确定项目调试运行没问题 2. 将第三方jar ...
    
			
    8. 
						
  8. Maven 教程（15）— 实现多个项目关联自动化构建（maven-invoker-plugin插件的使用）
			
    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79726664 一.场景设想一个团队正在开发一个项目 bus-core-api,并 ...
    
			
    9. 
						
  9. 以前写的canvas 小游戏 贪吃蛇代码
			
    效果如图,完成了贪吃蛇的基本的功能 代码地址 :https://github.com/my-new-git-hub/canvasSnake.git 预览地址:https://www.kzc275.to ...
    
			
    10. 
						
  10. 仿微信、qq聊天，@好友功能
			
    文章主要介绍我们平时用的qq,微信输入框里面的@功能 如图,输入@符号 会出现一个ul ul的位置随着@符号的位置变动 下面是代码 希望对大家有用 直接全部复制,在编辑器中打开 即可 <!DOC ...
    
			
    11.