For example, when we use checkbox, if we do like this:

              <div class="inline-control sign-up col-1">
<input type="checkbox" checked name="jLetter" id="jLetter"> Receive promotional offers?
</div>

When we use screen reader, it will lose the semantics meaning, it only say:

checkbox checked

Instead, we want to hear:

Receive promotional offers?, checkbox, checked

There are two way to do it:

1. label wrap the checkbox

              <div class="inline-control sign-up col-1">
<label>
<input type="checkbox" checked name="jLetter"> Receive promotional offers?
</label>
</div>

2. Using id to match label and checkbox

              <div class="inline-control sign-up col-1">
<div class="promotional">
<input type="checkbox" checked name="jLetter" id="jLetter">
<label for="jLetter">Receive promotional offers?</label>
</div>
</div>

[HTML5] Semantics for accessibility的更多相关文章

  1. [HTML5] Handle Offscreen Accessibility

    Sometime when some component is offscreen, but still get focus when we tab though the page. This can ...

  2. 【转】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...

  3. 39个让你受益的HTML5教程

    1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...

  4. 【HTML5 1】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分 ...

  5. 39一个可以让你受益HTML5课程

    事不宜迟,本文作者是我们收集的在线学习HTML5资源.我们希望他们能够帮助你更好地学习HTML5. 不错啊! 只,说原作者40一个只有39一.由于第一5钍和8一是重复. 原文在此! 1. 五分钟入门H ...

  6. 【转帖】39个让你受益的HTML5教程

    39个让你受益的HTML5教程                    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...

  7. [HTML5] Accessibility Implementation for complex component

    When you developing a complex component by your own, one thing you cannot ignore is Accessibility. C ...

  8. [HTML5]HTML语义(Semantics)

    HTML 是有含义的 语义指的是计算机语言定义的符号有其规范的含义,HTML中的标签.属性和属性值都有其约定的含义. 语义和默认样式有所不同,默认样式是浏览器设定的一些常用标签的表现形式,而语义化的主 ...

  9. [HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

    For a menu item, when we tab onto it, we want this element get 'focus' event, so that the submenu wi ...

随机推荐

  1. C Tricks(十七)—— 对角线元素的屏蔽、二维数组(矩阵)的遍历

    1. 对角线元素的屏蔽 使用 if + continue 实现对对角线元素的屏蔽 for u in range(n): for v in range(n): if u == v: continue . ...

  2. Node.js:事件循环

    ylbtech-Node.js:事件循环 1.返回顶部 1. Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 ...

  3. [源码管理] Windows下搭建SVN服务器

    前文所述SVN客户端使用的时候,用的SVN服务器通常为外部,例如Google Code的服务器,不过,做为一个程序开发人员,就算自己一个人写程序,也应该有一个SVN版本控制系统,以便对开发代码进行有效 ...

  4. shp系列(四)——利用C++进行Shx文件的读(打开)

    1.shx文件的基本情况 shx文件又叫索引文件,主要包含坐标文件的索引信息,文件中每个记录包含对应的坐标文件记录距离坐标文件的初始位置的偏移量.通过索引文件可以很方便地在坐标文件中定位到指定目标的坐 ...

  5. Kaggle之泰坦尼克号幸存预测估计

    上次已经讲了怎么下载数据,这次就不说废话了,直接开始.首先导入相应的模块,然后检视一下数据情况.对数据有一个大致的了解之后,开始进行下一步操作. 一.分析数据 1.Survived 的情况 train ...

  6. 从Oracle同步数据到SQLServer——大小写敏感设置

    Oracle默认是大小写敏感,而SQLServer默认大小写不敏感, 尤其是涉及主键字段时,注意请提前设置SQLServer对应的数据库表为大小写敏感,不然会报主键冲突的错误. 设置表内大小写敏感 A ...

  7. Codeforces Round #451 & Codeforces Round #452

    Rounding Solution Proper Nutrition 枚举 Solution Phone Numbers 模拟 Solution Alarm Clock 贪心,好像不用线段树也可以,事 ...

  8. ts中类的继承

    定义类 class Person { name: string; //属性 constructor(_name: string) { this.name = _name; } //构造函数 sayHe ...

  9. tab选项卡切换(js原生、jQuery )

    思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...

  10. 用python(2.7)自定义实现SQL的集合操作

    有的时候需要在不同的数据库实例之间做集合操作,这就无法直接使用SQL语句的join,left join了.相同类型的数据库之间虽然也有类似于DBLINK和FEDERATED之类的东西,但一来这些东西不 ...