Aria标签可以取代Alt和Title标签吗？

Alt 标签是可应用于图像的简短描述，使屏幕阅读器能够读取有关页面图像的信息，这对于视力障碍者非常有帮助，另外当图像无法加载到用户屏幕上时，会替代网页上的图像出现的书面文本内容，并允许搜索引擎更好地抓取您的网站并对其进行排名。

示例1：产品大图的alt属性内容为alt=“Movement Golden Metal Eyeglass Frames”

示例2：<img src="pupdanceparty.gif" alt="小苹果舞蹈">

WAI-Aria（Web Accessibility Initiative） — 可访问的无障碍富互联网应用程序标签，可以添加到html元素的属性，以便为辅助技术（例如屏幕阅读器）提供有关该元素的用途和功能的附加信息，html将Aria文本内容做为辅助功能标签，为使用辅助技术的用户提供无法使用可见标签的不可见标签，即可用于让听力或视力障碍等残障人士更方便地访问您的网站。

Aria-label属性帮助定义标记交互元素的字符串值，并为使用辅助技术的用户提供有关文档结构的附加信息。

如果交互元素没有可访问的名称，或者可访问的名称不准确，并且 DOM 中没有可通过该属性引用的可见内容，则该属性可用于定义一个标记该元素的aria-labelledby字符串aria-label。设置它的交互元素。这为元素提供了可访问的名称。

示例1：对图片按钮进行文本说明

评论图片集，第一张图片的aria-lable标签内容为aria-lable="Gentry - customer photo from laura"，为第一张图片客观了可访问的名称。

示例2：对折叠菜单按钮的文本说明是menu

<button aria-label="menu" class="hamburger"></button>

示例3：对符号x的文本说明是close

<button aria-label="Close" onclick="myDialog.close()">X</button>

示例：

按钮的可访问名称是开始标记和结束<button>标记之间的内容；

图像的可访问名称是其alt属性的内容；

表单输入的可访问名称是关联<label>元素的内容。

如果以上三个选项都不可用，或者默认的可访问名称不合适，可考虑使用属性aria-label来定义元素的可访问名称。

ARIA 组件包含三种主要类型：ARIA 角色、ARIA 状态和 ARIA 属性。ARIA 角色定义 UI 元素的类型并说明它的用途。它们又分为 4 个子类别：

• 抽象角色由浏览器使用，不应在代码中使用。

• 文档结构角色提供页面部分的描述（例如列表项、工具栏、文档等）

• 地标角色将页面分为不同的部分，以便更好地导航（例如表单、横幅、主要、搜索等）

• 小部件角色定义元素（例如警报、复选框、选项卡面板等）

Alt替代文本可以添加到任何图像资源中，用于描述该图像的外观和功能。Aria Label仅为屏幕阅读器上没有可见文本的元素提供文本替代，如热点、按钮、图表、图形，为用户提供更多的上下文和描述。

WCAG 2.0 在1.1.1非文本内容中指出，应为非文本内容（例如图像）提供替代文本，以便屏幕阅读器等辅助技术可以告知用户图像描绘的内容。alt 属性应始终用于为 HTML 中的 img 元素提供文本替代。aria 属性可用作附加文本替代项，但不能取代 alt 属性的要求。

Aria-label可用于标记元素的文本不可见的情况, 例如链接、视频、表单控件、地标角色和小部件角色,在 DOM 中不可见时，提供可访问的名称。

Aria-labelledby可用于标记元素的可见文本的情况, 非交互式元素或内联结构角色一起使用，例如code、term或emphasis或其语义不会映射到辅助功能 API 的角色，包括presentation、none和hidden。

Aria-label标签示例：

说明：如果第二个button里的可见文本内容为send email，则不需要aria-label标签。

Aria-labelledby标签示例：

Aria-labelledby应引用为元素提供易于访问的名称的简短文本。

Aria-describedby用于引用提供描述的较长内容。

如果 DOM 中没有元素提供适合交互元素的可访问名称的简短标签，则使用aria-label来定义交互元素的可访问名称。

Aria-describedby示例：

Title对使用鼠标的人非常有用，当鼠标悬停在元素上时，title属性将显示元素的文本替代内容。但对于仅使用键盘的用户来说则不可用，如某些屏幕阅读器，浏览器组合可能不支持该属性（如IE 11 和 NVDA）。

如果使用该title属性来提供附加信息，最好同时使用aria-label或alt标签。

Title和aria-label融合的示例：

<button aria-label="Back to the page" title="Close" > X </button>

Screen Reader：

https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

在谷歌chrome上安装成功后，鼠标所移动到的位置，会出现橙色的边框，如果带耳机的话，会听到边框内的内容被大声的朗读出来，包括按钮符号，字符符号等，帮助有视力障碍的人士提供便捷。

可设置：

1）仅朗读我选择的内容 2）大声朗读关键动作 3）朗读所有内容

缺点：

你不能暂停使用这个插件，除非删除它。

Chrome 屏幕阅读器扩展展示了仅使用 html 和 javascript 等 Web 技术构建的功能齐全的 Web 屏幕阅读器。该服务需要进行设置来调整朗读功能的工作强度。

当浏览器计算可访问名称时，该aria-labelledby属性具有最高优先级，它会覆盖命名元素的其他方法，包括aria-label、其他命名属性，甚至元素的内容。

如示例：

<button aria-label="Blue" aria-labelledby="color">Red</button>

<span id="color">Yellow</span>

在此示例中，该可访问名称是“Yellow”，而不是Blue。

在 Vue 中，aria-*属性也像任何其他 HTML 属性一样对待，可以绑定到静态属性或动态变量（使用前缀:aria-label），按钮元素没有文本内容。

按钮：按钮元素一样没有文本内容:

无标签输入：

本篇文章来源于微信公众号: 喃姐SEO日志