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被忽略，因此您需要为role >。

如果您真正显示的是数学表达式，则以下内容可在firefox上的NVDA和iOS上的VoiceOver上使用：

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

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

我不确定“数学”在这里确实是正确的角色，但是经过有限的测试，它确实会让您想要。您可能想看看其他可用的roles。