[HTML 5] aria-live
"aria-live" is a method to tell the information to the screen reader once value changed.
aria-live has three value:
1. off: nothing will happen
2. polite: wait user finish current action, then tell user, cover most use cases.
3. assertive: interpute whatever users are current doing.
<form action="">
<span class="label" id="currValue">Current value</span>
<span aria-describedby="help" tabindex="0" role="spinbutton" aria-labelledby="currValue">
<span aria-live="assertive" id="number">90</span>
<button tabindex="-1" type="button" id="add" title="add 10" aria-controls="number">Add</button>
<button tabindex="-1" type="button" id="subtract" title="subtract 10" aria-controls="number">Subtract</button>
</span>
<div id="help">
Use "add" and "subtract" buttons, or up and down arrows, to add or subtract 10, respectively.
</div>
</form>
[HTML 5] aria-live的更多相关文章
- 译文 对无障碍网页应用(ARIA)的选择
//本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom marku ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- ARIA无障碍技术
ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的 ...
- [翻译]如何在HTML5中有效使用ARIA
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...
- ARIA(Accessible Rich Internet Application)
ARIA 为Web app提供满足用户不同需求的解决方案.建设起用户和软件之间的桥梁. 新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet App ...
- [HTML5] How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (ARIA)
There are many techniques for hiding content in user interfaces, and not all are created equal! Lear ...
- [HTML 5] Styling with ARIA
See if you can do a better job styling this button using ARIA states. One huge benefit to styling wi ...
- [HTML5] Why ARIA?
For some reason, you build a custom checkbox component, if without ARIA in mind, basiclly this site ...
- [ARIA] Add aria-expanded to add semantic value and styling
In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .op ...
- [ARIA] Accessible modal dialogs
Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the na ...
随机推荐
- Codeforces Round #349 (Div. 2) C. Reberland Linguistics DP+set
C. Reberland Linguistics First-rate specialists graduate from Berland State Institute of Peace a ...
- vue.js 父组件如何触发子组件中的方法
组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- 2014/09/20 关于ArrayList的几种操作
1.删除ArrayList集合元素 删除ArrayList集合里面的元素时,提供了Clear方法,Remove方法,RmoveAt方法和RemoveRange方法. Clear方法是移除所有的元素 R ...
- 大数据攻城狮之Linux基础------rpm软件管理
rpm的英文名称为: Redhat package manager 常用的命令加组合: i 安装 rpm -ivh 软件包名 当然我们的rpm也可以支持多包同时操作 rpm -ivh 软件包1 软件包 ...
- java三大版本解析
JAVA三大版本代表着JAVA技术的三个应用领域:JAVASE.JAVAME.JAVAEE. JAVA以前很长一段时间被称为JAVA2,所以现在很多人习惯称为J2SE.J2ME.J2EE,它们表示的含 ...
- 5个对话框和FileStream:文件流
1.private void button1_Click(object sender, EventArgs e) { colorDialog1.ShowDialog();//显示颜色选择器 panel ...
- DB2大数据量优化查询解决方案
利用DB2表分区的功能对大数据量的表进行分区,可以优化查询. 表分区介绍: 表分区是一种数据组织方案,它根据一列或多列中的值把表数据划分为多个称为数据分区 的存储对象. (我觉得表分区就类似于Wind ...
- MAVEN学习笔记之基础(1)
MAVEN学习笔记之基础(1) 0.0 maven文件结构 pom.xml src main java package resource test java package resource targ ...
- 如何拿到阿里算法校招offer
好多同学有问过怎么能拿到阿里算法类校招的offer,刚好看到这篇文章分享给大家,详情可以看原文链接,原文链接中有视频讲解. 师兄师姐的建议: 之前初学算法的时候上过的公开课和看过的书 1. Cours ...
- Windows Phone - 按钮/button 控件
System.Windows.Controls.Button button控件一.button控件的各种样式的展示可以通过 …… 来给控件定义公共的样式调用样式的方法:在Button控件上添加样式 ...