时间戳

首页 > 解决方案 > 从可访问性的角度来看，我对块引用元素的使用是否可以接受？

html - 从可访问性的角度来看，我对块引用元素的使用是否可以接受？

问题描述

我有一个简单的方法来输出一些我可以采用的标记，结果是：

<blockquote>The quote</blockquote>
<blockquote>The quotee</blockquote>

例如（1）：

<blockquote>The secret of getting ahead is getting started.</blockquote>
<blockquote>- Mark Twain</blockquote>

这让我觉得有点恶心，好像块引用的内容都应该是独立的。而且在这样做的过程中，我可能会通过依赖语义标记的辅助技术（例如屏幕阅读器）触发一些不太理想的结果。

如果它是自包含的，则需要额外的标记来可靠地设置被引用者的样式，以不同于使用 CSS 的引用，例如 (2)：

<blockquote>
  The secret of getting ahead is getting started.
  <span>- Mark Twain</span>
</blockquote>

除了对封装的所有感受之外，有谁知道这些不同的方法如何呈现给用户是否存在明显的差异？

标签： htmlcssaccessibilityuser-experiencescreen-readers

解决方案

除非内容<cite>是引文本身的一部分，否则它不应该存在于 中<blockquote>，只有引文应该在其中。

正如html5 规范中关于 blockquotes 的详细说明，在这种情况下，正确的标记将用于<figure>对引用和作者进行分组。从规范：

...块引用元素与图形元素及其 figcaption 结合使用，以清楚地将引用与其属性相关联（这不是引用的一部分，因此不属于块引用本身）

做，给定您的示例，理想的标记模式将是：

<figure>
    <blockquote>
        <p>The secret of getting ahead is getting started.</p> 
    </blockquote>
    <figcaption>Mark Twain</figcaption>
</figure>

<cite>将用于指向该报价的实际来源。

推荐阅读