HTML title 属性而不是标签内容

Question

考虑到无障碍，好用吗：

<a href="about.html" title="About"></a>

没有任何内容，代替：

<a href="about.html">About</a>

更新：这是一个现场演示，假设有合适的字体可用。我实际上使用 RichStyle font.

a[href="about.html"]:before {
    /* 1F6C8  CIRCLED INFORMATION SOURCE = information */
    content: "F6C8";
}

<a href="about.html" title="About"></a>

Answer 1

不错不错。因为如果你想用图像做按钮而不用 a 标签做文本，你会做类似的事情。

<a href="about.html" title="About"></a>

只需确保为您的 a 设置样式，这样用户就可以点击它。

Answer 2

"Good" 是一个定义不太明确的术语。

屏幕阅读器是否可以访问 - 是的。根据WAI-ARIA姓名计算算法，title会被用来计算姓名。它是步骤 H，称为工具提示。

http://www.w3.org/TR/accname-aam-1.1/#mapping_additional_nd_te

然而，这还不是全部，因为 link 还需要有一个可见的名称，视力正常的 keyboard-only 用户可以访问。标题属性仅在您将鼠标悬停在项目上时显示在 HTML 中。

因此，仅当有一些其他可见指示表明 link 是什么并且此可见指示符符合所有其他可访问性要求时，此技术才可用。

Answer 3

出于 SEO 目的，它很好。您可以针对具有标题属性的关键字。所以，很好用。它让用户通过点击它来了解他将要做什么。我经常使用它。

Answer 4

这里有一些关于将 title 属性与锚标记一起使用的有用信息。

w3.org - supplementing link text with the title attribute

The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements.

Answer 5

WCAG 在他的规范部分 (2.4.4) 中说："The purpose of each link can be determined from the link text alone" (http://www.w3.org/TR/WCAG20/#navigation-mechanisms).

WCAG 还说您可以 "supplement" 具有 title 属性的 link 文本，因此它从 [=54] 的定义中排除了 title 属性=].

结论：您必须像第二个示例一样提供 link 文本：

 <a href="about.html">About</a>

虽然这在 WCAG 的规范部分中没有明确定义，但 "link text" 在技术中被定义为 link 的内部文本内容，包括图像替代。

有关更多信息，请参阅以下两种补充技术：

http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H30.html http://www.w3.org/TR/WCAG20-TECHS/H33.html

编辑：一条评论说明我的回答缺少一些例子

请注意，WCAG2.0 和 WAI-ARIA 是两个互补且截然不同的准则，如果有必要，您可以提供其他信息，这些信息可以公开给可访问性API。但在任何情况下，您都应该考虑将信息公开给可访问性 API 对于那些不使用辅助技术的人来说就足够了。

因此以下示例是错误的，因为如果不使用辅助技术，则无法在用户代理中访问 aria-label

<a href="about.html" aria-label="About"></a>

下面也是错误的:

<a href="about.html" title="About">
   <img width="100" height="100" src="about.png" alt="" /></a>

尽管您的 link 向辅助功能 API (WAI-ARIA) 公开了 "accessible name"，但它并未提供 WCAG 规范指南指定的 "link text" （显然意味着 a significant image is used as decorative）。

因此，如果您的 link 仅包含一张图片，则该图片应出现在 HTML 代码中，并使用 alt 属性正确授权

编辑 2：您可以阅读以下博客 post 来说明单独使用 title 属性的问题 https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

HTML title 属性而不是标签内容

HTML title attribute instead of the tag content

html

user-interface

accessibility

user-experience

emoji