html5无障碍网页语义

  • 2017-12-14
  • 311
  • 0
  • 0

概念介绍:WAI-ARIA(Web Accessibility Initiative’s Accessible Rich Internet Applications)无障碍网页倡议之可访问的富互联网应用,简称ARIA,他就是一种技术规范;他在HTML提供的语意的基础上,他会使用属性在填补一些语意上的空白;

现在是用法书写

1)正确运用ARIA中的地标角色:

1)role =”banner”(横幅)

  • 面向全站的内容,通常包含网站标志、网站赞助者标志、
    全站搜索工具等。横幅通常显示在页面的顶端,而且通
    常横跨整个页面的宽度
  • 将其添加到页面级的 header 元素,每个页面只用一次

2)role=”navigation”(导航)

  • 文档内不同部分或相关文档的导航性元素(通常为链接)
    的集合
  • nav 元素是对应关系。应将其添加到每个 nav 元素,
    或其他包含导航性链接的容器。这个角色可在每个页面
    上使用多次,但是同
    nav 一样,不要过度使用该属性

3)role=”main”(主体)

  • 文档的主要内容
  • main 元素是对应关系。最好将其添加到 main 元素,
    也可以添加到其他表示主体内容的元素(可能是
    div)。
    在每个页面仅使用一次

4)role=”complementary”(补充性内容)

  • 文档中作为主体内容补充的支撑部分。它对区分主体内
    容是有意义的
  • aside 元素是对应关系。应将其添加到 aside div
    素(前提 是该
    div 仅包含补充性内容)。可以在一个页
    面里包含多个
    complementary 角色,但不要过度使用

5)role=”contentinfo”(内容信息)

  • 包含关于文档的信息的大块可感知区域这类信息的例子
    包括版权声明和指向隐私权声明的链接等
  • 将其添加至整个页面的页脚(通常为 footer 元素)。每
    个页面仅使用一次

 

 

评论

偷偷告诉你,这还毛都没有 T T

发表评论