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 查看源码及使用

posted @ 2017-08-22 01:58 雏燕南飞阅读(742) 评论(0) 编辑收藏举报

Zero

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

公告