0

I'm using a "screenreader-only" class to hide text on my page for accessiblity purposes. This class uses position:absolute and text-ident to hide text from visual users, but show for screen readers. For example, here I have a heading where I use screenreader to read FAQ as 3 separate letters, instead of one word together:

<h1> FAQ Page 
<span class="screenreader-only"><abbr>F A Q</abbr> Page </span> 
</h1>

However, I recently realized when this page shows up on Google search, the description says: "FAQ PageF A Q Page ...". This is not ideal. Is there a way to hide the screenreader-only text so google does not pick it up? Or at least that it does not show when users search for my page in the description?

Thanks for your help

thatDubstepSound
  • 337
  • 5
  • 18
  • 1
    Did you see [How can I hide certain text from search engines?](https://stackoverflow.com/q/6588438/3744182) and/or [Is there a way to make robots ignore certain text?](https://stackoverflow.com/q/3207211/3744182), [ tag for Google](https://stackoverflow.com/q/15685205/3744182) and/or [Preventing robots from crawling specific part of a page](https://webmasters.stackexchange.com/q/16390/100199)? – dbc Aug 14 '21 at 16:54
  • Does this answer your question? [How can I hide certain text from search engines?](https://stackoverflow.com/questions/6588438/how-can-i-hide-certain-text-from-search-engines) – Rob Aug 15 '21 at 09:32

1 Answers1

1

Well what do you think a screen reader sees?

It will also read "FAQ page, F A Q page" as you haven't hidden the original text from the screen reader (you would put a <span> around the original text and use aria-hidden="true" if this was the correct way to handle it, which it isn't in this case).

Although it doesn't answer the question, this will solve your problem on both counts:

<h1>
    <abbr title="Frequently Asked Questions">FAQ</abbr>
</h1>

It will show correctly in search engines and be accessible.

The golden rule is do not try and interfere with screen reader pronunciation. There are other ways that you can read a word out if it doesn't make sense on the first pass (one letter at a time).

By using the <abbr> element with a title there is also additional information to explain the term.

If you want a 100% reliable way (as some obscure screen readers don't like title even when used on an <abbr> element as is the recommended way). You can link a term to a glossary. I don't recommend this in a heading though!

Actually it can be even simpler in your example / use case

Although I showed you how to add the <abbr> element, in reality "FAQ" is so widely used and understood that:

<h1>
   FAQ
</h1>

Would be perfectly acceptable.

Yet again, people who use a screen reader will soon understand that and if they don't read it out letter by letter and understand it then.

Visually hidden text

Most of the time visually hidden text will be ignored by Google (there is no guarantee).

Either way, moving text off screen is not good for accessibility.

So if you use a "proper" visually hidden class this can also help and will be more robust:

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64