时间戳

首页 > 解决方案 > 如何方便地填写空白？

html - 如何方便地填写空白？

问题描述

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

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

我不希望下划线/下划线实际上是一个实际的文本输入框。什么是在 HTML 中标记它以便可以说是屏幕阅读器的好方法？如果可以传达下划线是四个字符长，那就更好了。

也许我的例子离我的实际用例太远了。相反，想象一个简单的 HTML 数学课，这样的东西是可见的：

2 + ___ = 5

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

标签： htmlaccessibility

解决方案

根据屏幕阅读器的“详细程度”设置，某些符号可能会被忽略。例如，逗号、句号和括号通常不是按字面意思宣布的。下划线也经常被忽略。但是，用户可以更改他们的屏幕阅读器设置以听到它们。但是在您的情况下，无需更改设置就可以听到完整的表达方式。

aria-label您可以使用属性为元素提供替代文本。但是，aria-label如果它用于非语义元素，则并不总是宣布。请参阅“ 2.10 实用支持：aria-label、aria-labelledby 和 aria- describeby ”，特别是关于 <div> 和 <span> 的倒数第三个要点。

为了aria-label得到尊重，元素必须具有语义role。

例如，如果您有：

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

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

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

但是，由于上述<span>元素没有任何语义含义，因此aria-label被忽略的问题，您需要为<span>想出一个role。

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

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

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

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

推荐阅读