文档章节

ARIA无障碍技术

o
 osc_y8yehimr
发布于 2019/03/20 09:44
字数 1056
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

ARIA

  Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的)对于残障人士更易使用的各种机制。例如,ARIA 提供了易用的导航地标、JavaScript 组件、表单提示以及错误信息、实时内容更新等。主要用来标识页面中涉及到动态交互的地方,这些交互通常是由js和相关技术来实现的,例如浮出层,对话框弹出,下拉列表以及伪元素等。

  ARIA 是一组特殊的易用性属性,可以添加到任意标签上,尤其适用于 HTML。role 属性定义了对象的通用类型(例如文章、警告,或幻灯片)。额外的 ARIA 属性提供了其他有用的特性,例如表单的描述或进度条的当前值。

  ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此,实现方式有所不同,而且旧的技术对其支持不好(或者不支持)。使用可以优雅降级的“安全的” ARIA,或者要求用户升级使用新的技术。

1 <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />

  由于这个滚动条是用div写的,没有字面含义。然而,对开发者来说,在HTML4中,又没有更多的语义化的标签,所以我们需要引入ARIA这个角色和属性,来给元素增加特定的属性。举个例子,role="progressbar"这个属性告诉浏览器,该元素其实是一个JavaScript实现的进度条组件。aria-valuemin 和aria-valuemax 属性表明了进度条的最小值和最大值。 aria-valuenow则描述了当前进度条的状态, 因此它得用JavaScript来更新。

1 <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div>

       这个div模拟了radio的功能,在平时读屏软件是分辨不出来的,但是加上role及aria-checked状态,屏幕阅读器就能阅读出其内容了。

使用aria-label时需注意,

  (1) 同时使用aria-label和label for时,忽略后者。

  (2) 同时使用aria-label和aria-labelledy时,忽略前者

  (3) IE不支持对input使用aria-label,但是支持aria-labelledby。

  (4) 使用aria-labelledby时,即使对应的注释文本被隐藏,依然能读出来。

  (5) label for针对表单元素和div有效,span不行

       (6) 表单元素中input type=button,不用加注释,读屏软件可以读出value

       (7) 不是所有的title读屏软件都读,a,span以及button的title个别情况下不读,a,span在IE下直接读标签里的内容,button读value值

       (8) a标签必须加上href属性之后才能定位,否则就要用到tabindex.

  在HTML5中,可以验证所有的ARIA属性。新的标记元素(<main>, <header>, <nav> etc)都已具有了ARIA角色,所以就没必要再标注说明了。

tabIndex

当使用键盘时,tabindex是个关键因素,它用来定位html元素。

       tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)

       原本在Html中,只有链接a和表单元素可以被键盘访问(即使是a也必须加上href属性才可以),但是aria允许tabindex指定给任何html元素。

       当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。

       当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。

       当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。

       在IE中,tabindex范围在1到32767之间(包括32767)

       在FF, Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时一样。           

       这个估计跟各个浏览器对int型的解析有关。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
无障碍开发(一)之初认识

ARIA是什么? ARIA是W3C的 Web无障碍推进组织发布的可访问富互联网应用实现指南。WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。是Web Accessibility Initiativ...

osc_1i3i83o4
2019/09/20
1
0
ARIA

WAI-ARIA无障碍网页应用属性完全展示 一、你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼...

水之心05
2015/08/09
114
0
WAI-ARIA无障碍网页应用属性完全展示

一、你至少应该知道ARIA是什么东西! WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助...

林文安
2012/06/01
434
0
无障碍开发(七)之实例讲解

radio <div role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</div> 这个div模拟了radio的功能,在平时读屏软件是分辨不出来的,但是加上role及aria-ch......

osc_uulhuymj
2019/09/23
3
0
每日 30 秒 ⏱ HTML Cosplay

简介 无障碍、WAI、ARIA、a11y、Accessibility、框架选择 如何向 介绍兔子长什么样?有的同学可能会说: 毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 那如何向 介绍网页长什么样?有看...

zhangxiangliang
2019/04/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试必问之mysql基础

mysql存储引擎 如何选择mysql存储引擎 先得了解下各个存储引擎区别 功能 MylSAM MEMORY InnoDB Archive 功能 MylSAM MEMORY InnoDB Archive 存储限制 256TB RAM 64TB None 支持事务 No No Ye...

lipengxs
39分钟前
16
0
错误:将标头发送到客户端后无法设置标头 - Error: Can't set headers after they are sent to the client

问题: I'm fairly new to Node.js and I am having some issues. 我对Node.js相当陌生,遇到了一些问题。 I am using Node.js 4.10 and Express 2.4.3. 我正在使用Node.js 4.10和Express 2......

法国红酒甜
51分钟前
18
0
Spring中事务不生效的几种情况

数据库引擎不支持事务。 没有被Spring管理。 方法不是public的。 自身调用问题。 数据源没有配置事务管理器。 不支持事务。 异常被吃了。 异常类型错误。 事务失效类型: 数据库引擎不支持事...

九分石人
今天
31
0
从Linux内核理解JAVA的NIO

前言 IO 可以简单分为磁盘 IO 和 网络 IO ,磁盘 IO 相对于网络 IO 速度会快一点,本文主要介绍 磁盘 IO ,网络 IO 下周写。 JAVA 对 NIO 抽象为 Channel , Channel 又可以分为 FileChannel ...

万古云霄
今天
22
0
Material Design用在c#的wpf app中

官网:http://materialdesigninxaml.net/ 样式丰富 做网站和手机不粗 个人觉得不适合用在.net framework中,在.net core中应该大有作为。...

齐勇cn
今天
28
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部