What's the correct way to hide the

Question

The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:

Something.com | The best something ever

        

Answer 1

A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

to find more follow the link

Answer 2

Resizing the block would work:

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

Answer 3

You should be fine with visibility: hidden.

That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.

Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.

Answer 4

<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>

Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.