1

I would like to "display" a message to all blind and visually impaired users that visit my website. It would say something like:

We have detected a screen reader is currently active. If we can do anything to make your browsing experience on this website easier, then please email us with your request at email@email.com

How would I do something like this in HTML without displaying it to regular visitors?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Swen
  • 767
  • 1
  • 9
  • 31
  • 1
    Your title says blind/visually impaired, your body says screen reader. So you are only interested in screen reader users? – unor Oct 21 '16 at 22:05
  • 1
    Please note that not all screen reader users are blind and not all low vision users use screen readers. Also, some SR users may freak out if you suggest you detected their use of assistive technology. – aardrian Oct 23 '16 at 17:39
  • My main reason for asking this question is because, some 3 years ago, I randomly read a comment on one of my websites from a blind user who wrote that he/she loved my website. I had no idea that blind people could use the web back then. Now that I've had some time to update that very same website, I would like to give that (or any other users using a screen reader) a chance to leave me some feedback about their browsing experience, so that I can hopefully make it better for them. – Swen Oct 23 '16 at 21:53
  • 1
    Ah. The context helps. I would still go with @vcurd's answer below as it is available to all users, including users of other assistive tech. Low vision users, for example, far outnumber blind users, but they do not often use screen readers. – aardrian Oct 23 '16 at 23:22

2 Answers2

2

If you look at https://www.webaccessibility.com/best_practices.php with the screen reader on, there is a "skip to content" link that is not shown on the page, but is focused by the screen reader. It's the first thing that gets focused, so that if the screen reader user doesn't want to have to skip over the same navigation controls at the top every time they load a page, they can just skip directly to the content.

This content is focusable for the screen reader, but not visible on the page. This is accomplished on that site with the following CSS:

#skiplink {
    height: 0;
    width: 0;
    position: absolute;
    left: -1000px;
}

Now, because the element is an anchor (a), it gets focus by default. If you want to force your screen reader text to be the first focusable element on the page, I would recommend putting it at or near the top of your <body> content, or giving it a tabindex="0" attribute.

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
1

While I appreciate your intent, there may be other users who also experience issues browsing your site. These may be related to accessibility or general usability, so I would recommend making the link available to all users.

Putting the link inside an address element in a footer marked up with the role of 'contentinfo' (to support older browsers) should allow screen reader users to locate the link via the landmark role, and also provides other users with the functionality too.

<footer role="contentinfo">
 <address>
     If you have any problems browsing this site please <a href="mailto:email@email.com">contact webmaster</a>.
 </address>
</footer>
vcurd
  • 173
  • 10
  • The `address` tag is intended for physical addresses. – Shannon Young Oct 21 '16 at 07:51
  • 2
    @ShannonYoung: No, [it’s for contact information](http://stackoverflow.com/a/28055232/1591669) for the page (or `article`). This can include postal addresses, but it’s not limited to it (and not all postal addresses are suitable for `address`). – unor Oct 21 '16 at 22:08