"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. Android——build.prop 解析【转】

    本文转载自:http://blog.csdn.net/lengyue1084/article/details/77637354 一.概念 在Android设备shell终端可以看到/system目录下 ...

  2. 【POJ 3744】 Scout YYF I

    [题目链接] http://poj.org/problem?id=3744 [算法] 概率DP + 矩阵乘法 [代码] #include <algorithm> #include < ...

  3. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  4. Dalvik 堆内存管理与回收

    Dalvik虚拟机用来分配对象的堆划分为两部分,一部分叫做Active Heap,另一部分叫做Zygote Heap.下面基于管理机制来介绍为何分配为这两部分,以及堆内存的管理. 我们从Android ...

  5. ModelState对象

    1.在控制器中判断Model验证结果

  6. CSS简单入门

    - Java攻城狮学习路线 - 一. 什么是CSS CSS指层叠样式表(Cascading Style Sheets),定义如何显示HTML元素 二. CSS语法 /* 选择器 { 声明: 声明:}* ...

  7. 关于KO信息

    最近写大论文查到KO也是可以用于分类的一种信息. 如何使用KEGG进行通路富集http://blog.sciencenet.cn/blog-364884-779116.html kegg 数据库学习笔 ...

  8. HDFS与java API应用

    java代码操作hadoop文件需要用hadoop的jar包,comment,hdfs,yarn,mapreduce,内均有有关jar包,eclipse操作hadoop还需要配置core-site.x ...

  9. 使用Flask和Bootstrap构建博客系统(1) - 准备篇

    技术栈 macOS10.12.5 Python2.7.13 Bootstrap4.0.0-beta.2 virtualenv virtualenvwrapper 安装Python2.7.13 下载Bo ...

  10. 【Oracle】DBA_AUDIT_TRAIL表SES_ACTIONS字段对应的操作列表

    SES_ACTIONS字段共包含16个字符,初始状态都为“-”,当被审计的对象被操作后,SES_ACTIONS会在相应的位置作出标识,标识为“S”的代表操作成功,标识为“F”的代表操作失败,16个位置 ...