7 replies

Alternative for visually hiding element

front-end

My design for page does not include h2 for section but I know that heading of section is needed for SEO and good accessibility.

 <h2 class="visually-hidden">Features</h2>

 <h2 class="visually-hidden">Features</h2>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Is there good but easier alternative for this(to avoid solving this with hidden class but achieving same effect)?

KP-C

Kevin Powell - Community•3mo ago•

7 replies

bledajo

Alternative for visually hiding element

front-end

My design for page does not include h2 for section but I know that heading of section is needed for SEO and good accessibility.

 <h2 class="visually-hidden">Features</h2>

 <h2 class="visually-hidden">Features</h2>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Is there good but easier alternative for this(to avoid solving this with hidden class but achieving same effect)?

Alternative for visually hiding element

Similar Threads

Alternative for visually hiding element

Similar Threads

Similar Threads

Similar Threads