How to make accessible h1 with logo

Question

How can I have a logo linked to homepage and also have h1 but invisible

I have layout like this

 <header id="pageHeader">
                    <h1>
                        <a href="<?php bloginfo('url'); ?>">
                        <?php bloginfo('name'); ?>
                        </a>
                    </h1>

Then I've used the css to for image as background but the logo is not loading, anyone?

  header#pageHeader h1 a {
  width:130px;
  height:70px;
  text-indent:-9999px;
  background:url(/pict/logo.png);
  background-repeat: no-repeat;
}

Answer 1

Your missing display:inline-block;

compare this fiddle with this one

differences highlighted in this question, quoted below:

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. inline
This value causes an element to generate one or more inline boxes.

---

sorry to explain why this works:

Inline means only take up as much space as you need and allow other elements to sit in the flow with me. Your a tag has no text in it. So it does not need to take up any space, so it doesn't.

inline-block means take up whatever space I'm configured to take up (defined in the CSS) and also allow elements to flow next to me. So this applies the width and height, where as inline doesn't

The other option is block, this means take up an entire row and don't let anything flow next to me

Answer 2

A simple display:block or display:inline-block is the answer

JSFiddle Demo

#pageHeader h1 a {
    width:130px;
    height:70px;
    text-indent:-9999px;
    background:url(http://lorempixel.com/output/abstract-q-c-130-70-8.jpg);
    background-repeat: no-repeat;
    display:block;
}

Answer 3

The accessible way is

<h1><a href=...><img src=... alt=... border=0></a></h1>

Answer 4

for a javascript fix, could always add onclick="location.href='yourblog';" to your h1 tag