Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意

原创

周陆军博客

发布于 2023-05-07 18:35:07

7540

发布于 2023-05-07 18:35:07

文章被收录于专栏：前端博客前端博客

上篇《Web内容的无障碍性(1):概述为什么Accessibility无障碍如此重要》概述了Web无障碍设计，先来复习一下概念：

Web无障碍设计（Accessibility in Web design，也叫网站可及性）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。
WCAG是万维网联盟（W3C）发布的一套名为“Web Content Accessibility Guidelines (WCAG) ”的网络内容可访问性指引。该指引目前是网络可访问性的国际标准。
ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’，是WAI-ARIA的一部分（它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南）。
WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。

为什么需要ARIA？

回答标题问题前我先问其他几个问题

如何让盲人用户知道当前浏览区域就是网站主导航？
如果让盲人用户知道点击某个按钮后出来的是弹框？
如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？
如何让盲人用户知道您使用了li标签是用来模拟标准select控件呢？
如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？

在你现有的知识范围内，您有办法解决上面的问题吗？有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。

ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。

ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。

ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。

ARIA开发实现

ARIA实现很简单，只需给html5元素，增加ARIA属性与角色即可

ARIA角色

ARIA role可以像属性一样添加到HTML标记上。声明元素类型并建议其提供的信息作用。

<header role="banner"><div role="contentinfo"></div>

ARIA属性

ARIA属性和角色略有不同，添加到HTML标记的方法相同，但有一定范围的ARIA属性可供使用。所以ARIA属性都带aria-前缀。有两种ARIA属性类型，分别为状态和属性值。

状态值，是在用户交互时必然要修改的
属性值，是不太可能修改的

<span role="checkbox" aria-checked="true" tabindex="0"></span>

ARIA的规则

当你特别想去用的时候，请记住，我们并不希望你在每个元素上都添加ARIA，有两个原因。

尽可能地使用语义化的HTML元素

浏览器的语义化标签已经默认隐含ARIA语义，像nav,article,button已经隐含ARIA的role="navigation",role="article",role="button"声明。在语义化标签出来之前，常见的元素如<div class="main-navigation" role="navigation">。现在可以使用nav来代替div，而且不再需要添加role="navigation"。可以到W3C的目录上去查看，哪些元素已经隐含的ARIA属性。