文本非常大的段落中的行高答案

【问题标题】：line-height in paragraphs with very large text文本非常大的段落中的行高
【发布时间】：2021-07-21 10:08:11
【问题描述】：

Bootstrap 提供了一种方法来调整段落文本的字体大小，使其看起来非常大；例如标题的大小和样式，而不实际使用标题级别的 HTML 标记。

我不想要使用真正的<H2> 标签来影响该文本的视觉呈现，因为它是站点页脚中的次要、独立文本，并且后面或前面没有任何内容，我不想影响文档大纲。

<p class="h2">This is a very large stand-alone slogan text.</p>

但是，我收到了来自可访问性检查器的警告：

段落的行高至少应为字体大小的 1.5 倍。

W3C 关于视觉呈现的基本成功标准如下：

https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html

段落内的行距（前导）至少是一个半空格，并且段落间距至少是行距的 1.5 倍。

这里的问题是这个网站上的标题样式的行高为 1.2，看起来不错并且有很多空白。

因此，我认为这被标记为误报。

是否有推荐的方法来避免被上面的行高警告标记？我应该切换到<div> 还是其他 HTML5 标记？想法？

【问题讨论】：

有问题的可访问性检查器是 siteimprove.com 以下是他们提供的详细信息，实际上并没有什么帮助...alfa.siteimprove.com/rules/sia-r73
如果切换到另一个标签会产生影响，请摆脱可访问性检查器，因为这不应该是一个相关因素。请注意，WCAG 要求要求空格半，而不是字体大小半。因此，如果常规单行间距是字体大小的 1.2 倍，则行间距需要是字体大小的 1.8 倍。但无论如何，这绝对是误报。它适用于定义为不止一个句子的“文本块”。你只有一个。
我对你在说什么@Alohci 感到困惑。 W3C 说“行距（前导）在段落中至少是一个半空格”，翻译成 line-height: 1.5 不是吗？
他的意思是段落前的间距（例如，如果你有多个段落）应该至少是行高的 1.5 倍。因此，如果您的 line-height 为 1.5，则您的 段落间距 应为 2.25 (1.5 * 1.5)。他们添加的最后一句话在这里是最重要的，这条规则不适用，因为它不是一个“文本块”，只是一个句子。希望这很清楚。
@GrahamRitchie -- 不，第一部分不是我的意思。 WCAG 文档中的描述说：“段落中的半个空格我们的意思是一行的顶部比它下面的行的顶部远 150%，而不是文本为 '单行距'（字体的默认间距）。”当行高为“正常”时，文本将是单行距，通常约为 1.2 * 字体大小。所以空间半 = 1.5 * 1.2 * 字体大小。段落之间的间距需要为 1.5 * 1.5 * 1.2 * font-size = 2.7 * font-size。

标签： html css bootstrap-4 accessibility

【解决方案1】：

我应该使用不同的元素吗？

继续使用段落，这很可能是语义上最正确的元素。切换到不同的元素（尤其是没有任何 WAI-ARIA 的 <div> 给它一个 role）可能意味着您破坏了文档的语义。

话虽如此，从文本截图中并不能完全清楚 <p> 是否是最合适的元素，因此请将此建议视为“可能是正确的”而不是确定的！

SC 1.4.8 真的在这里适用吗？

正如评论中指出的，这条规则适用于“文本块”。

文本块

不止一个句子

由于这是页脚中没有周围文字的单个句子，因此不适用于此处。

还有其他需要注意的 WCAG 规则吗？

虽然几乎可以肯定 SC 1.4.8 不适用，但SC 1.4.12 Text Spacing 确实仍然适用，因此您需要注意这一点。

因此，您需要确保有人可以使用以下设置覆盖您的样式，并且它仍然可读并且不会与任何其他项目重叠：

行高（行距）至少为字体大小的 1.5 倍；
以下段落的间距至少为字体大小的 2 倍；
字母间距（跟踪）至少为字体大小的 0.12 倍；
字间距至少为字体大小的 0.16 倍。

您应该能够同时设置上述所有，并且仍然可读。

我可以摆脱错误吗？

据我所知，siteimprove 仅允许您从抓取过程中删除整个页面，因此您只需手动忽略这一点。我确实快速浏览了文档，看看自从我们停止使用它但找不到任何东西后这是否发生了变化。

也许联系他们，看看是否有办法忽略这一点，因为这是误报。

【讨论】：

【解决方案2】：

我建议只使用another HTML tag。 <div> 可能是最合适的，尽管您可以考虑使用 <section> 或 <aside>。

如果这个特定的可访问性检查器警告成为一个持续的烦恼（而且这确实不是问题），您当然可以将其静音。

【讨论】：