html - 如何轻松完成填空？

Question

在 HTML 中，我想要这样的东西:

<p>A man, a ____, a canal, panama.</p>

我不希望下划线/下划线实际上是一个实际的文本输入框。在 HTML 中对其进行标记以便屏幕阅读器可以访问的好方法是什么？如果能够表明下划线有四个字符长，那就更好了。

---

也许我的示例与我的实际用例相差太远。相反，想象一下 HTML 中的简单数学课，并且可以看到类似这样的内容:

2 + ___ = 5

没有交互性——读者无法在输入字段中实际填写 3。它只是作为读者的练习，也许他们可以在其他地方查找答案。如果我只使用下划线或 CSS 下划线，则不会向屏幕阅读器用户提示那里有空白。他们听到“二加等于五”。

Answer 1

根据屏幕阅读器的“详细程度”设置，某些符号可能会被忽略。例如，逗号、句号和括号通常不会按字面意思表示。下划线也经常被忽略。但是，用户可以更改屏幕阅读器设置来收听它们。但就您而言，如果无需更改设置就能听到完整的表达，那就太好了。

您可以使用 aria-label 为元素提供替代文本属性。但是，如果在非语义元素上使用 aria-label，则并不总是会声明它。请参阅“2.10 Practical Support: aria-label, aria-labelledby and aria-describedby ”，特别是关于

和 的倒数第三个要点。

为了遵守 aria-label，该元素必须具有语义 role .

例如，如果您有:

<p>2 + ___ = 5</p>

下划线将被忽略。在 Firefox 上使用 NVDA，我听到“二加等于五”。为了解决这个问题，我可以给“____”一个 aria-label。

<p>2 + <span aria-label="4 underscores">___</span> = 5</p>

但是，由于前面提到的 元素没有任何语义含义，因此 aria-label 被忽略，因此您需要提出一个 角色 为。

如果您真正要展示数学表达式，则以下内容适用于 Firefox 上的 NVDA 和 iOS 上的 VoiceOver:

<p>2 + <span role="math" aria-label="4 underscores">___</span> = 5</p>

我听到“两个加四个下划线等于 5”。

我不确定“数学”在这里是否真的是正确的角色，但通过我有限的测试，它确实可以满足您的需求。您可能想看看其他 roles可用。

关于html - 如何轻松完成填空？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54611894/