Visually remove <h1> element whilst preserving screen reader accessibility and avoiding penalties by search engines

Question

I would like to visually hide the <h1> element on the page from regular site visitors; however, I am conscious that the element is important for users with screen readers. So I need to visually hide the element in a way that screen readers can still access it.

It seems there are many techniques which could be used. For example using text indenting to move the text off the screen. In other case some use styling, to set the height and width of to 1px and then hide the overflow.

While these should work from an accessibility point of view, I am concerned that these techniques could be considered as a case of "cloaking" by search engines, resulting in the site being penalized.

What would be the best way of solving this? Is this even possible?

Gang

Answer 1

Below is the standard code used in Boilerplate. Simply assign "visuallyhidden" class to your headings. They will not be visible on the screen but the screen readers will be able to read them.

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
}

Vorticella

Answer 2

Best way to do that is to use the aria-label attribute on the tag:

 <h1 aria-label="My text for screen readers"></h1>

In matter of SEO, you won't be penalized, but also, you won't have any benefit.

In matter of accessibility, I have never seen a case where hiding the text for 99% of the visitors can help.

To be honest, I think you really should reconsider your question. If you don't need a <h1>, at least you can wrap your web site logo inside. But if your page has a specific title, I don't understand why other people shouldn't be able to see it...

Intercalary

Note though, that aria-label works only on interactive (a, button, input, ...) and landmark (h1, h2, ..., section, main, nav, ...) elements. – Kynewulf

This makes h1 invisible indeed, but wont show h1 title in the HeadingsMap – Ezarras

@Ezarras Are you talking about some browser extension named "HeadingsMap"? If so, you should raise them the problem as they should use the Accessible Name when available. – Intercalary

Answer 3

The best mechanism for doing this, which works in all screen readers is the clip-rect technique:

.screen-reader-text {
 position: absolute !important;
 height: 1px; width: 1px; 
 overflow: hidden;
 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
}

This technique will also minimize the number of keyboard traps introduced on mobile devices due to overlapping vertical elements that are sometimes the result of the "positioning off screen" techniques.

You can see the widespread screen reader support documented here https://jonathantneal.github.io/rat/

Quigley

Answer 4

Yes, you can use a variety of ways that can suit you. Three best ways are:

1. Setting 0 font-size.
2. Using negative text-indent.
3. Using absolute positioning.

Snippet

* {margin: 0; padding: 0; list-style: none;}
.type-1 {font-size: 0;}
.type-2 {overflow: hidden; text-indent: -9999px; line-height: 0;}
.type-3 {position: absolute; left: -9999px;}

<p>There are three headings below:</p>
<h1 class="type-1">Heading 1</h1>
<h1 class="type-2">Heading 2</h1>
<h1 class="type-3">Heading 3</h1>
<p>There are three headings above:</p>

Xanthous

Thanks Praveen. Do you have a sense of whether these techniques will negatively affect SEO? – Gang

@Gang AFAIK, I have been working in SEO since then and I have used these techniques. SEO will get affected negatively only if you add irrelevant keywords. – Xanthous