html 5 中的内联引号和可访问性

Question

在 HTML 文本中引用他人的推荐方式是什么？特别是如果我想确保屏幕阅读器能够正确处理它？

我应该像这样使用双引号吗："
我应该这样写 " 吗？
我应该使用显然无法在此处演示的 <q></q> 对吗？
还有别的吗？

http://html5doctor.com/blockquote-q-cite/ 有一堆关于 <q> 工作原理的解释，但我没有看到推荐。

Answer 1

对于简短的内嵌引用，请使用 <q></q> 标签。大多数浏览器会在引号两边插入引号，但是如果您使用 css 重置，则可能需要以下内容：

q:before, q:after {
    content: "&quot;"
}

对于任何更长的引用，我建议结合使用 <blockquote></blockquote> 标签和 <cite></cite> 标签，如下所示：

<blockquote>
    This text is from another source
    <cite>
        <a href="http://source-url.com">Source Title</a>
    </cite>
</blockquote>

根据 HTML5 规范：

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

来源：https://w3c.github.io/html/grouping-content.html#the-blockquote-element

避免将行内引号与 <q></q> 标签一起使用，但它们可以与 <blockquote></blockquote> 标签一起使用。在任何一种情况下，都建议在外部来源的引用和页面的原始内容之间进行某种图形区分（例如斜体或不同的背景颜色）。

Answer 2

TL;DR：使用 q 表示行内引号，不带标记，使用 blockquote 表示长片段（当它不是 [=14 中的唯一内容时带标记） =])

你有两个选择：

The <q> element，引号

此元素不得包含引号标点符号

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

但您可以使用 CSS 覆盖默认值。例如：

:lang(en) q:before {
  content: "&ldquo;";
}
:lang(en) q:after {
  content: "&rdquo;";
}

:lang(fr) q:before {
  content: "&laquo;";
}
:lang(fr) q:after {
  content: "&raquo;";
}

如您所见，this can differ per language

示例：

<p>Shakespeare said <q>To be or not to be</q> was a question
     but never said what the answer was.</p>

The <blokquote> element，对于片段

该元素可能包含引号：

Quotation marks may be used to delineate between quoted text and annotations within a blockquote.

请注意 <cite> 元素，该元素旨在引用创意作品或其作者的姓名。它不包含引号。例子

<blockquote>
 <p>My favorite quote of Shakespeare is "To be or not to be ?"</p>
  <footer>
    — <cite class="title">The Tragedy of Hamlet, Prince of Denmark</cite>
    by <cite class="author">William Shakespeare</cite>
  </footer>
</blockquote>

html 5 中的内联引号和可访问性

Inline quote in html 5 and accessibility

html

accessibility

screen-readers