如何为无障碍访问优化缩略图HTML格式？<article>/<figure>标签抉择

核心原则：语义化标签要贴合内容实际意义，同时兼顾屏幕阅读器的识别效率，下面逐个分析你的三个方案：

方案1：<a>包裹<article> #

<article>的定义是「可独立分发或复用的自包含内容」，列表里的单条帖子/文章卡片完全符合这个定义——它本身就是能单独拿出来展示的内容单元，并非仅限详情页使用。

需要注意：HTML5允许块级元素嵌套在<a>中，这个结构合法。但要确保语义统一：给图片设置精准的alt文本，标题区域用<h3>这类标题标签，让屏幕阅读器能快速识别这是一篇文章的入口，而非普通内容块。

方案2：<a>包裹<figure> #

<figure>的核心语义是「带说明的媒体内容」，它更适合文章正文中的配图、图表这类辅助性内容，而非作为文章/帖子的整体入口容器。用在这里会混淆语义：屏幕阅读器会把它识别成「一张带说明的图片」，而非「文章链接入口」，会误导辅助技术用户，不推荐。

方案3：<a>直接包裹<img>和<div> #

这种极简结构的优势是减少嵌套，屏幕阅读器解析更快，但缺乏语义化标签支撑，用户只能靠链接文本和图片alt理解内容。如果你的卡片只有缩略图和简单标题，这个方案也可接受，但必须补充无障碍属性：

• 给<a>设置aria-label，明确标注「XX文章链接」；
• 图片alt要准确描述内容，避免重复标题；
• 标题区域优先用<h3>而非纯<div>，帮助屏幕阅读器识别内容层级。

最优推荐 #

优先选方案1，它既符合语义化规范，又能让屏幕阅读器清晰识别每个列表项是独立的文章入口。优化后的结构示例：

<a href="文章链接">
    <article>
        <img src="缩略图地址" alt="文章缩略图描述，比如「XX产品评测封面」">
        <h3>文章标题</h3>
        <p>文章简短摘要</p>
    </article>
</a>

这个结构下，屏幕阅读器会读出「文章，链接，XX产品评测封面，文章标题，文章简短摘要」，用户能清晰理解这是可点击的文章入口。

若追求极致简洁，方案3也可行，但务必做好无障碍属性补充，确保语义信息不缺失。

内容的提问来源于stack exchange，提问作者tklodd