"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. luogu3811 【模板】乘法逆元

    题目大意:给出n,求1~n所有数的乘法逆元. 乘法逆元的概念是:如果b*rev(b)≡1 (mod p),p与b互质,则rev(b)就是b的模p乘法逆元.乘法逆元往往用于除法取模. 具体操作详见htt ...

  2. xargs命令【转】

    本文转载自:http://man.linuxde.net/xargs

  3. Spark新愿景:让深度学习变得更加易于使用——见https://github.com/yahoo/TensorFlowOnSpark

    Spark新愿景:让深度学习变得更加易于使用   转自:https://www.jianshu.com/p/07e8200b7cea 前言 Spark成功的实现了当年的承诺,让数据处理变得更容易,现在 ...

  4. 【NOIP 2004】 虫食算

    [题目链接] https://www.luogu.org/problemnew/show/P1092 [算法] 搜索 + 剪枝 直接搜索显然会超时,考虑剪枝 1 : 优化搜索顺序 2 : 假设我们已经 ...

  5. Java-Maven:Maven清单

    ylbtech-Java-Maven:Maven清单 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http ...

  6. Android View事件分发与传递

    在Android中,人们主要通过手指与系统交互.Android把所有的touch事件都被封装成MotionEvent来进行处理,其中包括了手指点击的位置,时间等信息.其事件类型主要包括:ACTION_ ...

  7. java集合的学习笔记

    不知不觉也到了java集合这一章的学习,这因该是挺重要的一个章节,因为所有的程序都离不开数据,而一个良好的数据结构和算法应该是程序的灵魂吧. 今天对自己所初步了解的做一个总结: 数据结构是计算机存储. ...

  8. 前端-JQ思维导图

    看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记

  9. 【Oracle】SCOPE=MEMORY|SPFILE|BOTH

    SCOPE=MEMORY|SPFILE|BOTH 指示了修改参数时的“作用域”: SCOPE=MEMORY :只在实例中修改,重启数据库后此次修改失效. SCOPE=SPFILE :只修改SPFILE ...

  10. RabbitMQ学习之spring-amqp的重要类的认识

    对于大多数应用来说都做了与spring整合,对于rabbitmq来说.也有与spring的整合.可能通过spring的官网找到spring-amqp项目下载.spring-amqp项目包括三个子项目: ...