css - 如何将 anchor 标记 添加到 html block ？

Question

我有一个 html block ，我想将其用作可点击的链接。在下面的代码块中，我想将整个 div 变成一个链接。

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>

HTML5 允许将 html 包围在 anchor 标记中(我认为)。见下文

<a href="goThere.html">
    <div id="clickableLink">
        <h3>Link Heading</h3>
        <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    </div>
</a>

然而，这对我来说似乎是错误的。屏幕阅读器等软件将如何描述链接。

我还考虑了以下 CSS 技巧。我将 HTML 更改为

<div id="clickableLink">
    <h3>Link Heading</h3>
    <img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
    <a href="goThere.html"></a>
</div>

然后使用 CSS 设置链接样式以覆盖整个 div。见下文:

#clickableLink {
    position: relative;
    width: 100px;
    height: 200px;
    z-index: 0;
}

h3 {
    z-index: 0;
}

img {
    z-index: 0;
}

a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    z-index: 1;
}

这在除 IE 之外的所有浏览器中都能完美运行。还有其他人有什么建议吗？

Answer 1

您的第一种方法实际上是最好的。要描述您的链接，您应该使用 a 元素的属性，例如 title、alt 和可能的任何您想使用的 WAI-ARIA 标记。无论如何，这是良好的行业惯例，让您可以将内容包装在 a 标记中，而不必担心可访问性。