JavaScript和屏幕阅读器

最新推荐文章于 2025-10-31 15:14:16 发布

翻译最新推荐文章于 2025-10-31 15:14:16 发布 · 251 阅读

文章标签：

#javascript #photoshop #ViewUI

以下内容从《科技时报》＃163重新发布。

尝试将带有海报的子级Ajax Web应用程序（例如GMail）与屏幕阅读器一起使用，您将再也不需要触摸屏幕阅读器了。为了支持那些没有那么奢侈的用户，那么，您是否需要不使用JavaScript？

这个问题的答案最终取决于您需要构建的Web应用程序的种类。当然，如果您开发的产品与Photoshop的基于Web的版本一样愚蠢，则可以在一开始就排除屏幕阅读器的支持。

但是，大多数Web应用程序都会陷入灰色区域，可以在其中支持屏幕阅读器-即使不牺牲您希望提供给其他用户群的JavaScript优势。问题就变成了实用吗？

一个实际的例子

暂时撇开GMail之类的内容，让我们再次看看在我即将出版的书中作为示例构建的手风琴控件。

返回几个问题，我们修改了此示例，以使键盘用户可以访问它。我们要做的就是在手风琴的每个部分的标题中都包含一个超链接，这样它就可以在键盘上聚焦。正如我们将看到的，使该结构可供屏幕阅读器用户访问也同样简单明了–一次完成这两个操作有点棘手！

为了刷新您的记忆，此页面的HTML代码如下所示：

<ul class="accordion">
  <li id="archer">
    <h2><a href="#archer">Jonathan Archer</a></h2>
    <p>Vessel registry: NX-01</p>
    <p>Assumed command: 2151</p>
    ...
  </li>
  ...
</ul>

如果这是该页面的全部内容，那么屏幕阅读器将可以轻松访问它。仅当我们的JavaScript代码通过在构成手风琴的列表项上动态设置一类"collapsed"时，我们才遇到麻烦。此类隐藏列表项中除标题以外的所有内容：

li.collapsed * {
  display: none;
}
li.collapsed h2,
li.collapsed h2 a:link, li.collapsed h2 a:visited {
  display: block;
}

这里的问题是使用display: none从视图中隐藏元素也会从屏幕阅读器中隐藏该元素，并且屏幕阅读器用户无法阅读页面的该部分。

当然，如果通过关闭"collapsed"属性来显示元素也向屏幕阅读器用户显示了这些元素，那么这可能不是问题。在这种情况下，屏幕阅读器用户可以像其他用户一样使用手风琴：通过“单击”手风琴中的标题以显示其内容。

然而，事实并非总是如此。大多数屏幕阅读器都使用页面可见内容的静态副本-很少且不可预测地更新的副本（尽管一些供应商早期表示可能会有所改变）。甚至在屏幕阅读器中，它们确实响应用户单击链接而刷新了页面内容的副本，也使用户意识到该内容已被泄露，这充其量也是有问题的。

不，在这种情况下，您最好的选择是隐藏折叠的手风琴的内容，以使屏幕阅读器用户仍然能够阅读它们。最有用的技术是offleft定位 ，CSS代码如下所示：

li.collapsed * {
  position: absolute;
  left: -9999px;
}

li.collapsed h2,
li.collapsed h2 a:link, li.collapsed h2 a:visited {
  position: static;
}

从本质上讲，此技术通过将元素放置在页面左侧（准确地说是在页面左侧9999像素）之外的位置来隐藏页面元素，在屏幕阅读器中仍然可以看到它们。

因此，现在屏幕阅读器用户可以阅读页面的全部内容，而不受我们的JavaScript驱动的手风琴效果的干扰！问题解决了吧？

好吧，不完全是。您会看到，偏左的位置不仅向屏幕阅读器显示了隐藏的元素，还使键盘用户也可以使用它们！在这种情况下，当键盘用户点击Tab键以单步浏览页面中的可聚焦元素时，焦点还将单步浏览隐藏内容中的所有超链接。由于这些元素是不可见的，因此键盘焦点似乎消失了，从而导致生气的电话。

由于没有可靠的方法可以向键盘用户隐藏元素而不向屏幕阅读器用户隐藏元素，因此我们需要采用其他方法。当键盘焦点放在隐藏的元素上时，我们如何做一些有用的事情……就像扩展手风琴的相关部分一样！

我们可以在手风琴中的每个可聚焦元素上添加focus事件侦听器（当然，始终可见的标题中的链接除外）：

var folds = accordion.getElementsByTagName("li");
for (var i = 0; i < folds.length; i++)
{
  var foldLinks = folds[i].getElementsByTagName("a");
  var foldTitleLink = foldLinks[0];
  addEvent(foldTitleLink, "click", Accordion.clickListener);

  for (var j = 1; j < foldLinks.length; j++)
  {
    addEvent(foldLinks[j], "focus", Accordion.focusListener);
  }

}

触发后，该focusListener函数将展开包含它的手风琴部分：

focusListener: function(event)
{
  var element = this;
  while (element.parentNode)
  {
    if (element.parentNode.className == "accordion")
    {
      Accordion.expand(element);
      return;
    }
    element = element.parentNode;
  }
}

在那里，您可以找到键盘和屏幕阅读器用户都可以访问的手风琴控件！