[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 486B
Let's define logical OR as an operation on two logical values (i. e. values that belong to the set { ...
- 关于Spring中的<context:annotation-config/>配置作用
转自:https://www.cnblogs.com/iuranus/archive/2012/07/19/2599084.html 当我们需要使用BeanPostProcessor时,直接在Spri ...
- 通过ip获取地址
<?php /** * IP 地理位置查询类 * * @author 马秉尧 * @version 1.5 * @copyright 2005 CoolCode.CN */ class IpLo ...
- [Oracle] Oracle终极解锁
一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长时间不释放,有时实在没办法,只好重启数据库.现在提供一种方法解决这种问题,那就是在ORACLE中杀不 ...
- 关于Html基础语法学习
晚上做完初赛,好像有点颓,就来学了学html,毕竟博客里面会用到嘛. 首先贴出我所学习的教程 http://www.w3school.com.cn/html/index.asp 我觉得吧,可能以我的记 ...
- c语言open()介绍
2013-09-0914:40:13 1. 头文件: #include <sys/types.h> #include <sys/stat.h> #include <fcn ...
- P3808 【模版】AC自动机(简单版)
题目背景 这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述 给定n个模式串和1个文本串,求有多少个模式串在文本 ...
- JavaScript实现延时提示框
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- 二分图的最大独立集 最大匹配解题 Hopcroft-Karp算法
二分图模型中的最大独立集问题:在二分图G=(X,Y;E)中求取最小的顶点集V* ⊂ {X,Y},使得边 V*任意两点之间没有边相连. 公式: 最大独立集顶点个数 = 总的顶点数(|X|+|Y|)- 最 ...
- 3rd 逻辑运算符的基本用法
03.01_Java语言基础(逻辑运算符的基本用法)(掌握) A:逻辑运算符有哪些 &,|,^,! &&,|| B:案例演示 逻辑运算符的基本用法 注意事项: a:逻辑运算符一 ...