zoukankan      html  css  js  c++  java
  • 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 查看源码及使用

  • 相关阅读:
    USACO Grass Planting
    洛谷 P3178 [HAOI2015]树上操作
    史上最全NOIP初赛知识点
    史上最全的CSP-J/S 第一轮知识点
    洛谷 P1886 滑动窗口
    背包九讲—简单背包
    NOIP 2005 采药
    洛谷 P2357 守墓人
    NOI 2015 软件包管理器
    洛谷 P3384 【模板】树链剖分
  • 原文地址:https://www.cnblogs.com/cdz-sky/p/7407514.html
Copyright © 2011-2022 走看看