首页 > 软件操作教程 > 编程开发 > HTML
题目内容

HTML5 使用 role

题目答案

    ■知识点

    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条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端