CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Swen
Swen

Reputation: 787

"Displaying" a message to blind and visually impaired visitors

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

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

Upvotes: 1

Views: 333

Answers (2)

vcurd
vcurd

Reputation: 173

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 protected]">contact webmaster</a>.
	</address>
</footer>

Upvotes: 1

Alexander Nied
Alexander Nied

Reputation: 13623

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.

Upvotes: 2

Related Questions