[HTML5] aria-label & aria-labelledby】的更多相关文章

一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等:  我们一般有两种方法来优雅地扩…
ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们,如何让他们使用起来更容易. 使用ARIA的一种方式,是添加ARIA到我们的html中.你可能对在HTML中使用语义化元素很熟悉了,如nav,button,header.使用它们,可以很容易表达块的作用.这些元素可以更好地表达页面中内容的意思,我们可以把这些元素和ARIA组合使用.不过,在一起使用它们…
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的技术更易于实现辅助功能. 当前,这意味着使用 HTML5. 为了具备易访问性,您需要在多种设备上提供您的内容,如使用键盘或鼠标的普通计算机.屏幕阅读器.音频浏览器.具有有限带宽的设备.旧式浏览器和计算机以及手机和触摸设备. 而且,它应覆盖最广泛的人群,包括残障人士.老年人.文化水平不高或暂时患病的人…
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码: <!-- HTML 4-style code --> <div id="wrapper"> <div id="header"> <h1>My super dupe…
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码:< !-- HTML 4-style code -->< div id="wrapper"> <div id="header"> <h1>My super dupe…
本文介绍了HTML5常见的6种错误写法,包括:1.不要使用section作为div的替代品 2.只在需要的时候使用header和hgroup 3.不要把所有列表式的链接放在nav里 4.figure元素的常见错误 5.不要使用不必要的type属性 6.form属性的错误使用. 希望这些提示能对大家有所帮助. 一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样…
HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用就是描述这个tag在可视化的情境中的具体信息.比如 <div role="checkbox" aria-checked="checked"></div> 什么是ARIA: WAI-ARIA指无障碍网页应用.主要针对的是视觉缺陷,失聪,行动不便的残…
一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码: <!-- HTML 4-style code --><div id="wrapper"> <div id="header"> <h1>My super duper…
全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx">,但这是种非常不规范的方式. 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性.html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突. <form data-type="comment"…
一.使用介绍 <label>专为input元素服务,为其定义标记. for属性规定label与哪个表单元素绑定 label和表单控件绑定方式又两种: 1.将表单控件作为label的内容,这样就是隐士绑定. 此时不需要for属性,绑定的控件也不需要id属性. 隐式绑定: <label>Date of Birth: <input type="text" name="DofB" /></label> 2.为<label…