Mobile app version of vmapp.org
Login or Join
Murray155

: Hide text ONLY for screen readers The WCAG says it can be done by aria-hidden tag, but I've read it's not working at many screen readers. Can't get how display:none can help to hide some

@Murray155

Posted in: #Accessibility #Css #HiddenText #Html

The WCAG says it can be done by aria-hidden tag, but I've read it's not working at many screen readers.

Can't get how display:none can help to hide some text only for screen readers (=visible to other devices than SR). This is also not clear how would screen reader act for display:none if it not supports CSS.

Is there any technique or best practice or whatever I can use to hide some text only for screen readers?

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Murray155

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Annie201

Is there any technique or best practice or whatever I can use to hide some text only for screen readers?


I can give an answer for the "whatever" part of your question.

Create an image and add text in it using your image manipulation program. Then for the most secretive approach, use CSS to define your image as a background of a DIV element.

Here's code to help you get started:

<html>
<head>
<style> #secret {background-image:url('/path/to/imagewithwords.jpg');width:Wpx;height:Hpx;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>


In my code I used W and H to denote width and height of the image. You need to replace those letters in the style declaration with the actual width and height of your image in pixels to see all of it. For example, if your image is stored as the filename secret.jpg and its in the document root folder and the width of the image is 100 pixels and the height is 200 pixels, then use this code:

<html>
<head>
<style> #secret {background-image:url('/secret.jpg');width:100px;height:200px;}
</style>
</head>
<body>
<div ID="secret"></div>
</body>
</html>


Browsers should respect that DIV is a block element and if your browser does not, then right after the {, add a display:block;.

Only caveat to my method is that the text must always be a fixed size regardless of screen resolution or browser settings because it is part of the image itself.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme