16

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

Johannes
  • 64,305
  • 18
  • 73
  • 130
Lazar Ljubenović
  • 18,976
  • 10
  • 56
  • 91
  • bootstrap has an sronly class, but you should make the content accessible regardless – dandavis Oct 02 '18 at 23:14
  • 1
    If you are American or serve an American audience: This *sounds* ADA compliant (accessibility is not possible without fundamentally altering the service), but you should consult a lawyer just in case. Companies have been sued for providing inaccessible websites. – Kevin Oct 03 '18 at 04:08

4 Answers4

11

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>
David
  • 6,695
  • 3
  • 29
  • 46
6

There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders, i.e. by default its text will be read immediately after the page is loaded.

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

So you could create an invisible element containg that attribute directly at the beginning of your <body>, similar to my example below.

(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!)

#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

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Using `role="alert"` is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must have `role="alert"` when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that has `role="alert"` or if a child DOM element of the alert is unhidden. Note that `role="alert"` gives your element an implicit `aria-live="assertive"`. See https://www.w3.org/TR/wai-aria/#aria-live – slugolicious Oct 03 '18 at 00:09
  • @slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know about `aria-live="assertive"` - that's what is desired here, so I didn't mention it additionally. – Johannes Oct 03 '18 at 00:12
  • I wonder: will this be included in the snippet shown in the Google results? You often end up seeing the cookie disclaimer there instead of the title/summary... Also: if the `role="alert"` makes it so that it is immediately read by a screen reader, why put it at the beginning of the document? Why not as the last thing on the page? – Giacomo Alzetta Oct 03 '18 at 09:58
  • @GiacomoAlzetta Well, theoretically, can put it anywhere, that's correct. That way it's just easier to find for people who in some way work with the code (i.e. developers). Concerning search results, on a page like this I would recommend strongly to use the usual SEO meta tags in the `` tag for a description which will then be displayed in search results - the image alt tags which otherwise would be displayed in a search result also wouldn't be very helpful. – Johannes Oct 03 '18 at 10:06
4
<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

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
0

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>
slugolicious
  • 15,824
  • 2
  • 29
  • 43