使用 ARIA 改善网页可访问性

来源：互联网发布：exit code 0 python 编辑：程序博客网时间：2024/06/05 12:08

WAI-ARIA（Web Accessibilty Initiative’s Accessible Rich Internet Application，无障碍网页倡议-无障碍的富互联网应用，也简称 ARIA）是一种技术规范，自称“有桥梁作用的技术”。之所以这样说，是因为在 HTML 提供相应的语义功能之前，它会使用属性来填补一些语义上的空白。

无障碍访问的意义是让所有的访问者都能获取网站的内容。网站的一部分访问者可能需要借助辅助设备（如屏幕阅读器）访问我们的页面内容。让网站具备无障碍访问功能是成为严肃负责的 Web 公民的重要方面。而且，这样做对我们也是有好处的———为什么不让访问者能够获取网站的内容呢？

在大多数情况下，让页面具有无障碍访问功能并不难。只要对内容使用最恰当的 HTML 标记，就能改进网站的可访问性。然而，仅仅依靠恰当的 HTML 标记并不能做到所有情况下都让页面具有无障碍访问功能。

地标角色
ARIA 填补了 HTML 的语义空白。
例如，如果想让屏幕阅读器用户知道如何跳至页面级的页脚，应该使用什么 HTML 标记呢？标记为 footer 还不够，要知道页面可以包含多个 footer。对此，HTML 没有解决方案，而 ARIA 的地标角色（landmark role）则可以满足需求。地标角色让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域制指定 role 属性就可以了。

如下表所示，地标角色和 HTML5 元素之间有一些重合，但目前屏幕阅读器对 ARIA 的支持更多。因此我们可以继续按既有的方式创建 HTML （包括使用新元素），同时添加一些 ARIA 角色提升页面的可访问性。

地标角色如何使用及何时使用 role=”banner”（横幅）面向全站的内容，通常包含网站标志、网站赞助者标志、全站搜索工具等。横幅通常显示在页面的顶端，而且通常横跨整个页面的宽度将其添加到页面级的 header 元素，每个页面只能用一次 role=”navigation”（导航）文档内不同部分或相关文档的导航性元素（通常为链接）的集合与 nav 元素是对应关系。应将其添加到每个 nav 元素，或其他包含导航性链接的容器。这个角色可在每个页面上使用多次，但是同 nav 一样，不要过度使用该属性 role=”main”（主体）文档的主要内容与 main 元素是对应关系。最好将其添加到 main 元素，也可以添加到其他表示主体内容的元素（可能是 div）。在每个页面仅使用一次 role=”complementary”（补充性内容）文档中作为主体内容的支撑部分。它对区分主体内容是有意义的与 aside 元素是对应关系。应将其添加到 aside 或 div 元素（前提是该 div 仅包含补充性内容）。可在同一个页面里包含多个 complementary 角色，但不要过度使用 role=”contentinfo”（内容信息）包含关于文档的信息的大块可感知区域这类信息的例子，包含版权声明和指向隐私声明的链接将其添加到整个页面的页脚（通常为 footer 元素）。每个页面仅使用一次

上表引用了一些 ARIA 规范中对地标角色的定义及推荐用法。但表中没有包含另外三种地标角色：对表单元素来说，form 角色是多余的；search 用于标记搜索表单；application 则属于高级用法。

使用地标角色很简单，如下例：

<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title>使用地标示例</title></head><body>    <!-- 开始页面容器 -->    <div class="container">        <header class="container" role="banner">            ...            <nav role="navigation">                ... <!-- 包含多个链接的无序链表 -->            </nav>        </header>        <!-- 应用CSS后的第一栏 -->        <main role="main">            <article>                ...            </article>            <article>                ...            </article>            ... <!-- 其它区块 -->        </main>        <!-- 结束第一栏 -->        <!-- 应用CSS后的第二栏 -->        <div class="sidebar">            <aside role="complementary">                ...            </aside>            <aside role="">                ...            </aside>            ... <!-- 其他区块 -->        </div>        <!-- 结束第二栏 -->        <footer role="contentinfo">            ...        </footer>    </div>    <!-- 结束页面容器 --></body></html>

事实上，即使不使用 ARIA 地标角色，页面看起来也没有任何差别，但是使用它们可以提升辅助设备的用户的体验。由于这个理由，推荐使用它们。但注意不要在页面上过多地使用地标角色，因为过多的地标角色会让屏幕阅读器用户感到累赘，从而降低了地标的初衷作用，影响整体体验。

0 0