多语言展示
当前在线:358今日阅读:23今日分享:25

GIF动态图教学-H5语言20-WAI-ARIA(实例)

方法/步骤
1

在HTML过去的版本中,由于input标记带有“男、女”这样的说明文字,因此label标记独立于input标记之外,为了说明两者的关联,在此使用了label的for属性来对其加以捆绑。

2

在H5中优化,使用fieldset标记来表示。fieldset标记:用来对表单内容的一部分进行打包,生成一组相关表单的字段,每一个fieldset标记都有一个标题,可以用legend标记来加以指定,如图所示。fieldset将使得表单内部不同功能区域的字段分组更为清晰,但同时它的默认显示又将占用更大的页面空间。

3

表单中还有一个选项,使浏览者打勾选择是否遵守使用规范。需要初学者特别注意的是,不同浏览器对表单元素的支持各不相同,在实际开发过程中不能太依赖于新的表单特性,需要做好新功能并不被浏览器支持的两手准备。

4

在许多年前,网页曾经是

表格布局的天下,直到后来DIV+CSS的布局方式逐渐取代了表格,到H5时代,连DIV+CSS都显得过时了。然而,表格的衰落并不代表我们就不再使用它了,在一些复杂的数据显示方面,表格仍然拥有得天独厚的优势。

5

WAI-ARIA技术: WAI-ARIA(Web Accessibility Initiative-Accessible Rich Internet Applications)指无障碍网页应用技术,又称可访问性,它的主要目的是让各种不同能力水平、具有各种缺陷的用户都能够无障碍地访问网页上的动态内容,相同地获取网站信息,并使用网站中的各种功能。网站的可访问性一直以来受到了社会的极大关注。2006年,联合国颁布了《联合国伤残人士权利公约》,鼓励包括互联网信息提供商在内的大众媒体向残疾人提供无障碍服务。作为网站设计人员,要为这部分特殊用户提供各种信息资讯和业务服务,就必须注重页面的可访问性。首先要申明的一点是aria并非是一种元素,而是HTML中的一系列属性,它的作用是对页面标签内容及其行为的解释。如图所示通过代码我们能够知道ul和li是一个页面的菜单及菜单项,同时能够通过设置样式来使得它看上去像一个菜单,但是特殊人群可能并不能做到这一点。

6

要确保页面的可访问性,我们可以给每一个节点加上相应的role属性,其中,menubar表示菜单栏,menuitem表示菜单项。这样,特殊人群在使用辅助设备时(如屏幕阅读器),就能够辨别出这些节点对应的功能。1、不同的菜单有着不同的处理方法,有的菜单在单击或者鼠标滑过时可能出现浮动元素,这样的情况我们也需要在页面中用 aria-haspopup属性加以注明,当没有浮动元素时为false,反之为true。2、此外,之前的表单也可以通过添加aria属性来增强可访问性。例如,给姓名输入框添加aria-label属性,使得残障用户tab切换到这一输入框时,读屏软件能读出相应的文本。3、当说明文本已经在其他元素中存在时,可以通过设置 aria-labelledby属性为该元素的id值,使得焦点跳转到该区域时也能读出相应的内容。

注意事项

gif动态图将重复播放。 按住Ctrl键+鼠标滚动滑轮可以放大网页更清晰查看gif动态图。 转载请注明出处。亲,如果帮到你的话,请给个投票,或者在下方给个好评。 也可以关注小编,让小编知道至少有你的支持,是我写下去的唯一动力,谢谢。