0

有没有办法让屏幕阅读器可以访问动态值？问题是如果有值，它会被读出，但如果没有值，屏幕阅读器会完全跳过它。但是，我想将其读取为无值或 null 或类似的东西，这可能表明禁用用户特定值不存在或缺失。

将 JAWS 19 与 Chrome 和 IE 一起使用。

数据表示：

付款方式 价值
支票
现金 20
DD

问题：现在的问题是，如果 Cash 有 20 之类的值，它就会被重点关注并宣布。但是如果没有像 Check 和 DD 这样的值，JAWS 会完全跳过它。当值不存在时，我希望 JAWS 将其读取为空白/空。

付款类型和值包含在 dl、dt 和 dd 标记中。由于安全原因，无法共享实际代码。希望你能理解。

4

2 回答 2

0

我想我明白你现在的要求了。您的额外解释与动态值无关。听起来您希望将空白值读取为“空白”或“缺失”或某种文本，而不仅仅是沉默。 而且您的值只是纯文本（在定义列表中<dl>）。

如果这是对您问题的正确解释，那么您可以使用明显隐藏的文本来做您想做的事情。这是视力正常的用户看不到但仍可供屏幕阅读器阅读的文本。

您的简单示例实际上应该是一个具有两个列标题的表格，“付款类型”和“价值”，然后“支票”、“现金”和“dd”应该是行标题。使用定义列表对您的示例并没有真正意义，但在您的真实代码中可能有意义。

那么你有这样的东西吗？

<dl>
  <dt>payment type</dt>
  <dd>value</dd>
  <dt>cheque</dt>
  <dd></dd>
  <dt>cash</dt>
  <dd>20</dd>
  <dt>dd</dt>
  <dd></dd>
</dl>

同样，对于您的简单示例，如果您的实际代码相似，则应使用表：

<table>
  <tr>
    <th scope="col">payment type</th>
    <th scope="col">value</th>
  </tr>
  <tr>
    <th scope="row">cheque</th>
    <td></td>
  </tr>
  <tr>
    <th scope="row">cash</th>
    <td>20</td>
  </tr>
  <tr>
    <th scope="row">dd</th>
    <td></td>
  </tr>
</table>

在任何一种情况下，如果您想让屏幕阅读器读取空<dd>或空的内容，请使用可视化隐藏文本的类。<td>请参阅Bootstrap 3 中的 sr-only 是什么？

  <dt>dd</dt>
  <dd><span class="sr-only">empty</span></dd>

或者

  <tr>
    <th scope="row">dd</th>
    <td><span class="sr-only">missing</span></td>
  </tr>

WebAIM 有一篇关于“仅适用于屏幕阅读器用户的隐形内容”的好文章。

于 2019-03-14T08:22:54.107 回答
0

如果它的动态值，您可以简单地触发一个 javascript 函数，该函数将为空标签提供一个虚拟内容，表示没有内容。

如果有值：

<dl>
  <dt>Name</dt>
  <dd>John Snow</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>Gender</dt>
  <dd>Male</dd>
</dl>

如果没有价值

<dl>
  <dt>Name</dt>
  <dd>John Snow</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>Gender</dt>
  <dd>Value not Present</dd>
</dl>

确保将属性附加aria-describedby到它的父元素，锚定它的类以确保<dt>标签中的内容被屏幕阅读器解释。

于 2019-04-26T06:41:59.847 回答