本文介绍了是否可以将整张卡片包装在<；a>；标签中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的网站上有"卡片"，每一张都有很多元素(图像、文本、日期等)。有点像推特里的推特卡片：
我希望整个卡片都是可点击的(应该是指向另一个页面的链接)。
目前，我将顶层元素作为<a>标记，并使用aria-label和aria-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
推荐答案
是否可以将整个"卡片"包装在标签中？
"可访问性"是一个空泛的概念。
例如，如果您视力低下，使用屏幕阅读器帮助您阅读"卡片"内的文本。使用aria-label可能会阻止屏幕阅读器阅读您可以部分阅读的内容。这意味着：你知道有一个内容，你可以很好地阅读它，但你的屏幕阅读器读到的是另一种不同的东西。
这就是说，在您的示例中，它似乎提高了可访问性：用户可以访问相同的内容，但使用的是通俗易懂的英语，这是可以理解的。
所以我认为这不是问题。
这篇关于是否可以将整张卡片包装在<；a>；标签中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！