是否可以将整个'卡片'包裹在<a> tag?

时间:2017-03-15 22:41:36

标签: html accessibility wai-aria

In my website I have 'cards', each one with many elements (image, text, dates, etc.). It's kind of like a tweet card in twitter:

enter image description here

我希望整张卡片都是可点击的(应该是指向另一个页面的链接)。

目前,我将顶级元素作为<a>标记并使用aria-labelaria-describedby,以便屏幕阅读器正确读取。

<a
   href="/some-url"
   aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
   aria-describedby="description-1"
   >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/1983_Honda_Interceptor_VF750F.jpg/300px-1983_Honda_Interceptor_VF750F.jpg" alt="Honda VFR picture" height="100" />

  <p>Honda VFR</p>

  <div>
    <p>$10,000</p>
    <p>Kms: 10,000</p>
    <p>Date listed: yesterday</p>
    <p id="description-1">This bike is pretty great and a lot of other details go here</p>
  </div>
</a>

我考虑过aria-labelledby="title-id-1 price-id-1 distance-id-1",但我发现通过明确创建一个简短句子可以更好地阅读。

我依赖于屏幕阅读器会忽略<a>标记内的所有内容(如果我有aria-label)这一事实。这是一个安全的赌注吗?

所有似乎有点奇怪,但我想知道是否有任何具体原因我不应该这样做。

不幸的是,设计要求整张卡片都是可点击的,所以只选择特定的部件链接不是一种选择。

另一种选择是使用div,aria roles like this和JavaScript,这感觉就像是朝错误方向迈出的一步。

非常感谢任何帮助。

jsbin:https://output.jsbin.com/kusawu

2 个答案:

答案 0 :(得分:1)

  

是否可以将一张完整的卡片包裹起来&#39;在标签?

&#34;辅助&#34;是一个疯狂的概念。

例如,如果您视力不佳并使用屏幕阅读器帮助您阅读卡片内的文字&#34;。拥有aria-label可能会阻止屏幕阅读器阅读您可以部分阅读的内容。这意味着:你知道有一个内容,你可以读它,但你的屏幕阅读器会读另一个不同的内容。

话虽如此,在您的示例中,似乎它提高了可访问性:用户可以访问相同的内容,但用简单的英语,这是可观的。

所以我不认为这是一个问题。

答案 1 :(得分:0)

  

这可能不再需要依赖JavaScript了。从HTML5开始,这是完全有效的:

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

来源:CSS-tricks