HTML标题属性而不是标记内容

时间:2015-09-18 13:14:24

标签: html user-interface accessibility user-experience emoji

考虑到可访问性,使用起来是否合适:

<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: "\1F6C8";
}
<a href="about.html" title="About"></a>

5 个答案:

答案 0 :(得分:4)

以下是有关将title属性与锚标记一起使用的一些很好的信息。

w3.org - supplementing link text with the title attribute

  

此技术的目的是演示如何在锚元素上使用title属性来提供描述链接的其他文本。 title属性用于提供其他信息,以帮助阐明或进一步描述链接的用途。如果通过title属性提供的补充信息是用户在关注链接之前应该知道的内容,例如警告,那么它应该在链接文本中而不是在title属性中提供。

     

由于支持对title属性的访问存在广泛的用户代理限制,因此作者在应用此技术时应谨慎使用。出于这个原因,作者最好使用技术C7:使用CSS隐藏链接文本(CSS)的一部分或H30:提供描述锚元素链接目的的链接文本。

答案 1 :(得分:1)

&#34;良好的&#34;是一个定义不太明确的术语。

屏幕阅读器是否可以访问 - 是的。根据WAI-ARIA名称计算算法,标题将用于计算名称。它是步骤H,被称为工具提示。

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

但是,这不是全局,因为还需要有一个可见的名称才能被有视力的仅限键盘的用户访问。当您将鼠标悬停在某个项目上时,标题属性仅以HTML格式显示。

因此,只有在链接是什么的其他可见指示以及此可见指标符合所有其他可访问性要求时,才能访问此技术。

答案 2 :(得分:1)

WCAG在其规范部分(2.4.4)中说:“每个链接的目的可以仅通过链接文本确定”http://www.w3.org/TR/WCAG20/#navigation-mechanisms)。

WCAG还说,您可以使用title属性“补充”链接文字,因此它会从“链接文字”的定义中排除title属性。

结论:您必须提供第二个示例中的链接文本:

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

虽然WCAG的这个规范部分没有明确定义,但“链接文本”在技术中被定义为链接内部文本的内容,包括图像替代。

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

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>

虽然您的链接向Accessibility API(WAI-ARIA)公开了“可访问的名称”,但它没有提供WCAG规范指南中指定的“链接文本”(显然意味着a significant image is used as decorative)。

因此,如果您的链接仅包含图片,则此图片应出现在HTML代码中,并使用alt属性正确授权

编辑2:您可以阅读以下博客文章,仅使用title属性https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/来说明问题

答案 3 :(得分:0)

它不坏或不好。因为如果你想用图像做按钮而没有带有a标签的文本,你会做类似的事情。

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

只需确保为您设置样式,以便用户可以点击它。

答案 4 :(得分:0)

对于SEO目的来说这很好。您可以瞄准具有title属性的关键字。所以,使用起来很好。它通过点击它可以让用户了解他将要做什么。我经常使用它。