[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 ...
随机推荐
- 如何将dmp文件导入到自己的oracle数据库中
1.首先,我们可以先建立自己的一个用户表空间,创建表空间的格式如下: create tablespace test(表空间的名字) datafile 'D:\oracle\product\10.2.0 ...
- oc13--pragma mark
// // main.m // #pragma mark基本使用 // // Created by xiaomage on 15/6/18. // Copyright (c) 2015年 xiaoma ...
- 设备树学习之(一)GPIO中断【转】
本文转载自:http://blog.csdn.net/lizuobin2/article/details/54563587 开发板:tiny4412SDK + S702 + 4GB Flash 要移植 ...
- To enable assembly bind failure logging, set the registry value [HKLM\Software\Microsoft\Fusion!EnableLog]
Could not load file or assembly 'System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31 ...
- 前端(小程序)项目Aes.js/Md5.js加密的处理方法
做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js 一.Vue项目用到的aes.js加密. 1.直接在index.html引入aes.js或者在npm in ...
- 第4章 部署模式 Three-Tiered Distribution(三级分布)
影响因素 Tiered Distribution 中讨论的影响因素也适用于此模式.有关这些通用影响因素的讨论,请参阅"Tiered Distribution".下列影响因素仅适用于 ...
- caffe学习笔记--跑个SampleCode
Caffe默认情况会安装在CAFFERROOT,就是解压到那个目录,例如: home/username/caffe-master, 所以下面的工作,默认已经切换到了该工作目录.下面的工作主要是,用于测 ...
- **PCL:嵌入VTK/QT显示(Code^_^)
中国人真是太不知道分享了,看看这个老外的博客,启发性链接. http://www.pcl-users.org/ 1. 这个是可用的源代码: 原文:I saw a thread with links t ...
- java必备技能
Android应用程序开发是以Java语言为基础的,所以需要有扎实的Java基础知识.首先熟悉java基本语法,然后熟悉设计模式等. a) Java基础语法:看下面的<Java知识点列表> ...
- trigger事件就是继承某一个类的事件.
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...