"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>

DEMO

[HTML 5] aria-live的更多相关文章

  1. 译文 对无障碍网页应用(ARIA)的选择

    //本文编辑格式为Markdown,译文同时发布在众成翻译 对无障碍网页应用(ARIA)的选择 让网站对每个人都能访问是一件相当艰难的工作,尤其是在我们使用自定义标记解决方案(custom marku ...

  2. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  3. ARIA无障碍技术

    ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的 ...

  4. [翻译]如何在HTML5中有效使用ARIA

    ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...

  5. ARIA(Accessible Rich Internet Application)

    ARIA 为Web app提供满足用户不同需求的解决方案.建设起用户和软件之间的桥梁. 新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet App ...

  6. [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 ...

  7. [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 ...

  8. [HTML5] Why ARIA?

    For some reason, you build a custom checkbox component, if without ARIA in mind, basiclly this site ...

  9. [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 ...

  10. [ARIA] Accessible modal dialogs

    Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the na ...

随机推荐

  1. Eclipse打开ftl文件,高亮显示

    解决方式一:下载eclipse相关的freemarker插件 解决方式二:原生解决方式,方法特点无需下载插件,和eclipse编辑html和jsp文件一模一样 步骤: 1:windows---pref ...

  2. linux 在线实验

    https://www.shiyanlou.com/courses/running/2

  3. redis实现计数--------Redis increment

    经理提出新的需求,需要知道每天微信推送了多少条模板消息,成功多少条,失败多少条,想到用Redis缓存,网上查了一些资料,Redis中有方法increment,测试代码如下 Controller imp ...

  4. [转]Java设计模式学习心得

    http://tech.it168.com/focus/200902/java-design/index.html http://tech.it168.com/j/2007-05-17/2007051 ...

  5. Android媒体解码MediaCodec,MediaExtractor

    Android提供了MediaPlayer播放器播放媒体文件,其实MediaPlyer只是对Android Media包下的MediaCodec和MediaExtractor进行了包装,方便使用.但是 ...

  6. 二.Windows I/O模型之异步选择(WSAAsyncSelect)模型

    1.基于windows消息为基础的网络事件io模型.因此我们必须要在窗口程序中使用该模型.该模型中的核心是调用WSAAsyncSelect函数实现异步I/O. 2.WSAAsyncSelect函数:注 ...

  7. python 编码问题解决方案

    1.UnicodeDecodeError: 'ascii' codec can't decode byte 0xe4 in position 0: ordinal not in range(128) ...

  8. VS2012编译PCL1.70的过程

    以防博主删除文档,重新copy一遍... 关于个人的几个注意事项: 对于boost,可以使用vc100的库,来编译VC110的代码: 对于确实的包含,一个一个添加,要耐心等待!!! 原文链接:http ...

  9. QT与openCV,与PCL结合!

    (1):详解QT多媒体框架:给予视频播放器 原文链接:http://mobile.51cto.com/symbian-271123.htm 对于使用主框架的QT程序,实现Qimage的转换可借鉴下面程 ...

  10. ubuntu 搭建Mercurial 服务(nginx)

    ubuntu 搭建Mercurial 服务(nginx) 环境:ubuntu 12.05  Mercurial 步骤: (1)安装nginx 和 Mercurial: sudo apt-get ins ...