[music]

Announcer: Welcome to Web Axe, practical web accessibility tips.

Dennis Lembree: Hello and welcome to Web Axe Episode 30, this is your host Dennis.

Ross Johnson: And I am Ross, your co-host I guess.

Dennis: How are you doing tonight, Ross?

Ross: Not too bad, how about you?

Dennis: Can't complain the Tigers are winning.

Ross: Yeah.

Dennis: The first game of the playoffs with the Ace.

Ross: Yeah, good to see that, I was in class so I didn't catch the beginning.

Dennis: It is a good start to the game. Michigan football is doing good.

Ross: Yeah, great game. [laughing]

Dennis: OK, before we get into the main segment, the titles attribute, let's take care of a couple of house keeping issues, Refresh Detroit, the local group that I and Ross started for refreshing cities, the next meet up is October 25th and is that a Wednesday?

Ross: It is.

Dennis: I think that is a Wednesday yeah, and we are actually meeting in Brighton Michigan, it's on the website refresh-detroit.org, it looks like some folks that have seen the Michigan website are going to be joining us, so that will be fun.


And I guess the last little announcement is just a little of a surprise, that we are going to be having a couple of really good interviews coming up in the next few weeks so be on the lookout for more good interviews.

Ross: And if you haven't checked out our last two interviews, which went really well, they are really informative.

Dennis: Chris Heilmann is really interesting character, he is cool, he actually messages me on Google, that Google messaging thing.

Ross: Oh yeah.

Dennis: Yeah a couple of funny things and then the next thing I know is on his blog he wrote a couple of words about stuff like these massive flies in Google Maps. You know like bugs and stuff and like flying cars that you can find in the Google maps.

Ross: So that is like easter eggs?

Dennis: Yeah, kind of like that.

Ross: That is kind of cool...

Dennis: I am not sure if they are on purpose or not but... [Ross laughing] one is a flying car and the other one is like a bug that was kind of caught on the film or something [both laughing].


So anyways, all right let's get to it. Episode 30, Web Axe practical web accessibility tips, we will be talking about the title attribute. Ross, what is the title attribute and where can you use it?

Ross: The title attributes is a method of signing a title to almost any element and it is not to be confused with title element which titles the page and that is probably something my girlfriend will make fun of me for knowing, but you can use it on pretty much any element, the more common places will be links or abbreviations, frame builds, and that sort of thing.

Dennis: Yeah, I use it a lot with the A tag links or images and frames...

Ross: Yeah.

Dennis: Yeah cause I am going to post a link on the Web Axe blog, but using a tile tag for frames, well hopefully you are not using frames in website anymore, but if for some reason, you know and there a few instances where you might have to frames. Definitely use the title attribute to label your frames and what each of them are, that is a priority one guideline. I think it is like 12.1 or something, but yeah that link is on webaxe.blogspot.com if you want to read more about that.


What are the benefits of using a title tag on these elements?

Ross: I guess there would be a semantic reason; you can better describe what each element is. It has accessibility benefits, which I will let you go over [both laughing]

Dennis: Right, I guess before we get in more detail, lets kind of explain the basics how it works in different browsers. Ross and I went through it together just before we started just to make sure we had it straight.


In most browsers, things like the Mozilla browsers, Netscape, Firefox, the alt attributes will not appear when you like mouse over an image but title attributes will.

Ross: Yeah and the alter attributes will only show if the images don't load or the images are turned of or something along those lines.

Dennis: Right exactly, and in IE like 5.5 or 6, the alt attributes do display when you mouse over the image and the title attribute, I think sometimes they do, it is kind of goofy.

Ross: Yeah, it seemed a little goofy, but basically any time you move your mouse over an element that has a title attribute a little box will come up, sometimes referred to as tool tips, it will just display whatever that title is, very cool.

Dennis: Right, go ahead sir [laughter]

Ross: no problem. You could use them, kind of as the same as a alt attribute for images, it's kind of a description of the picture. Or the common things for form is that you can have form, that has a title attribute and then it will describe the form, so say "sign up for a news letter" or something along those lines.

Dennis: Or say if you have some kind of password and it has to be characters or something the label for the form element would be password, but then to a title attribute this must be eight characters.

Ross: Yup.

Dennis: OK and then screen readers, of course if you don't have mouse for using or whatever, you know a different kind of user agents most of them will read that title tag also.

Ross: Yeah and we kind of went over that as far as access keys, that is one nice way of telling those with a screen reader what the access keys are.

Dennis: All right, so besides frames and images, we talked about form elements, ah yeah, abbreviations and acronyms, those tags, that was actually, I think, covered a while back in a Web Axe podcast, those basically, the only thing to it is the actually abbreviation or acronym tag itself and then the only inside that tag the title attribute. So if you have an abbreviation, say, let's see, what is a good abbreviation?

Ross: Wcag.

Dennis: Yeah wcaq, so around wcag you would have the abbr tag, is that right? [laughter]

Ross: Yup.

Dennis: OK. So you would have abbr title=web content accessibility guidelines and then close it up.

Ross: So that way, when they keep their mouse over it, they can get the spelled out abbreviations so it makes a little more sense, if you don't know what it is.

Dennis: Yeah, for anybody for people with cognitive disabilities or screen readers and such, it all works the same.

Ross: Yup.

Dennis: So same difference.


So, see in our notes we talk about the title tag versus the alt tag. You describe pretty much how those display on different browsers. I did jot down one tonight. Just so people don't forget about the long description attribute, title tags are fine, but if you have like a graphical chart and your alt tag is "graphical chart", if it requires a lot of data, you probably want to use a long description attribute which links to tags that covers all the data.

Ross: Yeah and to kind of piggy back on that, the title, usually most browsers they won't render a long title attribute. They cut it of at certain point, so you kind of do that to keep it concise and short for images.

Dennis: Yeah that is a good point.

Ross: Yeah if you going to go...

Dennis: For the title attribute you mean?

Ross: Yeah.

Dennis: Yeah, I think the limit is something like 256 or something like that.

Ross: Yeah it's not a ton.

Dennis: It is, something like that. So like I heard for an alt attribute a good size is like you know anywhere between five and 15 words but a title can be longer, but try to keep it to long.


So for all those usability and accessibility reasons, there is another reason Ross, three letters?

Ross: The SEO which [Dennis giggling] always seems to play a part.

Dennis: Right and I know you are quite the expert in.

Ross: Thanks, yeah I mean like any other thing in SEO it hasn't been officially confirmed by anyone but a lot of people do say it plays a role in keywords, especially for links, I think most people know that the text within a link is used as keyword so, probably not weighted as heavily has been discussed as being considered for keywords as well.

Dennis: In my experience I have seen that too, a lot big players have used, well I have seen use title attributes on links and the images in order to increase their search engine optimization.

Ross: Yeah, and it makes sense because...

Dennis: I would agree with that.

Ross: It's not...

Dennis: Yeah it does make sense.

Ross: It's not something that is hidden from the user, so it's not likely to be abused for keyword stuffing like the alt attribute used to be.

Dennis: Right. All right now that covers a lot of the basics, now I guess one last thing we wanted to talk about is just other cool things that you can do with the title tag, if using CSS and DOM.


You find something called that is called sweet titles.

Ross: Yeah, this is a script that Dustin Dies and it is really quick and easy and pretty much all it does, it looks through your document, finds whatever elements has a title tag, and kind of makes a cool fade in fade out box that you can style, put borders and different colors behind, so instead of a plain old...

Dennis: Yellow box.

Ross: Yeah yellow box, that comes off, it is kind of a...

Dennis: Oh so it's like a really cool looking tool tip thing that it fades in and out and stuff.

Ross: Yeah exactly.

Dennis: Cool.

Ross: And one nice thing about that actually or possibly could be a problem, is it doesn't have a set length that word stops displaying like a normal tooltip does, because it is done through the DOM, you can make it is as long as you want.

Dennis: That's cool.

Ross: Oh yeah.

Dennis: And I found two or three areas that use the title tag for style sheet switchers.

Ross: Oh yeah.

Dennis: Yeah, where did I find it, there was an and a couple of books, Sypoint Java script anthology, they mention they have a technique in there for that and Chris Heilmann who we interviewed, was that two weeks ago or so.

Ross: Yeah.

Dennis: In his book "Beginning JavaScript with DOM scripting and Ajax", he uses a title tag for, I think he mentioned style sheet switching, but he uses that for captions, a method in there to create nice captions and a slide show.


Like a non-obtrusive java script slide.

Ross: That is pretty cool.

Dennis: Yeah using the title and some other stuff, so there is a lot of cool things you can do with it.

Ross: Yeah and it is kind of nice because you can keep things kind of semantic without adding all kinds of all sorts of extra code.

Dennis: Right, Right it is all clean stuff.

Ross: Yeah, which we like.

Dennis: OK well that is it for episode 30, the title attributes, thanks for joining us, thanks for joining in again Ross.

Ross: No problem, glad to be here.

Dennis: OK and we will talk to you guys next time, bye.

Ross: Bye.


[music]

Intro voice: You can find the Web Axe blog and podcast at webaxe.blogspot.com email Web Axe at webaxe@gmail.com or simply leave a comment on one of the blog or podcast entries. Web Axe is brought to you by check engine USA, website tuneups and overhauls, checkengineusa.com.