I prefer to set my Blogger header image to "Replace title and description" rather than as a background because it's clickable. However, when images are turned off, the visitor sees only the blog title as the header image's "alt text" and no description. When CSS and images are both off, screenreader users hear no emphasized h1 header, and the missing description provides no additional information.
Wouldn't it be more accessible if the h1 and description were visible when images and/or CSS are turned off?
My first approach to preserving the h1 header and description was to use the "off-left" technique. "Off-left" uses CSS to push a header or other element off the screen with a negative margin. For example:
h1{position: absolute; margin-left: -9999px;}
Off-left works great when CSS is off, but with images off and CSS on, the visitor sees NOTHING. Not good!
After some experimenting, I found a solution that worked with my old Minima blogger template and with my new "Blogger in Draft" template. The result looks like this:
The basic steps are to give the header-inner "position", style the title and description, and then position the text behind the header image:
- Make sure the header-inner div is relatively positioned because we are going to position a new "titlewrapper" div inside of it. The positioning of header-inner creates a reference point for the titlewrapper's absolute position:
<div id='header-inner' style='position: relative;'>
- Style the title and description inside the header-inner div, so that it looks good when images are off. The styles below are fine for my page, but style the header to suit yourself. My styles are appended just above the end of the blogger skin (]]></b:skin>) for easier maintenance:
.Header h1 {
margin: 0;
padding: 0 0 .3em;
letter-spacing: .2em;
}
.Header .description {
margin: 0;
padding: 0;
max-width: 700px;
letter-spacing: .2em;
}
- Add code to the template to include both title and description when a header image is used. I simply copied the titlewrapper div from the 'Show image as background to text' section and pasted it into the 'Show just the image, no text section', and then hid it UNDER the image using absolute positioning. Make sure the header image has a higher z-index than the titlewrapper:
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner' style='position: relative;'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block; position: relative; z-index: 2;'/> </a>
<div class='titlewrapper' style='background: transparent; position: absolute; top: 70px; left: 230px; z-index: 1;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:include name='description'/>
</div>
</div>
<b:else/>
<!--
Show image as background to text. ...
-->
<div expr:style='...' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
Gotchas
This method works perfectly as long as the image is opaque, since the h1 and description are still there, but hidden underneath it. I didn't use PNG-24 for transparent corners because the filesize is too big. Perfectly-blended Photoshop corners also look fine, except in IE, which does not honor border-radius, so everything else has square corners and the banner looks wrong.
Another problem is that Firefox 3.6 rounded the image's container, but not the image, so everything but the banner was rounded. I solved this problem by using the image as a background for the home page anchor <a> tag, which is a block element the size of the header. Background images do not display alt text, but the entire banner area is a clickable link, so I don't see that as a problem. I left in the header widget, but commented it out for the time being.
The new Blogger templates are a lot more complex than the old ones, and if you add any code it doesn't like, it will be deleted. So, be patient when editing and remember where you can safely edit the code and where you cannot.Enjoy the new accessibility!
