Question

是否有可能使屏幕阅读器可以访问动态值？问题是如果有值，则将其读出，但如果没有值，则屏幕阅读器将完全跳过它。但是，我想以无值或null或类似的内容将其读出，以表明禁用的用户特定的值不存在或缺失。

在Chrome和IE中使用JAWS 19。

数据表示形式：

付款类型值
支票
现金20
DD

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

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

Answer 1

我想我知道您现在要的是什么。您的额外解释与动态值无关。听起来您想让空白值读为“空白”或“缺失”或某种文本，而不仅仅是静默。而且，您的值只是纯文本（在定义列表<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>都能被屏幕阅读器读取，请使用可视地隐藏文本的类。参见What is sr-only in Bootstrap 3?

  <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在“ Invisible Content Just for Screen Reader Users”上有一篇不错的文章。

Answer 2

如果它是动态值，则可以简单地触发一个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>标记中的内容。

可访问性动态内容问题

2 个答案: