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?

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;
}