seo Question posted in
Some basic information to get you started with this can be found here.

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

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?

Tags:

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
  4. 0

    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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search