Question

我们可以使用<noscript>来表达抱歉，此网站需要运行JavaScript 。

用什么类似的方式来宣布该网站不支持屏幕阅读器？像<noscreenreader>Sorry, ...</noscreenreader>之类的东西。

（简短的背景知识：这是一个依赖于从不使用单词的想法的应用。它很大程度上依赖于图像来传达信息。宣布任何内容口语。）

Answer 1

屏幕阅读器在浏览器之上工作，因此没有简单的方法（只是一些令人费解的Flash techniques）来检测何时有人正在使用一个。

您最好的选择是将警告放在内容的开头，并将其隐藏给有视力的用户。 This article提到了几种技术。

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

<div class="hidden">Sorry, this website requires JavaScript to run.</div>

Answer 2

WAI ARIA中有一个“ alert” role属性，其作用类似于辅助技术/屏幕阅读器的可见JS警报框，即，默认情况下，将在加载页面后立即读取其文本。 / p>

（WAI ARIA代表W3C的“ Web Accessibility Initiative – Accessible Rich Internet Applications”，它为辅助技术（如屏幕阅读器）扩展了Web应用程序的可能性）

因此，您可以直接在<body>的开头创建一个包含该属性的不可见元素，类似于下面的示例。

（注意：请勿在这样的消息上使用display: none-大多数屏幕阅读器会将其视为不阅读其文本的命令！）

#screenreader_alert {
  position: fixed;
  left: -50px;
  width: 1px;
  height: 1px;
  color: transparent;
  overflow: hidden;
}

<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>

进一步阅读：https://w3c.github.io/aria-practices/#alert

Answer 3

<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>

FWIW，对于不使用屏幕阅读器的用户，我认为使用文本缩进来隐藏文本而不是其他选项是有好处的。

如果使用OSX上的内置屏幕阅读器检查下面的测试，则会读取前两段，但不会读取第三段。

<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>

https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa

Answer 4

您是否将重点放在初始元素上？如果是这样，您可以添加其他不可见的屏幕阅读器文本，这些文本将与具有焦点的元素一起阅读。正如其他人提到的那样，请在Google上搜索“仅sr”类，或查看此内容：What is sr-only in Bootstrap 3?。也许是这样的：

<button>
  I'm the first focusable element
  <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>

如果您没有最初的关注点，则可以使DOM中的第一个元素具有一个tabindex="0"，其中包含隐藏的文本，以便当屏幕阅读器用户开始在界面中切换时，它们会首先听到文本，但这是不太理想的解决方案，因为您通常不希望非交互式元素具有tabindex="0"。像这样：

<html>
  <body>
    <span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
    <!-- the rest of your real code -->
  </body>
</html>

与第一个解决方案类似，第三个可能的解决方案是让多余的文本与您的第一个标题或主要元素相关联，并使用tabindex="-1"集中于该元素。 “ -1”表示用户无法使用 Tab 键进行访问。像这样：

<html>
  <script>
    function myload() {
      document.getElementById("myid").focus();
    }
  </script>
  <body onload="myload()">
    <h1 id="myid" tabindex="-1">
      Welcome to my site
      <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
    </h1>
  </body>
</html>

如何宣布网站不支持屏幕阅读器？

4 个答案: