Dennis: This is your host Dennis, and today we'll be talking about accessible headers that contain graphics. First up I'd like to announce that there is a new email address for the WebAxe podcasting blog, and that is webaxe@gmail.com, and I've been using Gmail lately, actually on a side note, for my personal email and a couple of other email addresses that I maintain, and I'd just like to say that once you get over the little hump in the beginning and get used to the way it works, because it's a little different, it's just really awesome, it works really well, so I highly recommend Google mail.


Anyhow, today we'll be talking about, like I said, accessible headers with graphics. That means, as you know, it's easier to make many websites look pretty using some nice aesthetic graphics from any capable graphic artist, but the issue is if your H1 header, which really normally should be the name of your site or a brief name of your site on every page, will probably be some kind of graphical header, you know a header bar or something of the sort. The trick is making that accessible instead of just using a plain tag. You want to make that text accessible and it should be, once again, semantic, and you want to label that with like an H1 or an H2 header, any text that's in that header. So the basic premise is to create a div with an H1 or H2 tag or whatever header you're trying to replace the image of, and of course this could work for any tag really, but the most popular area you can use these methods is the header tags, or for me is the H1 tag in most of my sites.


The basic idea is inside your header tag, you're going to have the text of the header, but when you're using CSS, visually what you're going to do is you're going to hide that text and you're going to replace it with an image. Most of the time with the different methods, the way you do that is set a background image and make that div and the header the same size. You use the height and width to make it the same size as your graphic, and you just kind of hide the text by either pushing it out or not showing it at all, using the "display none" CSS attributes. The reason why we're doing this is, well one obviously is for screenwriters. If a person with visual impairment or what have you for some reason or other is using a screen reader, say you put in "all text" for the header graphic, you know it's just going to appear, it's going to sound through the screen reader and with the functions of a screen reader, it's just going to read, it's going to interpret it just as a normal graphic, but it's really not a normal graphic; it's actually a header, so using this method will relay to the screen reader and the user that this is actually a heading and use that text appropriately. It's also good again for...when I say again it's because it seems in the last few episodes that the accessibility in search engine optimization keeps coming up, that those topics keep overlaying, and this is another time when it does, another reason why doing this is good is for search optimization.


Now a search engine is kind of like a screen reader. It's not going to know that just a plain old graphic with an alt tag means more than that, and when you semantically code it up with this method that I'm going to go through in a second, then it's more semantic, and the screen reader and the search engine and the user will know that this text is a main heading, and it will treat it that way. There are many other reasons why this is a good method to use, but we're just not going to get into them. One of them say is just for better control over printing, if you want that image to print or not, or what you want to print for the heading that you're working on, but anyway let's get into the code, and as usual there's a sample of this code and a couple of good links in the blog, so please go to webaxe.blogspot.com and check it out and leave some comments and what you think, if I'm missing something or if I can enhance something.


Basically, and there are some variations of this, the classic FIR image replacement technique, and that stands for Fahrner Image Replacement, uses a div, an H1, and then an empty span. So first you have a div, and then given an I.D. like "header." So open that div and then open an H1 tag. Then directly after that open a span and close that span. Then put in the text for your header, and I'm going to use an example from my freelance website - Check Engine USA, web site tune-ups and overhauls. So you put in that text "Check Engine USA, " close your H1, and then close your div, and again of course this code will all be on the blog for you to check out later. So basically to go over that one more time, you have a div with an I.D. Open the H1. Then open a span and close it; that's where you're going to insert the image background. Then type in the text of your heading and then close your H1 and then close the div. So in the CSS what you're going to do is you're going to size that header div and size the span both to the same size of your image. So in my example the width is 750 and the height is 100, so both of them are that size, and then on the overflow you say "overflow hidden" on both of those elements so that the text actually just gets pushed out and is just not visible.


Now there are other methods of doing this, and if you go to the mezzoblue link on the blog, you'll see a few variations of this technique. Some of them are good or bad depending on what your opinion is or what the target audience of your site or whatever, and there's different arguments for doing different methods to this, so you kind of have to balance until there's...well we won't get into it, but in the future there may be a nice fix for this but for now it's just kind of an ongoing debate on which way is the best method of doing this. So the method that I have an example is the method I think is best, and when I say "best, " there are certain things you have to balance, and one of them is, is it useable for screen readers? Another is, are you using a whole bunch of extra html syntax or are you keeping it to a minimum? Another is, does the person have Java script turned off or do they have Java script on and CSS images on and CSS turned off or vice versa. Another one that I haven't come across yet is also using transparent PNGs or GIFs in your headers and being able to use those with these techniques and how well you can or cannot use them.


So that pretty much wraps it up then about the image replacement, so I know that's kind of a lot. If you have any questions, just send me an email or leave a question or comment on the blog.


One way to test this is you'll notice a lot of sites that are html strict and they're really separating content from styles. When you turn off the styles sheets, you'll see the heading one text there, but the image, of course, will be gone because the image is all displayed in the CSS, and it's really nice to finally get to that point when you turn off the style sheets and all you see is just nice text and maybe a few little images here and there, but that's really cool and that's when you know you've reached that point where your site is totally accessible and hopefully it's semantic and search engines will be able to crawl it really well.


Okay, this is Dennis signing off. I hope you learned a little something about image replacement in headings, and thanks for tuning in. I'll see you next time.