html - attribute - visibility hidden screen reader




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

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?. 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". 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" . The "-1" means that a user can't use the Tab key to get to it. 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>

We can use <noscript> to say Sorry, this website requires JavaScript to run.

What's the analogous way to announce that the site doesn't support screen readers? Something like <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.)


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.

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>

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

If you check the test below with the built-in screen reader on OSX, the first 2 paragraphs are read, but not the third.

<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





screen-readers