首页 » 前端说 » 正文

HTML5_增强可访问性和解决IE兼容性问题

1、使用ARIA角色增强Web应用的可访问性

现在的Web项目不是单纯的HTML文档形式,而更多是一些动态页面(含有大量的JavaScript代码),为了确保所有的用户都能正常访问Web应用,包括辅助技术(如屏幕阅读器),就制定了Web可访问性倡议(WAI)和ARIA标准及规范。

在构建Web应用时,通过对HTML文档作者提供的可访问性信息加以扩展来改善Web应用。

例如:构建一个用于文本输入的下拉列表和一个无序列表,将ARIA角色combobox添加到<input>元素中,从而使其可以正确的在用户设备上显示下拉列表框。

<input type="text" aria-label="Tag" role="combobox" aria-autocomplete="list" aria-owns="owned_listbox">
<ul role="listbox" id="owned_listbox">
    <li role="option">Zebra</li>
    <li role="option">Zoom</li>
</ul>

role的属性告诉辅助设备这个元素扮演的角色。如这里input设置role=”combobox”,辅助工具就可以认出这是个combobox。角色可以是button、checkbox、tab等等

aria-label属性用来给当前元素加上的标签描述,接受字符串作为参数。是用不可视的方式给元素加label(如果被描述元素存在真实的描述元素,可使用 aria-labelledby 属性作为来绑定描述元素和被描述元素来代替,例如:

<div role="form" aria-labelledby="form-title">
    <span id="form-title">WAI-ARIA规范</span>
  <form>……</form>
</div>

aria-label属性可以用在任何典型的HTML元素中,并不需要配合特定的ARIA role才能使用

2、解决IE(6-8)兼容性问题

多数浏览器在处理未能识别的元素时,一般会将其渲染成通常的内联<span>元素,然后,只需要将其设置为block with css即可正常呈现。

但是IE9之前版本对于HTML5兼容而言,并不会那么简单的糊弄过去的,还必须做一些其他的工作。

对于不支持的元素,如<header>元素。IE8本身不支持这个元素,我们可以手动在<head>中创建这个元素,强制IE在标签中使用样式,例如:

<!--[if lte IE 8]>
<script>document.createElement("header");</script>
<!--[endif]-->

有个流行的HTML5 shiv脚本来解决这个问题,实现原理和上述处理类似,可以点击 The HTML5 shiv 查看源码及使用