[HTML5] Why ARIA?
For some reason, you build a custom checkbox component, if without ARIA in mind, basiclly this site is unusable for screen reader.
DEMOsite.
In the example, screen reader only read the label of the checkbox, but doesn't tell it is a checkbox and the value of it.
<div tabindex="0" class="checkbox">
Mint slices
</div>
The way to fix it by tell the role is checkbox and set aria-checked to its value:
<div tabindex="0" class="checkbox" tabindex="0" role="checkbox" aria-checked="true">
Tim-Tams
</div>
But really it we can use the native html element, just use the native element.
[HTML5] Why ARIA?的更多相关文章
- 现在就使用HTML5的十大原因
你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...
- 使用HTML5的十大原因
你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不 ...
- 使用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
- HTML5初步了解
一.使用HTML5的十大原因 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是w ...
- [转载] 使用HTML5的十大原因
转载自http://www.williamlong.info/archives/3024.html 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不 ...
- 【html5】使用 html5 的十大原因
你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大 ...
- [翻译]如何在HTML5中有效使用ARIA
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...
- [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 ...
- HTML5 aria- and role
HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet ...
随机推荐
- 轻快的vim(一):移动
断断续续的使用VIM也一年了,会的始终都是那么几个命令,效率极低 前几个星期把Windows换成了Linux Mint,基本上也稳定了下来 就今晚,我已经下定决心开始新的VIM之旅,顺便写一系列的笔记 ...
- 为了世界的和平~一起上caioj~~~!
打Call~打Call~打Call~~~!!! 世界毁灭了你在哪???不要犹豫,快去caioj!!! 无比优质的oj,未来大牛的明智之选----就是caioj~~~
- [BZOJ 3363] Cow Marathon
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3363 [算法] 树的直径 [代码] #include<bits/stdc++. ...
- 使用spring mvc或者resteasy构建restful服务
看到最近一个项目里用resteasy来构建restful接口,有点不明白,不少Spring mvc4.0以后也可以很方面的实现restful服务吗,为啥还要在Spring MVC的项目里还引入rest ...
- 函数和指针 C++
一.用函数指针变量调用函数. 指针变量也可以指向一个函数,一个函数在编译时被分配给一个入口地址.这个函数入口地址就称为函数的指针.可以用一个指针变量指向函数,然后通过该指针变量调用此函数. 定义指向函 ...
- codeforces 712 Memory and De-Evolution
2019-05-19 13:25:37 加油,加油,坚持,坚持!!! 一定要逆推,才可以是最少的次数 更好的方法: https://www.cnblogs.com/ECJTUACM-873284962 ...
- A - George and Accommodation
Problem description George has recently entered the BSUCP (Berland State University for Cool Program ...
- Install opencv on Centos
研究centos 有很长一段时间了,一直没有写过这方面的感觉,今天在看到网友的一篇文章时,结合亲身体会就下面安装opencv的一些步骤与大家共享. CentOS OpenCV已被广泛应用但是也在不断的 ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- 企业级Spring应用的搭建
本次博客将要对SpringMVC做简单的介绍以及环境的搭建: 概述 Spring 框架是一个开源的平台,属于设计层面框架,整个系统面向接口,是分层的JavaSE/EE开源框架,用于解决复杂的企业应用开 ...