0

我有一个 HTML 结构，如：

<div aria-label="User overview">
   <a ... href="profile_page.html"><img ... src="user_profile_image" /></a>
   Info about the user

   <a ... href="profile_page.html">User name</a>
   More Info about the user
</div>

两个链接都指向同一个地方。我是否应该在 alt 属性中添加用户名，否则对于屏幕阅读器用户来说这将过于重复？

我应该删除屏幕阅读器的第二个链接吗？如果这是一个解决方案，我该怎么做？

将来我会更改 HTML 结构，但现在我必须保留它。

4

1 回答 1

1

  1. 删除aria-label上的div。它在非交互式元素上是无用的，或者最坏的情况会导致可访问性损坏。

  2. 当链接内的图像alt是其中唯一的内容时，它们必须始终包含一个属性

aria-hidden="true"完成此操作后，如果您认为这两个链接是重复的，则可以考虑将属性添加到其中一个链接。另一种可能性是使用仅 javascript 的解决方案来单击图像，这将避免任何与键盘相关的问题。因为许多人在不使用屏幕阅读器的情况下使用键盘导航。

您还可以考虑将图像和链接结合起来

于 2017-03-08T06:26:36.937 回答