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

Question

We can use <noscript> to say Sorry, this website requires JavaScript to run . 我们可以用<noscript>来表示抱歉，这个网站需要运行JavaScript 。

What's the analogous way to announce that the site doesn't support screen readers ? 有什么类似的方式宣布该网站不支持屏幕阅读器 ？ Something like <noscreenreader>Sorry, ...</noscreenreader> . 像<noscreenreader>Sorry, ...</noscreenreader> 。

(Short backstory: it's an app dependent on the idea to never use words. It heavily relies on images to convey information. It wouldn't make sense to announce anything in spoken language.) （简短的背景故事：这是一个依赖于从不使用单词的想法的应用程序。它严重依赖图像传达信息。用口语宣布任何东西是没有意义的。）

Answer 1

Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques ) to detect when somebody is using one. 屏幕阅读器在浏览器之上工作，因此没有直接的方法（只是一些复杂的Flash技术）来检测何时有人使用它。

Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. 最好的办法是将警告放在内容的开头，并为有视力的用户隐藏警告。 This article mentions several techniques. 本文提到了几种技术。

.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

There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders, ie by default its text will be read immediately after the page is loaded. WAI ARIA中有一个“警报” role属性，其作用类似于辅助技术/屏幕阅读器的可见JS警告框，即默认情况下，其文本将在加载页面后立即读取。

(WAI ARIA stands for "Web Accessibility Initiative – Accessible Rich Internet Applications" by the W3C, which expands the possibilities of web applications for assistive technologies like screen readers) （WAI ARIA代表W3C的“Web可访问性计划 - 可访问的富Internet应用程序”，它扩展了屏幕阅读器等辅助技术的Web应用程序的可能性）

So you could create an invisible element containg that attribute directly at the beginning of your <body> , similar to my example below. 因此，您可以在<body>的开头直接创建一个包含该属性的不可见元素，类似于下面的示例。

(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!) （注意：不要在类似的消息上使用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>

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

Answer 3

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

FWIW, regarding users not using screen readers, I think there's an advantage to use text-indent to hide the text rather than other options. FWIW，关于不使用屏幕阅读器的用户，我认为使用text-indent来隐藏文本而不是其他选项是有利的。

If you check the test below with the built-in screen reader on OSX, the first 2 paragraphs are read, but not the third. 如果您使用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 https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa

Answer 4

Do you put the focus on an initial element? 你把重点放在一个初始元素上吗？ If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. 如果是这样，您可以添加不可见的其他屏幕阅读器文本，这些文本将与具有焦点的元素一起阅读。 As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3? 正如其他人提到的那样，谷歌搜索“sr-only”类或者看看：什么是sr-only在Bootstrap 3？ . 。 Perhaps something like this: 也许是这样的：

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

If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0" . 如果你没有初始焦点，那么你可以让DOM中的第一个元素有一个包含隐藏文本的tabindex="0" ，这样当屏幕阅读器用户开始通过界面跳转时，他们会听到文本作为第一件事，但这是一个不太理想的解决方案，因为您通常不希望非交互元素具有tabindex="0" 。 Something like this: 像这样的东西：

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

A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . 可能的第三种解决方案，与第一种解决方案类似，是使用与第一个标题或主要元素相关联的额外文本，并使用tabindex="-1"将焦点放在该元素上。 The "-1" means that a user can't use the Tab key to get to it. “-1”表示用户无法使用Tab键来访问它。 Something like: 就像是：

<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 个解决方案

解决方案1
10 已采纳 2018-10-02 23:21:04

解决方案2
6 2018-10-02 23:48:20

解决方案3
4 2018-10-02 23:31:42

解决方案4
0 2018-10-02 23:54:13

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

问题描述

4 个解决方案

解决方案1 10 已采纳 2018-10-02 23:21:04

解决方案2 6 2018-10-02 23:48:20

解决方案3 4 2018-10-02 23:31:42

解决方案4 0 2018-10-02 23:54:13

解决方案1
10 已采纳 2018-10-02 23:21:04

解决方案2
6 2018-10-02 23:48:20

解决方案3
4 2018-10-02 23:31:42

解决方案4
0 2018-10-02 23:54:13