位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 使用 role

提问人:刘团圆发布时间:2020-11-20

    ■知识点

    role是HTML5新增属性,其作用是告诉Accessibility类应用(如屏幕阅读器等)当前元素所扮演的角色,主要是供残疾人使用。使用role可以增强文本的可读性和语义化。

    在HTML5元素内,标签本身就是有语义的,因此role作为可选属性使用,但是在很多流行的框架 (如Bootstrap)中都很重视类似的属性和声明,目的是为了兼容老版本的浏览器(用户代理)。

    role属性主要应用于文档结构和表单中。例如,设置输入密码框,对于正常人可以用placaholder提示输入密码,但是对于残障人士是无效的,这个时候就需要role了。另外,在老版本的浏览器中,由于不支持HTML5标签,所以有必要使用role属性。

    例如,下面代码告诉屏幕阅读器,此处有一个复选框,且己经被选中。

    <div role="checkbox" aria-checked= "checked"><input type="checkbox" checked></div>

    下面是常用的role角色值。 

    role="banner"(横幅)

    面向全站的内容,通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端,而且通常横跨整个页面的宽度。

    使用方法:将其添加到页面级的header元素,每个页面只用一次。 

    role="navigation"(导航)

    文档内不同部分或相关文档的导航性元素(通常为链接)的集合。

    使用方法:与nav元素是对应关系。应将其添加到每个nav元素,或其他包含导航性链接的容器。这个角色可在每个页面上使用多次,但是同nav—样,不要过度使用该属性。 

    role="main"(主体)

    文档的主要内容。

    使用方法:与main元素是对应关系。最好将其添加到<main>#签中,也可以添加到其他表示主体内容的元素(可能是div)中。在每个页面仅使用一次。 

    role="complementary"(补充性内容)

    文档中作为主体内容补充的支撑部分。它对区分主体内容是有意义的。

    使用方法:与aside元素是对应关系。应将其添加到aside或div元素(前提是该div仅包含补充性内容)。可以在一个页面里包含多个complementary角色,但不要过度使用。

    role="contentinfo"(内容信息)

    包含关于文档信息的大块、可感知区域。这类信息的例子包括版权声明和指向隐私权声明的链接等。

    使用方法:将其添加至整个页面的页脚(通常为footer元素)。每个页面仅使用一次。

    ■实例设计

    下面的代码演示了文档结构中如何应用role。

<!--开始页面容器-->

<div class="container">

    <header role="banner">

        <nav role="navigation"> [包含多个链接的列表]</nav>

    </header>

    <!—应用CSS后的第一栏-->

    <main role="main">

        <article></article>

        <article></article>

        [其他区块]

    </main>

    <!--结束第一栏-->

    <!--应用CSS后的第二栏-->

    <div class="sidebar">

        <aside role="complementary"x/aside>

        <aside role="complementary"x/aside>

        [其他区块]

    </div>

    <!--结束第二栏-->

    <footer role=" con tent inf o"x/footer>

</div>

<!--结束页面容器-->

    对表单元素来说,form角色是多余的;search用于标记搜索表单;application则属于高级用法。当然,不要在页面上过多地使用地标角色。过多的role角色会让屏幕阅读器用户感到累赘,从而降低role的作用,影响整体体验。

继续查找其他问题的答案?

发表评论(共0条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部