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

2
  • bootstrap has an sronly class, but you should make the content accessible regardless
    – dandavis
    Oct 2, 2018 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 3, 2018 at 4:08

4 Answers 4

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>
2
  • David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;) Oct 2, 2018 at 23:37
  • @DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
    – David
    Oct 2, 2018 at 23:38
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

4
  • 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 w3.org/TR/wai-aria/#aria-live Oct 3, 2018 at 0: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 3, 2018 at 0: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? Oct 3, 2018 at 9: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 <head> 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 3, 2018 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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.