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

Question

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

<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>

撇开所有关于封装的感受，有谁知道这些不同方法呈现给用户的方式是否存在明显差异？

Answer 1

你的最后一个例子是最好的，因为它是分组的，但也使用 cite https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite:

cite:before {
 content: '- ';
}

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

只是样式引用：

Answer 2

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

由于 detailed in the html5 spec 对于 blockquotes，在这种情况下正确的标记是使用 <figure> 对引用和作者进行分组。来自规范：

…a blockquote element is used in conjunction with a figure element and its figcaption to clearly relate a quote to its attribution (which is not part of the quote and therefore doesn't belong inside the blockquote itself)

按照你的例子，理想的标记模式是：

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

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

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

Is my usage of blockquote elements acceptable from an accessibility perspective?

html

css

accessibility

user-experience

screen-readers