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?的更多相关文章

  1. 现在就使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因: 它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码. HTML5是Web开发世界的一次重大的改变,事实 ...

  2. 使用HTML5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是web开发世界的一次重大的改变,事实上不 ...

  3. 使用 HTML5 设计辅助功能

    使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

  4. HTML5初步了解

        一.使用HTML5的十大原因 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是w ...

  5. [转载] 使用HTML5的十大原因

    转载自http://www.williamlong.info/archives/3024.html 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不 ...

  6. 【html5】使用 html5 的十大原因

    你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大 ...

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

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

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

  9. HTML5 aria- and role

    HTML5 aria-* and role 在video-js的demo中看到了很多aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet ...

随机推荐

  1. HDU3535 AreYouBusy 混合背包

    题目大意 给出几组物品的体积和价值,每组分为三种:0.组内物品至少选一个:1.组内物品最多选一个:2.组内物品任意选.给出背包容量,求所能得到的最大价值. 注意 仔细审题,把样例好好看完了再答题,否则 ...

  2. 国内物联网平台初探(七) ——Ablecloud物联网自助开发和大数据云平台

    平台定位 面向IoT硬件厂商,提供设备联网与管理.远程查看控制.定制化云端功能开发.海量硬件数据存储与分析等基础设施,加速硬件实现联网智能化. 架构 服务 云端服务一体化开发引擎 业内独创一体化开发引 ...

  3. B1237 [SCOI2008]配对 贪心 + dp

    我刚开始,我打眼一看:哇!网络流大水题,直接费用流板子,建边跟zz一样.结果看了一眼数据范围...gg,luogu上只能得30,直接建边就是n^2,1e5根本过不了.咋办,只能另谋出路.想不出来,看题 ...

  4. How to solve a login problem of SQL Server?

    Sometimes when we attempting to login the SQL Server 20xx Management Studio, when we type in the cor ...

  5. VS2015启动显示无法访问此网站

    之前启动项目发生过几次,也忘了怎么解决了,今天记录一下:将应用文件夹下的vs目录删除,重新生成解决方案后,程序正常启动. 原文链接:https://blog.csdn.net/upi2u/articl ...

  6. css中常用的七种三栏布局技巧总结

    三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...

  7. GCC G++ Make CMake自我科普

    Linux下gcc g++ make cmake 联系和区别 C/C++程序从编写到可执行一般经历这几个阶段 编写源代码 编译器编译代码生成目标文件,如.o文件 链接器链接目标文件和其他目标文件/库文 ...

  8. spring的HandlerMapping

    handerlMapping意思是处理器映射,是把请求的url地址与方法进行映射,如SimpleUrlHandlerMapping.

  9. 00-- 关于C++ const 的全面总结

    转:关于C++ const 的全面总结 C++中的const关键字的用法非常灵活,而使用const将大大改善程序的健壮性,本人根据各方面查到的资料进行总结如下,期望对朋友们有所帮助. Const 是C ...

  10. JdbcTemplate 增删查改

    准备工作:1,拷贝工具类JDBCUtils, 2,导入包commons-logging-1.2-javadoc.jar   spring-beans-5.0.0.RELEASE-javadoc.jar ...