如何宣布网站不支持屏幕reader？

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

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

FWIW，关于不使用屏幕 readers 的用户，我认为使用 text-indent 来隐藏文本比使用其他选项更有优势。

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

<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 3

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

（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 4

你会把注意力放在第一个元素上吗？如果是这样，您可以添加不可见的额外屏幕 reader 文本，这些文本将与具有焦点的元素一起阅读。正如其他人提到的那样，google 搜索 "sr-only" class 或查看此内容：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"，这样当屏幕 reader 用户开始在界面中切换，他们首先会听到文本，但这是一个不太理想的解决方案，因为您通常不希望 non-interactive 元素具有 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>

如何宣布网站不支持屏幕reader？

How to announce that a website has no screen reader support?

html

accessibility

screen-readers