[HTML5] Semantics for accessibility
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的更多相关文章
- [HTML5] Handle Offscreen Accessibility
Sometime when some component is offscreen, but still get focus when we tab though the page. This can ...
- 【转】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...
- 39个让你受益的HTML5教程
1. 五分钟入门HTML5 (Learn HTML5 in 5 Minutes!) By Jennifer Marsman 毫无疑问,HTML5是一个热门话题.如果你需要一个迅速了解HTML基础的速成 ...
- 【HTML5 1】39个让你受益的HTML5教程
闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们能够帮助大家更好地学习HTML5. 好人啊! 只是,作者原来说的40个仅仅有39个,由于第5个和第8个是反复的. 原文在此! 1. 五分 ...
- 39一个可以让你受益HTML5课程
事不宜迟,本文作者是我们收集的在线学习HTML5资源.我们希望他们能够帮助你更好地学习HTML5. 不错啊! 只,说原作者40一个只有39一.由于第一5钍和8一是重复. 原文在此! 1. 五分钟入门H ...
- 【转帖】39个让你受益的HTML5教程
39个让你受益的HTML5教程 闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的4 ...
- [HTML5] Accessibility Implementation for complex component
When you developing a complex component by your own, one thing you cannot ignore is Accessibility. C ...
- [HTML5]HTML语义(Semantics)
HTML 是有含义的 语义指的是计算机语言定义的符号有其规范的含义,HTML中的标签.属性和属性值都有其约定的含义. 语义和默认样式有所不同,默认样式是浏览器设定的一些常用标签的表现形式,而语义化的主 ...
- [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 ...
随机推荐
- 深度 | AI芯片之智能边缘计算的崛起——实时语言翻译、图像识别、AI视频监控、无人车这些都需要终端具有较强的计算能力,从而AI芯片发展起来是必然,同时5G网络也是必然
from:https://36kr.com/p/5103044.html 到2020年,大多数先进的ML袖珍电脑(你仍称之为手机)将有能力执行一整套任务.个人助理将变的更加智能,它是打造这种功能的切入 ...
- hdoj--1176--免费馅饼(动态规划)
免费馅饼 Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u Submit Status D ...
- 第6章 Spring MVC的数据转换、格式化和数据校验
使用ConversionService转换数据 <%@ page language="java" contentType="text/html; charset=U ...
- php递归取目录下的所有文件(原创)
function get_dir_all_files($path) { $result=array(); $temp=array(); if(filetype($path)=='dir') { $di ...
- 【BZOJ2438】【中山市选2011】杀人游戏
[问题描述] 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面, 查出谁是杀手. 警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人, 谁是杀手, ...
- MYSQL工具之binlog2sql闪回操作
文档结构: 在生产环境中如果遇到误删,改错数据的情况,利用mysql闪回工具binlog2sql,可以实现数据的快速回滚,从binlog中提取SQL,并能生成回滚SQL语句.Binlog以event作 ...
- NOIP 2013 T2 火柴排队 ---->求逆序对
[NOIP2013T2]火柴排队 背景 noip2013day1 描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各 自 排成一列, 同一列火柴的高度互不相同, ...
- .NET WebForm 简介(9.19)
WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. WinForm是C/S(客户端) 主要是本机执行 WebF ...
- Charles设置抓取https请求
1.在手机上设置HTTP代理,将手机与电脑连接. 打开手机设置-WLAN,设置代理 2.(iPhone)使用iPhone自带的浏览器打开Safari,并输入地址:http://charlesproxy ...
- hdu1829 A Bug's Life 基础种类并查集
题目的大意可以理解为:A爱B,B爱C ……给出一系列爱恋的关系,推断有没有同性恋. 思路是把相同性别的归为一个集合(等价类),异性的异性为同性. #include<iostream> #i ...