css - 在 HTML 表单中，斜体 "(required)"应该得到 、 还是 ？

Question

为了迎合屏幕阅读器和语义正确，在 HTML 表单中显示斜体“必需”或“可选”标签的正确方法是什么？

1. <i>*required</i>
2. <em>*required</em>
3. <span class="italic">*required</span>

* <span class="italic">等于 font-style="italic"在 CSS 中

Answer 1

可以说，<em>也不是 <i>在语义上是正确的。您的问题已经假定您希望文本在视觉上是斜体，而不是您希望它被强调或识别为外来文本、船名等。

话虽如此，中性元素可能是您的最佳选择，例如 <span> , 避免在 this none 的地方赋予语义。此外，如果您使用 <em>，屏幕阅读器将不会以任何不同的方式朗读文本。或 <i> .

您可以采取另一步骤，完全跳过添加元素并使用 CSS 为您添加内容(前提是您只支持一种语言和/或有一种简单的方法来为每种语言添加 CSS):

input[required] + label::after,
textarea[required] + label::after {
  content: " (required)"
}

或者反过来:

input:not([required]) + label::after,
textarea:not([required]) + label::after {
  content: " (optional)"
}

屏幕阅读器会宣布 CSS 生成的内容，以防您担心这可能是一个问题。